Skip to content

aadrika2006/Final-Project

Repository files navigation

🛍️ E-Commerce Web App (HTML + JS + Chat + Authentication)

A simple front-end-based E-Commerce Web Application that includes:

  • User authentication (login/signup/logout)
  • Product browsing and shopping cart
  • Real-time chat box for customer support (mock or integrated with a chatbot API)
  • Responsive UI built with HTML, CSS, and JavaScript

🚀 Features

✅ User Authentication (Login, Signup, Logout)
✅ Product Listing & Add to Cart
✅ Search Functionality
✅ Real-Time Chat Box (with basic chatbot logic or socket support)
✅ Responsive Design for all devices


🗂️ Project Structure

ecommerce-app/ ├── index.html # Main page (product listing, login, chat) ├── login.html # Separate login/signup page (optional) ├── chat.js # Chat box script ├── auth.js # Authentication logic ├── style.css # Styling for all pages └── assets/ # Images, icons, etc.

yaml Copy code


⚙️ Setup & Usage

1️⃣ Clone or Download

bash git clone https://github.com//ecommerce-app.git cd ecommerce-app 2️⃣ Run the App Simply open index.html in your browser. Optionally, run a simple HTTP server:

bash Copy code npx serve Then open 👉 http://localhost:3000

🔐 Authentication Flow Signup – Save new user credentials to localStorage (or backend if connected)

Login – Validate credentials and store session

Logout – Clear local session data

Optional: integrate Firebase Auth or Express API for real backend auth.

💬 Chat Box Appears on all pages (bottom-right corner)

Supports:

Sending/receiving messages

Auto-scroll and timestamp display

Simple chatbot or API integration (e.g., OpenAI API)

Implemented using HTML, CSS, and JavaScript (with optional WebSocket support)

🛠️ Future Enhancements Connect to a backend (Node/Express + DB)

Add checkout and payment gateway (Stripe)

Multi-user chat with real-time updates

Use JWT or Firebase for secure authentication

Store messages in a database

🧑‍💻 Tech Stack HTML5

CSS3

JavaScript (ES6+)

Optional: Firebase / Express.js for backend

📜 License This project is open-source under the MIT License. Feel free to modify and use it for learning or production.

✨ Author Created by Aadrika with ❤️ using ChatGPT (GPT-5).

yaml Copy code


Would you like me to generate the full HTML + JS + CSS code files for this e-commerce app (including the chat box and login UI)? I can bundle everything in one place so you can just paste it into your project folder.

About

FSWD

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors