🚀 Quickly dive into your product development without worring about the folder structure and configurations.
This is well structured template (starter kit) with modular (feature-driven) architecture for building medium to enterprise react web app.
As we all know the complexity of the code grows with the time of the app being in development. This particular architecture will be an overkill for a simple 1-3 page app or prototype. But for an app which is expected to grow with a new and new features added to it, this structure provides quite an accessible way to balance the growing complexity.
In his artcle Screaming Architecture Bob Martin says:
"Your architectures should tell readers about the system, not about the frameworks you used in your system. If you are building a health-care system, then when new programmers look at the source repository, their first impression should be: “Oh, this is a heath-care system”."
-
The biggest pro of this structure is the ease of adding/updating code. Since the bulk of the code is broken down into different features (modules) it is easy to add new features or update existing
modules. This separation also simplifies the codebase since now files can be considered private which helps with understanding the codebase. -
Another benefit is that the code outside the
modulesfolder is generally pretty simple to understand since most of the business logic is wrapped up inside themodulesfolder. This again makes understanding and working with the code that much easier. -
Better code discoverability - it's easier to locate things, what is located where.
-
Better encapsulation - no need for other modules to know too much about each other or too easily include code from each other, no need for the code which is used only for one feature to pile in the common place;
-
Better testability - the more separate the components are, the easier to test them independently from each other.
-
Easier to work for a team - different people can work on different features (
modules) without interfering much with each other's work. -
Better reusability, the core can be reused for other apps, also features can be detached more or less freely, considering that the core will stay the same or similar;
- Don't use or import one module in another module directly. Use global store to manage common states.
- Only import resources or components from modules coming from their
.index.tsfile only. Unless doing so, you would get ESlint error.
- 100% Typescript
- Axios Http Client with interceptiors
- Sample Todo Examples
- Modular architecture: in compliance with the best architectural practices
- Import alias
- Unit testing with Jest
- MUI - Material UI
- ESLINT - Configured to get Eslint error when you try to import a component or a class inside a module that doesn't come from index.ts
- Commonly used utility functions (
/src/utils/) - MIT License
├──assets — Global static assets such as images, svgs, icons, so on.
├──components — Global shared components
├──config — Global configurations and constants
├──contexts — Shared React Contexts
├──hooks — Shared custom react hooks
├──models — Application wise model classes
├──modules — Modules (features) that are independent each other.
├──Auth — module related to Authentication
├──Todo — module related to Todo List
├──...
├──pages — Shared pages that are not necessarily be included in modules.
├──routes — Anything related to routing setup.
├──services — Contains all external and shared services.
├──tests — Contains tests for shared services, functions and components.
Note: tests for individual modules are included in the module (feature) directory.
├──utils — Global Utility functions
├──index.html — HTML page containing application entry point
├──index.tsx — Single-page application (SPA) entry point
├──package.json — Workspace settings and NPM dependencies
├──tsconfig.ts — TypeScript configuration
├──tsconfig.aliases.ts — Extended Typescript configuration that contains import aliases.
└──vite.config.ts — JavaScript bundler configuration (docs)
├──.eslintrc.json — ESlint configuration and rules
# install dependencies
npm install
# serve at localhost
npm run dev- Node.js v18+
- VSCode: Free code editing IDE
Let’s create great products together! We encourage and welcome collaboration and any type of contribution. 👉 Learn the contributing docs on how to contribute the right way.