/Store-App

Primary LanguageTypeScript

ezgif com-video-to-gif (10)

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 ✍