https://github.com/dev-sathya17/-day23-guvi

https://github.com/dev-sathya17/-day23-guvi

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/dev-sathya17/-day23-guvi
• Owner: dev-sathya17
• Created: 2024-05-28T07:02:40.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-05-28T15:55:44.000Z (7 months ago)
• Last Synced: 2024-05-29T07:08:04.523Z (7 months ago)
• Language: JavaScript
• Size: 47.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Day 23 - GUVI

## React Shopping Cart Task

> [Source Code](./src/)  

> Explanation:

>

> First, we create a React Project using Vite.js.

> The page is styled using raw CSS only.

> Let's get into the Code flow:

>

> - In the App Component, we creata container, that includes a title, a description and a sub-container for our cards.

> - The data is located in a separate folder in a JavaScript file from where the array of objects is exported.

> - Such a folder structure is followed for enhanced readability.

> - The different components are separated into folders for better readability.

> - The components used are Navbar, Header, Body, Card and Footer.

> - All the components are imported into the App Component.

> - The data is imported into the body component, to iterate and generate as many cards as in the data.

> - [Source for data](./src/data/Data.js)

> - The UI is completely responsive.

> - The UI is made completely using BootStrapCSS and raw CSS at places.

> - The output can be viewed by running the following command on terminal.

> - `npm run dev`

---