Create React App with Redux-Toolkit and Material-UI (MUI)
This project provides a customized template that combines Create React App, Redux-Toolkit, and Material-UI (MUI) to kickstart your React application development. By following this template, you can adhere to best practices and quickly establish a consistent and efficient project structure.
Using the Template
To initiate a new project using this template, execute the following command:
npx create-react-app my-app --template react-redux-toolkit
After creating the project, navigate to the project directory and utilize the following scripts:
npm run api
This command starts the JSON server, providing mock APIs accessible at http://localhost:3001. The JSON server is utilized for demonstration purposes, allowing you to interact with the TODO app.
npm start
Use this command to launch the app in development mode. You can access the application in your browser at http://localhost:3000.
Features
1. React Router Dom (Routes)
Easily manage routing with React Router Dom. The template includes three sample routes, each utilizing the <Outlet/> component for layout management.
2. Redux-Toolkit (State Management & Data Fetching)
Harness the power of Redux-Toolkit for seamless state management and data fetching. Examples include:
-
ToDo Example: Demonstrates data fetching, caching, and state management. Implement a Tag System for efficient data categorization.
-
Counter Example: Illustrates basic state management capabilities using Redux-Toolkit.
3. Material-UI (UI Framework)
Leverage Material-UI (MUI) to create a visually appealing and responsive user interface. The template showcases a dashboard layout with an expandable Side Navigation and a Top Bar.
4. React i18Next (Localization)
Implement localization with React i18Next, enabling multi-language support for your application.
5. Error Boundaries
A JavaScript error in a part of the UI shouldn’t break the whole app. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
Extending the Project
Consider exploring the following tasks and ideas to enhance the project further:
1. Redux Persist
Enhance data retention and user experience by incorporating Redux Persist. This feature allows the Redux store to persist across sessions, ensuring valuable data continuity. Feel free to explore and implement these tasks to create a more robust and feature-rich application based on this template.
2. Injecting Environment Variables at Runtime (Using env-config.js): & Build Time Variables (Using .env files):
Pros of Injecting Environment Variables at Runtime (Using env-config.js): Flexibility: Environment variables can be changed without rebuilding the application. This is particularly useful for scenarios where you need to manage different configurations for multiple deployment environments or domains.
Dynamic Updates: You can change configuration values in real-time without redeploying, making it easier to adapt to changing requirements.
Single Build: You only need to build the application once, and the same build can be used across different environments with different configurations.
3. Test example TDD
Write test cases that cover user story level
4. Husky
Modern native Git hooks made easy Husky improves your commits and more
4. Authentication & Authorization Best Practices
Delve into additional authentication and authorization strategies, such as OAuth, JWT, and other security mechanisms. Understanding these practices can enhance the security and user experience of your application.
5. Keycloak & Authorization
Integrate Keycloak for robust authentication and authorization. You may find comments in the code that guide you through the setup process. Additionally, there's an alternative library that can simplify this integration. However, be mindful of its compatibility with the current project version.
Development(Contribute)
simply anyone can clone the project then run the template and check first
run inside the project
npx create-react-app my-app --template file:.
run in different location
npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]