https://github.com/abh1xxx/fakestore-bootstrap5
This project is a clone of an e-commerce website built using **HTML**, **CSS**, **Bootstrap**, and the **FakeStore API**. It dynamically fetches product data and displays it in a responsive layout. The website is fully responsive, ensuring a smooth experience on desktop, tablet, and mobile devices.
https://github.com/abh1xxx/fakestore-bootstrap5
bootstrap fakestore-api fetch-api html-css-javascript react react-boo react-bootstrap-components react-bootstrap-form reactjs
Last synced: 3 months ago
JSON representation
This project is a clone of an e-commerce website built using **HTML**, **CSS**, **Bootstrap**, and the **FakeStore API**. It dynamically fetches product data and displays it in a responsive layout. The website is fully responsive, ensuring a smooth experience on desktop, tablet, and mobile devices.
- Host: GitHub
- URL: https://github.com/abh1xxx/fakestore-bootstrap5
- Owner: Abh1xxx
- Created: 2025-01-02T12:30:40.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-29T10:46:55.000Z (4 months ago)
- Last Synced: 2025-03-01T23:55:58.813Z (3 months ago)
- Topics: bootstrap, fakestore-api, fetch-api, html-css-javascript, react, react-boo, react-bootstrap-components, react-bootstrap-form, reactjs
- Language: HTML
- Homepage: https://fake-product-module2end-asgnmt.netlify.app/
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fake Store - E-commerce Website Clone
## Objective:
This project aims to clone a modern e-commerce website using **HTML**, **CSS**, **Bootstrap**, and integrate the **FakeStore API** to dynamically fetch and display product details.
## Features:
- **Homepage**: Displays product details retrieved from the **FakeStore API** using **JavaScript Fetch**.
- **Product Details**: Clicking on a product redirects users to a new page with detailed information such as full product image, title, description, price, and category.
- **Responsive Design**: The website is fully responsive and adjusts to different screen sizes, including mobile, tablet, and desktop.
- **Bootstrap Styling**: Utilizes **Bootstrap 5** for layout, design, and responsiveness.
## Technologies Used:
- **HTML**: For page structure and content.
- **CSS**: For styling the website.
- **Bootstrap**: For responsive grid layout and UI components.
- **JavaScript (Fetch API)**: To retrieve product data from the **FakeStore API**.
## Functional Requirements:
- **Product Cards**: Fetch and display product data dynamically in a grid format.
- **Product Details Page**: When a product is clicked, the user is taken to a page showing detailed product information.
- **Loading Spinner**: A loading spinner appears while product data is being fetched.
## Live Demo:
Visit the live demo of the project here: [Fake Store Demo](https://fake-product-module2end-asgnmt.netlify.app/)
## Setup Instructions:
1. **Clone the Repository**:
```bash
git clone
```
2. **Open in Browser**: Open the `index.html` file in your browser to view the website.
## Deployment:
The website is deployed on **Netlify** for easy access. You can view it live at the link above.
## Acknowledgments:
- **FakeStore API**: The project uses the **FakeStore API** (https://fakestoreapi.com/products) to fetch product data for the website.