react-mvvm-architecture

React MVVM Architecture

React MVVM Architecture is a simple and opinionated custom React framework that provides a solid foundation for building modern, efficient, and scalable React applications. It aims to simplify the setup process and offers a well-organized project structure to help developers get started quickly.

Features

• Bootstrap new React projects with TypeScript support and pre-installed packages like Zustand and React Query.
• Provides a structured project organization for better code maintainability and scalability.
• Customized App.tsx file with React Query setup to handle data fetching seamlessly.

Project Structure

react-mvvm-architecture
├── node_modules/      <-- Contains installed npm packages
│   └── ...
├── public/            <-- Public assets for the React app
│   ├── index.html
│   ├── favicon.ico
│   └── ...
├── src/               <-- Source code for the React app
│   ├── app/           <-- Application-specific use cases
│   │   └── usecases/
│   │       └── todo/
│   │           ├── TodoUseCase.ts
│   │           └── TodoUseCaseImpl.ts
│   ├── data/          <-- Data layer and repository implementations
│   │   └── TodoRepository.ts
│   │   └── TodoRepositoryImpl.ts
│   ├── domain/        <-- Domain models and entities
│   │   └── Todo.ts
│   ├── hooks/         <-- Custom hooks
│   │   └── useApi.ts
│   ├── presentation/  <-- Components for rendering UI
│   │   ├── components/
│   │   │   └── TodoItem.tsx
│   │   ├── TodoList.tsx
|   |
│   ├── App.css
│   ├── App.tsx        <-- Customized entry point for the React app
│   ├── index.css
│   └── index.tsx      <-- Main entry point for rendering the app
├── package.json       <-- Project configuration and dependencies
└── README.md          <-- Documentation for the React MVVM Architecture

Getting Started

To use React MVVM Architecture, you can create a new React app by running the following command:

npx react-mvvm-architecture create my-new-app

Replace my-new-app with the desired name for your project.

After running the command, your new React app will be created with TypeScript support, Zustand, and React Query installed. The App.tsx file will be customized to include the setup for React Query.

Customization and Contribution

React MVVM Architecture is designed to be customizable and extensible. You can modify the generated project structure or add additional features according to your specific project requirements.

Acknowledgments

React MVVM Architecture aims to simplify the setup process and provide a solid foundation for building React applications with Zustand and React Query. It is inspired by the need for a more structured and efficient way to kickstart new React projects.

Happy coding!