Development

This project was created with the intend to learn more about Hasura, NextJS and Tailwind. I'm rebuilding the old version of https://www.nopallets.com/, which was created with VueJS and NetlifyCMS.

Some things I'm planning to add to the new version:

• Login system
• Custom Dashboard (Basically it's own CMS)
• Better performance using NextJS Static Site Generation and next/image.

Current live version of this project is running on https://no-pallets-client.vercel.app/. Still in developemnt phase!

What's in the box

• Frontend
  • Typescript / Next.js
  • TailwindCSS / SCSS / SCSS Guidelines
  • Apollo / Codegen
  • NextAuth
  • ESlint / Prettier / Husky / Stylelint / Lint Staged

Setup local dev environment

git clone [email protected]:NoPallets/client.git
cd frontend

# install dependencies /// make sure you are using Node v14 or smaller
yarn

# Symlink dev environment
ln -hfs .env.example .env.local

# Start the project
yarn dev

Visit http://localhost:3000/

Backend

Currently all the backend is in the cloud.

The Hasura client and Postgres are hosted on Heroku And we are using S3 buckets inside AWS to store the images.

GraphQl codegen

We are using codegenator to create our Typescript types from our GraphQL schema.

The code is generated straight from our schema in Hasura into ./src/graphql/generated/graphql.tsx

Just run yarn graphql:types

For example, given the following schema:

type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}

type Post {
  id: Int!
  title: String!
  author: Author!
}

type Query {
  posts: [Post]
}

schema {
  query: Query
}

GraphQL Code Generator can generate the following TypeScript typings:

export type Maybe<T> = T | null;

/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
};

export type Author = {
  __typename?: "Author";
  id: Scalars["Int"];
  firstName: Scalars["String"];
  lastName: Scalars["String"];
  posts?: Maybe<Array<Maybe<Post>>>;
};

export type AuthorPostsArgs = {
  findTitle?: Maybe<Scalars["String"]>;
};

export type Post = {
  __typename?: "Post";
  id: Scalars["Int"];
  title: Scalars["String"];
  author: Author;
};

export type Query = {
  __typename?: "Query";
  posts?: Maybe<Array<Maybe<Post>>>;
};