React Rest Api Typescript Boilerplate

Overview

The react-rest-api-typescript-boilerplate is a project structure that aims to provide a well-organized and scalable architecture for developing React applications. It follows a component-based approach and utilizes TypeScript for stronger type checking. The project structure consists of several folders, each serving a specific purpose, such as Pages, Containers, Components, Core, Config, Constants, Hooks, Models, Schemes, Services, Store, Theme, Types, and Utils.

Features

• Pages: Contains components that form the pages of the application. Different types of components can be used, including Containers, Smart, Ordinary, Simple, and UI components.
• Containers: Stores container components that can use services and custom hooks. They can utilize Smart, Ordinary, Simple, and UI components.
• Components: Divided into sub-folders:
  • Smart: Contains smart components that can use the repository and custom hooks but not services. Can use Ordinary, Simple, and UI components.
  • Ordinary: Stores complex components that cannot use the repository or custom hooks. Can use Simple and UI components.
  • Simple: Includes auxiliary, less complex components that should not use custom hooks or the repository. Can use UI components.
  • UI: Contains components that replace native components. These components may contain logic and utilize hooks and storage.
• Core: Stores all the logic of the project, including services, configurations, constants, hooks, and global types.
• Config: Contains configuration files, such as URIs of servers, limits, patterns, and routes for example purposes.
• Constants: Stores constant values, such as messages, units, and MIME types.
• Hooks: Stores custom hooks used throughout the application.
• Models: Contains models that represent data structures coming from the API server.
• Schemes: Stores table and form schemes used in the application.
• Services: Stores service files that handle communication with the API server.
• Store: Stores (if used with MobX) store context and global store schemes.
• Theme (for styled-components): Stores the project's theme(s) for UI styling purposes.
• Types: Stores all domain-specific types used in the application.
• Utils: Contains auxiliary functions used throughout the application.

Summary

The react-rest-api-typescript-boilerplate provides a structured and scalable architecture for developing React applications. It organizes components into different folders based on their complexity and usage of services, hooks, and repository. The project structure helps developers maintain clean and modular code and fosters code reusability. It also includes predefined folders for configurations, constants, models, services, and more. By following this boilerplate, developers can create robust and maintainable React applications.