https://github.com/sudhanshu-ambastha/web-tech-project

css html5 javascript js php sql

Last synced: 6 months ago
JSON representation

Host: GitHub
URL: https://github.com/sudhanshu-ambastha/web-tech-project
Owner: Sudhanshu-Ambastha
Created: 2024-09-13T11:58:05.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-11-11T13:52:21.000Z (over 1 year ago)
Last Synced: 2025-09-10T19:11:08.928Z (11 months ago)
Topics: css, html5, javascript, js, php, sql
Language: CSS
Homepage: https://sudhanshu-ambastha.github.io/Web-Tech-Project/
Size: 8.45 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# E-Commerce Website

This project is an e-commerce website developed as part of a college assignment, aiming to provide hands-on experience in web development. It demonstrates key concepts including HTML, CSS, JavaScript, API integration, PHP and MySQL allowing students to apply their knowledge of front-end technologies. The site mimics a real-world e-commerce platform, showcasing product categorization, display, and purchase processes, and providing an interactive online shopping experience with features like a shopping cart and basic checkout process.

## Table of Contents

- [E-Commerce Website](#e-commerce-website)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [APIs:](#apis)
- [Installation Instructions](#installation-instructions)
- [Usage](#usage)
- [Contributors](#contributors)

## Features

- **Product Categories**: Explore various categories, including Clothing, Electronics, Books, Home & Garden, Toys, and Jewellery.
- **Dynamic Product Loading**: Fetch and display product data from external APIs based on selected categories.
- **Shopping Cart Functionality**: Add and remove products from the cart, with persistence using `localStorage`.
- **Responsive Design**: The site is designed to be mobile-friendly, ensuring a good user experience on all devices.
- **Basic Checkout Process**: Proceed to checkout after selecting products, with a placeholder for payment processing integration
- **API Integration**: Utilize APIs for fetching product data, ensuring dynamic and up-to-date content

## Technologies Used
[![My Skills](https://skillicons.dev/icons?i=html,css,js,php,mysql)](https://skillicons.dev)
- **HTML**: For the structure of the web pages.
- **Font Awesome**: For incorporating icons easily.
- **CSS**: For styling the pages, ensuring a user-friendly interface.
- **JavaScript**: For adding interactivity and dynamic content.
- **PHP**: For server-side scripting and API integration.
- **MySQL**: For database operations.

## APIs:
- [FakeStore API](https://fakestoreapi.com/): Used to fetch Clothing, Jewellery, Electronics.
- [DummyJson](https://dummyjson.com/): Used to fetch other product details.
- [OpenLibrary API](https://openlibrary.org/subjects/fantasy.json?limit=10): Used to fetch book data.

## Installation Instructions
1. Clone the Repository:
```
git clone https://github.com/Sudhanshu-Ambastha/Web-Tech-Project.git
```
2. Navigate to Project Directory:
```
cd PROJECT
```
3. Open `index.html` in a Web Browser: Open the `index.html` file in any modern web browser to start using the website.

## Usage
Adding Products to the Cart
- Visit any category page (e.g., Clothing).
- Click on the "Add to Cart" button for a product to add it to your shopping cart.
- Access the Cart page to view your selected items.

Removing Products from the Cart
- Go to the Cart page.
- Click on the Remove button next to any item to remove it from your cart.
- Click Proceed to Checkout to view the checkout process (currently implemented as a placeholder).

Data Persistence