Skip to content

React REST API project structure template using TypeScript, MobX, and Styled-Components

Notifications You must be signed in to change notification settings

dukkk3/react-rest-api-typescript-boilerplate

Repository files navigation

react-rest-api-typescript-boilerplate

I will be glad to any suggestions and corrections, for I am constantly trying to improve the structure of my projects :)

My email for contact - phoenix.ofdarkness@mail.ru

Pages

This folder contains the components that form the pages. (Can use Containers, Smart, Ordinary, Simple, and UI components in their implementation)

Containers

Container components that can use services and custom hooks are stored in this folder. (They may use Smart, Ordinary, Simple and UI components in their implementation.)

Components

Smart

This folder contains all smart components, which can use both the repository and custom hooks, but which cannot use services. (Can use in their implementation Ordinary, Simple and UI components)

Ordinary

This folder stores all the complex components that can't use the repository or custom hooks. (Can use Simple and UI components in their implementation)

Simple

This folder stores all auxiliary, silly components, which must not use any custom hooks or repository. (Can use UI components in their implementation)

UI

This folder contains all components that replace the native components (for example: button, label, radio, select, h1, h2, h3, and so on). These components may contain some logic, using hooks and storage (for example in the Select component)

Core

This folder contains all of the logic of the project. From services to config.

Config

This folder contains configuration files of example (for example: URI of servers or some limits/patterns/routes)

Constants

There are constants in this folder (for example: messages, units, mime-types)

Hooks

This folder contains all your hooks.

Models

In this folder there are all your models which come from API server. Try not to specify attached models in descriptions of the models themselves, it is better to do it in description of the response type of corresponding service.

Schemes

This folder contains your table schemes or form schemes.

Services

This folder stores your services for API-server communication.

Store

This folder stores (if used with MobX) store context and global store schemes.

Theme (for styled-components)

This folder stores your project's theme(s).

Types

This folder stores all domain types

Utils

This folder stores all auxiliary functions