Expected Outcome

E-Commerce Store

Description

Project aims to create a E-Commerce

Problem Statement

• We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.

Project Skeleton

E-Commerce with Typescript+Tailwindcss+Redux-Toolkit

SOLUTION
├── src
│    ├── index.css
│    ├── index.tsx
│    ├── App.tsx
│    ├── app
│    │   ├── hooks.ts
│    │   └── store.ts
│    ├── components
│    │   └── FilterComponents
|    |         ├── BrandsFilterComponents
|    |         ├── CategoryFilterComponents
|    |         ├── PriceFilterComponent
|    |         ├── PriceSort
|    |         ├── RatingSort
|    |         └── SearchComp
│    │   ├── Card.tsx
│    │   └── Navbar.tsx
│    │   
│    ├── features
│    │   └── productsSlice.ts
│    ├── helper
│    │   └── ToastNotify
│    ├── models
│    │   └── models.ts
│    ├── pages
│    │   ├── Cart.tsx
│    │   └── Home.tsx
│    └── react-app-env.d.ts
├── .gitignore
├── package.json
├── package-lock
├── tailwind.config.js
├── README.md
├── tsconfig.json
└── yarn.lock

At the end of the project, following topics are to be covered;

• HTML
• CSS
• JS
• TS
• React
• Redux-Toolkit
• Tailwind
• MUI
• Headless UI
• Advenced Filtered

At the end of the project, students will be able to;

• improve coding skills within HTML & CSS & JS & TS & React & Redux.

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Steps to Solution

• Step 1 : Create React App using npx create-react-app ts-store or yarn create react-app ts-store .(With this command, both tailwindcss and typescript are ready to go.)

• Step 2 : Use dummyJson API for products..

• Step 3 : You can view sample app on https://clarus-store.vercel.app/.](https://dataguess-ecommerce.vercel.app/

• Step 4 : Add project gif to your project and README.md file.

Notes

• You can add additional functionalities to your app.

☺ Happy Coding ✍

• https://dummyjson.com/docs/products/#search
• https://redux-toolkit.js.org/tutorials/typescript
• https://tailwindcss.com/