arbazpirwani / react-clean-mvvm-architecture

React Clean MVVM Architecture

This project is an implementation of a clean and maintainable React application based on the MVVM (Model-View-ViewModel) architectural pattern. It demonstrates best practices such as the SOLID principles, object calisthenics, clean architecture, and clean code. The project aims to provide a solid foundation for building scalable and maintainable React applications, serving as a helpful resource for the community.

Overview

The project is organized into different layers, each with its own responsibility, ensuring a clear separation of concerns. The main layers of the architecture are:

• Core: Contains utility classes and reusable components.
• Data: Handles API interactions, network communication, and data transformations.
• Domain: Contains the business logic, use cases, and entity models.
• Presentation: Manages UI components, state management, and dependency injection.

Project Structure

src/
│
├─ core/ 
│   └─ utils/ 
│
├─ data/ 
│   ├─ api/ 
│   ├─ constant/ 
│   ├─ entity/ 
│   ├─ network/ 
│   └─ repository/ 
│
├─ domain/ 
│   ├─ model/ 
│   ├─ repository/ 
│   └─ usecase/ 
│       └─ book/ 
│
└─ presentation/ 
    ├─ di/ 
    ├─ pages/ 
    └─ routes/ 

Getting Started

Follow these steps to set up and run the project on your local machine:

Prerequisites

• Node.js (v12 or higher)
• npm (v6 or higher)
• Git

Installation

1. Clone the repository:

   git clone https://github.com/your_username/React-Clean-MVVM-Architecture.git
   

2. Change into the project directory:

   cd React-Clean-MVVM-Architecture
   

3. Install the dependencies:

   npm install
   

4. Run the development server:

   npm start
   

   The application should now be running on http://localhost:3000.

Contributing

We welcome contributions from the community to improve this project. To contribute, please follow these steps:

1. Fork the project repository.
2. Create a new feature branch from the main branch.
3. Make your changes and commit them with a clear and descriptive commit message.
4. Push your changes to the feature branch on your fork.
5. Open a pull request targeting the main branch in the original repository.

Please make sure to read and follow the Code of Conduct and Contributing Guidelines before submitting a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

react-clean-mvvm-architecture's Issues

Improvement Request: Replace relative paths with absolute paths

Problem

Right now, we are using relative paths for importing the modules inside other modules, we can replace them with absolute paths for having clear and readable paths.

Current Implementation:

import SharedPreferences from "../../../core/utils/SharedPreferences"

Suggested Implementation:

import SharedPreferences from "core/utils/SharedPreferences"

References:

• https://create-react-app.dev/docs/importing-a-component/#absolute-imports

Bug: libraries are not installed for running the test cases, throwing errors while bootstrapping app.

When I'm starting the application, it's throwing following errors:

After doing a quick debugging, I found that two libraries are not yet installed and mentioned in the package.json as well. Not sure how it was running for you 😵‍💫

Solution:

• Insatll: @testing-library/react
• Install: @testing-library/jest-dom
• Do: npm install

This fixed for me, let me know your thoughts on this one 🚀

Can we have mobile support as well?

Looks like this is just web version of the app.

Can we have shared code between mobile apps and web like below? where just UI layer will be developed respectively but rest all re-used.

Improvement Request: Refactor the models into hooks

Current Implementation:

Right now we are using stand-alone functions (technically, those are also React Components) for the view models for example: BookDetailViewModel is a proper component, but the technical intention to develop this model is to separate the functional part from the view part. Therefore, we can refactor these models into React Hooks 🚀

We can make them pure hooks, as they are already achieving the same purpose that a hook does. And we can achieve it by renaming the functions. For example, we can rename the BookDetailViewModel to useBookDetailViewModel, and the rest will remain exactly the same.

Proposed Solution:

export default function useBookDetailViewModel(getBookByIdUseCase: GetBookByIdUseCase) {
   // implementation here... 
}


// inside the component 

const {book, getBookById} = useBookDetailViewModel(provideGetBookByIdUseCase());