E-Commerce Website with Fake Store API

This is a final project of Front-end course. an e-commerce website built using HTML, CSS, JavaScript, and Bootstrap. The website integrates the Fake Store API to fetch and display products for users to browse, search, and purchase.

Live Demo

• https://front-final-datotoda.web.app
• https://front-final-datotoda.netlify.app

Endpoints

• homepage: /
• products list: /products/
• products by category: /products/?category=1
• products search: /products/?q=ssd
• product detail: /product/?id=1
• cart (must have products in cart): /cart/
• checkout (must have products in cart): /checkout/
• about_us: /about_us/
• contact: /contact/
• error 404: /path_that_does_not_exist/

Features

• Browse and search for products
• View detailed product information
• Add products to the shopping cart
• Checkout and complete the purchase

Technologies Used

• HTML - for structuring the web pages.
• CSS - for styling the website and enhancing its visual appearance.
• JavaScript - for implementing interactive features and functionality.
• Bootstrap - for responsive design and pre-built UI components.
• Fake Store API - to retrieve product data for the website.
• Comme Font

Getting Started

To get started with this project, follow the instructions below:

1. Clone the repository: git clone https://github.com/datotoda/front-final.git
2. Open the project directory: cd front-final
3. Run python -m http.server -d public 80 command

Usage

1. Upon opening the website, you will be presented with the homepage showcasing various products retrieved from the Fake Store API.
2. Use the search bar in product listing page to find specific products or browse through different categories.
3. Click on a product to view its detailed information, including images, rate, description, and price.
4. To add a product to your shopping cart, click the "Add to Cart" button on product detail page or "quick add to cart" button on product cards.
5. Access your shopping cart by clicking the cart icon, where you can review your selected items and for adjust quantities go to cart page.
6. To checkout click the "Checkout" button in cart offcanvas or "Proceed to checkout" button in cart page and follow the prompts to complete your fake purchase.

Contact

If you have any questions or need help with this project, you can contact me:

• Github: datotoda
• Email: datotoda1342@gmail.com