Description

We have created a demo app of React that demonstrates implementation of Material UI, Redux toolkit and Routing with react using typescript.

Technologies and Libraries:

• React+ Typescript
• Redux Toolkit
• Material UI
• React Hook Form
• Axios
• i18next
• React Router DOM
• ESLint
• Prettier

Prerequisites

• Node.js (>= 14.14.36)
• npm (>= 6.5.0)

Key Feature

• Login & Signup using JSON server
• Localization
• Light & Dark Theme setup
• Redux Toolkit setup
• Authenticated Routing
• Custom Hooks
• ESLint

Code Structure

we tried to implement the best practice of code structure in our project following are the example

all code go in src folder

• src/components/_ /*.tsx
• src/containers/_ /*.tsx
• src/pages/_ /*.tsx
• src/hooks/*.ts
• src/routes/*.tsx
• src/utils/*.ts
• src/redux/actions/*.ts
• src/redux/reducers/*.ts
• src/redux/store.ts
• src/redux/types.ts
• src/assets/fonts
• src/assets/icons
• src/translations/*.json
• server/db.json

Environment Variables

The environment variables can be found and modified in the .env file. They come with these default values:

env	DummyData
REACT_APP_BASE_URL	base_url

How to Setup

Step 1: git clone this repo.

Step 2: cd to the cloned repo.

Step 3: Install the node modules required for the project with npm i or yarn install

Step 4: Make sure you add the requires env in .env file check .env.example for help

Step 5: Start the app in development mode with npm run dev it will run the react application on http://localhost:3000/ and local JSON server on http://localhost:8000/ by default.

Installation

$ npm i

Running the app

# development
$ npm run dev

# build
$ npm run build

Learn More

To learn React, check out the React documentation.