https://github.com/abhishek-mallick/genai-fk-grid

Submission for Flipkart-Grid-5.0
https://github.com/abhishek-mallick/genai-fk-grid

Last synced: 22 days ago
JSON representation

Submission for Flipkart-Grid-5.0

• Host: GitHub
• URL: https://github.com/abhishek-mallick/genai-fk-grid
• Owner: Abhishek-Mallick
• Created: 2023-08-16T18:35:22.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-25T04:59:39.000Z (over 1 year ago)
• Last Synced: 2024-11-16T15:35:33.634Z (11 months ago)
• Language: JavaScript
• Homepage: https://fk-grid-genai.vercel.app/
• Size: 5.75 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# GenAI-fk-grid

This is a fully responsive Flipkart based e-commerce shopping website project built using React and Tailwind CSS. The website utilizes the Fake Store API to fetch data and display products. The Context API is used to manage state throughout the application.

## Table of Contents

- [Demo](#demo)

- [Features](#features)

- [Screenshots](#screenshots)

- [Technologies Used](#technologies-used)

- [Installation and Setup](#installation-and-setup)

## Demo

You can see a live demo of this project [here](https://fk-grid-genai.vercel.app/).

## Features

- `Home page` displays the `featured products`, which are fetched from the **Fake Store API**. Each product card displays the product image, name, and price.

- `Product Details` page showing a detailed view of the selected product, including an image, title, description and price.

- `Cart` page displaying the added products, quantities and total price. The user can **add or remove products** from the cart, and the cart will update accordingly.

- Fully `responsive design` that can adapt to different screen sizes and devices.

## Tech Stack

- **React**: A JavaScript library for building user interfaces

- **Tailwind CSS**: A utility-first CSS framework for rapidly building custom designs.

- **Fake Store API**: A free API for testing and prototyping e-commerce websites

- **Context API**: A React API for managing global state in an application.

## Screenshots

Below are some screenshots of the website.

![Home Page](/src/img/flipkart-home1.png)

![Cart/Sidebar](/src/img/flipkart-home2.png)

## Installation and Setup

1. Clone the repository to your local machine.

2. Navigate to the project directory and run `npm install` to install all dependencies.

3. Run `npm start` to start the application.

4. Open `http://localhost:3000` in your browser to view the website.