Project Structure
Useful Best Practices articles
Articles
- React Architecture: How to Structure (opens in a new tab)
- React Project Strucutre (opens in a new tab)
- Next.js Enterprise Project Structure (opens in a new tab)
Repos
Overview
.
├── components
│ ├── icons
│ ├── sections
│ └── primitives
│
├── cypress
│ ├── integration
│
├── hooks
│ ├── auth
│ ├── context
│ ├── shared
│ └── queries
├── lib
│ ├── Axios
│ ├── global_stores
│ ├── helpers
│ ├── Services
│
├── pages
│ ├── api
│ ├── dashboard
│ ├── dev
│ └── tenants
│ └── show
│
├── public
│
├── stories
│
├── styles
│
├── tests
│ ├── unit
│ └── integration
│ └── reports
│ └── __fixtures__
│
├── utils
│ ├── contstants
│ └── misc
│ └── types
│ What does each section do?
-
components: Contains necessary building units of the project, there are 3 types :
icons : Contains icons as TSX component transformed from normal svg items.
primitives: Contains very basic elements, such as inputs, buttons...
sections: contains components related to a specific feature/ section of the project. -
cypress: mainly includes End To End tests under folder integration, besides some other cypress config folders. -
Hooks: Contains hooks such as for authentication, for queries (react-query) -
lib: Contains helper function, Global-stores, Axios instances, Services (mostly for queries). -
pages: Under which we have views, and /api folder for serverless API. -
public: Nextjs default Folder for Assets (images, videso..). -
stories: Contains Storybook stories. -
style: Stylesheets folder for styling files files. -
tests: Contains Unit, integration and covergage folder to do unit tests and integration as well. -
utils: Types, constants, and the like
Import Alias
The project is set up to use Typescript path alias,
instead of importing like this ../../../../component/example.jsx,
we best import like that : @/components/example anywhere in the project .