Frontend starter kit for building web applications with React and Typescript.
constate
- Library to uplift local state to global using React Context with minimal effort.react-query
- Library to manage data fethcing (caching and updating) statesantd
- UI Librarytailwindcss
- Utility-first CSS frameworkreact-router-dom
- Routeraxios
- Promise based HTTP client
eslint
- Linter. This project uses a combination of Javascript Standard Style with some additional rules.prettier
- Code formatterhusky
- Git hooks for consistent code
npm install
or
yarn install
npm run dev
oryarn dev
- Run dev servernpm run build
oryarn build
- Compiles and bundles the applicationnpm run lint
oryarn lint
- Validate the code using ESLintnpm run format
oryarn format
- Format code using Prettier
The codebase is divided into multiple folders
pages
- directory containing all the components for each pagecomponents
- directory containing all the components used across multiple pageshooks
- directory containing all the hooks used across multiple pages and componentsutils
- directory containing all the helper (or utility) functions used across multiple pages and componentsqueries
- directory containing all the queries (query and mutation functions) used across multiple pages and components
The core philosophy is directory structure is colocation. All the components, queries, hooks, utils, etc used in a particular page should be present with the page directory. Once the component or hook or util or query is used accross multiple pages it should be uplifted to its corresponding directory.
📁src
|--📁pages // directory containing all the page components
| |--📁home
| |--index.ts
| |--⚛️home.tsx
| |--📁components // directory containing all the components that are only used in the home page
| | |--⚛️project-stats.tsx
| |--📁queries // directory containing all the queries used only in the home page
| | |--projects.ts
| |--📁hooks // directory containing all the hooks used only in the home page
| |--⚛️use-project-data.ts
|
|--📁components // directory containing all the components that are using accross multiple pages or multiple components
| |--📁app-shell
| |--index.ts
| |--app-shell.tsx
| |--📁components // directory containing all the components used in app-shell only
| |--app-shell-link.tsx
|
|--📁hooks // directory containing all the hooks used across multiple pages or components
| |--⚛️use-auth.ts
|--📁utils // directory containing all the helper functions used across multiple pages and components
|--user.ts
This project uses hygen
for generating code using templates. For each template a prompt would be shown.
Make sure to provide all the names in kebab-case.
-
npx hygen page new
field description name
Name of the page. Make sure to use kebab-case name. It would create the page directory (
src/pages/page-name
) withindex.ts
and<name>.tsx
files. -
npx hygen page sub-component
field description name
Name of the Component. parent
Name of the page where this sub-component is to be created It would create the
<name>.tsx
insidesrc/pages/<parent>/components/
directory. -
npx hygen page hook
field description name
Name of the Make sure the hook-name doesn't contain use word. The hook file and function would be prefixed with use word automatically. parent
Name of the page where this sub-component is to be created It would create
use-<name>.tsx
insidesrc/pages/<parent>/hooks/
directory.
-
npx hygen component new
field description name
Name of the page. Make sure to use kebab-case name. It would create the component directory (
src/components/<name>
) withindex.ts
and<name>.tsx
files. -
npx hygen component sub-component
field description name
Name of the Component. parent
Name of the component where this sub-component is to be created It would create the
<name>.tsx
insidesrc/components/<parent>/components/
directory.
-
npx hygen hook new
field description name
Name of the Make sure the hook-name doesn't contain use word. The hook file and function would be prefixed with use word automatically. It would create
use-<name>.tsx
insidesrc/hooks/
directory. Make sure the hook-name doesn't contain use word. The hook file and function would be prefixed with use word automatically.
VITE_API_BASE_URL=<base-api-end-point>
VITE_BEARER_TOKEN_KEY=<key-name-for-storing-authentication-token-in-local-storage>
For example if using the Strapi, you can use the environment variables such as
VITE_API_BASE_URL=http://localhost:1337/api
VITE_BEARER_TOKEN_KEY=my-app-bearer-token
This starter project implements basic authentication. This assumes that we have 2 API endpoints
-
/auth/local
- Authentication APIfield type description identifier
string
email or username password
string
password { "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjcwNTg4MTczLCJleHAiOjE2NzMxODAxNzN9.xNbyaxTNHunIeOzcfV-7nF8aAOjQKXm3NGO40ozw2Ro", "user": { "id": 1, "username": "abinash", "email": "abinash@coinfeeds.io", "provider": "local", "confirmed": true, "blocked": false, "createdAt": "2022-12-09T07:59:32.460Z", "updatedAt": "2022-12-09T07:59:32.460Z" } }
-
/users/me
- API to fetch user information{ "id": 1, "username": "abinash", "email": "abinash@coinfeeds.io", "provider": "local", "confirmed": true, "blocked": false, "createdAt": "2022-12-09T07:59:32.460Z", "updatedAt": "2022-12-09T07:59:32.460Z" }