Union-UI_026 (Chronotech)

Introduction

Chronotech is an e-commerce website designed to sell watches, musical instruments, and calculators. The core functionality of the site includes user authentication, product search, sorting, filtering, and management of cart, wishlist, and wallet. The project aims to provide a seamless shopping experience with an intuitive and responsive user interface.

Project Type

Fullstack

Deplolyed App

Frontend: https://chronotech.netlify.app/
Database: API link

Directory Structure

my-app/
├─ backend/
├─ frontend/
│ ├─ index.html
│ ├─ product.html
│ ├─ ProductDetails.html
│ ├─ authentication.html
│ ├─ css/
│ │ ├─ index.css
│ │ ├─ product.css
│ │ ├─ ProductDetails.css
│ │ ├─ authentication.css
│ ├─ js/
│ │ ├─ index.js
│ │ ├─ product.js
│ │ ├─ ProductDetails.js
│ │ ├─ authentication.js

Video Walkthrough of the project

Attach a very short video walkthough of all of the features [ 1 - 3 minutes ]

Features

List out the key features of your application.

• User login/signup
• Product search
• Product sorting
• Product filtering
• Cart management
• Wishlist management
• Wallet functionality

design decisions or assumptions

• The website uses a JSON server deployed on Render.com for backend data management.
• The user interface is built using HTML, CSS, JavaScript, and Bootstrap for responsiveness.
• Separate HTML, CSS, and JavaScript files are maintained for different pages to ensure modularity and ease of maintenance.

Installation & Getting started

Detailed instructions on how to install, configure, and get the project running.

# Clone the repository
git clone https://github.com/abhishek3042/Union-UI_026.git

# Navigate to the project directory
cd Union-UI_026

# Install dependencies
npm install

# Start the server
npm start

Home Page

Login and Signup

Products Page

Product Details

Cart, Whishlist wallet and Order

Credentials

Username: abskmsra
Password: 123456

APIs Used

• JSON Server for mock backend data management API link

API Endpoints

• GET /Watches
• POST /users
• PUT /users/:id
• PATCH /users/:id
• DELETE /users/:id

Resources:
https://chronotech-api-1.onrender.com/Watches 40x
https://chronotech-api-1.onrender.com/Musical_Instruments 52x
https://chronotech-api-1.onrender.com/Calculators 16x
https://chronotech-api-1.onrender.com/users 3x

Technology Stack

• HTML
• CSS
• JavaScript
• Bootstrap
• JSON Server
• Other libraries/modules