Store App

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

Clarus Store with Typescript+Tailwindcss+Redux-Toolkit

SOLUTION
├── src
│    ├── index.css
│    ├── index.tsx
│    ├── App.tsx
│    ├── app
│    │   ├── hooks.ts
│    │   └── store.ts
│    ├── components
│    │   ├── Card.tsx
│    │   ├── Navbar.tsx
│    │   └── SearchComp.tsx
│    ├── features
│    │   └── productsSlice.ts
│    ├── models
│    │   └── models.ts
│    ├── pages
│    │   ├── FavoritesPage.tsx
│    │   └── Home.tsx
│    └── react-app-env.d.ts
├── package.json
├── README.md
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

Objective

Build a Milestone Blog App using ReactJS.

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

• HTML

• CSS

• JS

• TS

• React

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

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

• 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 --template @anthonyharold or yarn create react-app ts-store --template @gurbuzomer.(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://store-app-react-styled-com-api.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://www.npmjs.com/package/@anthonyharold/cra-template
• https://dummyjson.com/docs/products/#search
• https://redux-toolkit.js.org/tutorials/typescript
• https://tailwindcss.com/