📦 React Vite Assignment

Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form , React-i18next and Material UI.

🗂 Table of Content

• About
  • Features
  • Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Development
  • Build
  • Lint

🗂 Features

1. React.js with Redux Saga.
2. Typescript for type safety
3. Core libraries
   • Redux
   • Redux Toolkit
   • Redux Saga
   • Redux First History
   • Redux Logger
   • React Router
   • React Hook Form
   • Yup
   • Axios
   • React-i18next
   • MUI - Material UI
   • Styled Components
4. Other tools/libraries
   • ESLint, Prettier , Lint-staged, Pretty Quick
   • Husky
5. Opinionated folder structure
6. Internationalization for react app using React-i18next
7. Material UI
8. dummyJSON (https://dummyjson.com/docs/products)

🗂 Project Structure

./src
├── App.tsx # Application entrypoint
├── assets # assets folder contains all the static files (images, fonts, etc).
├── components # shared components
├── config # global configuration, env variables etc.
│   ├── Env.ts
│   └── i18n
├── features
│   ├── feature # 'feature'
│   │   ├── api # API folder contains http service calls
│   │   ├── assets # 'feature' assets folder
│   │   ├── components # 'feature' components
│   │   ├── hooks # 'feature' hooks
│   │   ├── index.ts # entry point for 'feature' public API
│   │   ├── store # 'feature' state stores contains slices, sagas, etc.
│   │   └── types # 'feature' typescript types
│   └── another_feature # 'another_feature'
├── hooks # shared hooks
├── libs # libraries imported or exported that can be used in different projects
│   ├── core
│   └── ui
├── pages  # contains all application pages
├── routes # routes configuration
├──  store # root store and store settings

👨‍💻 Getting Started

Prerequisites

nvm

brew install nvm

Node.js v18

nvm install v18.12.0

Pnpm

npm install -g pnpm

Docker

Docker Desktop Download

✅ Installation

Requires Node >=14.x

Install NPM packages:

pnpm install

🗂 Development

To start the application in the development mode run:

pnpm dev

🗂 Build

To build the application for production, run:

pnpm build

🗂 Lint

To lint the application run:

pnpm lint

🗂 Docker

To docker the application build:

pnpm docker:prod:build

To docker the application start:

pnpm docker:prod:start

To docker the application stop:

pnpm docker:prod:stop