Honda Store

A modern full-stack motorcycle store inspired by Honda's official website.

Built with React, Express, PostgreSQL, and Prisma.

🌐 Live Demo: https://javedancode.github.io/honda-store/

⚡ REST API: https://honda-store.onrender.com/

---

Preview

Replace these with screenshots or a GIF once deployed.

Landing Page	Details Page

Cart	Store

---

Overview

Honda Store is a full-stack e-commerce application inspired by Honda's official website.

The goal of the project was to practice building a complete application from scratch using modern web technologies while focusing on clean architecture, reusable React components, RESTful API design, and relational databases.

The application allows users to browse motorcycles, search and filter products, view detailed specifications, manage a shopping cart, and complete a mock checkout experience.

Although checkout is intentionally non-functional, the overall shopping experience closely resembles a real online storefront.

---

Features

Store

• Browse all motorcycles
• Search motorcycles by name
• Filter by category
• Sort by name or price
• Modern card-based product layout

Product Details

• Dynamic routing with React Router
• Complete motorcycle specifications
• Quantity selector
• Add to Cart
• Buy Now

Shopping Cart

• Global cart state using Context API
• Increase / decrease quantity
• Remove individual products
• Cart summary
• Checkout form

User Experience

• Toast notifications
• Smooth navigation
• Honda-inspired UI
• CSS Modules
• Responsive-friendly component architecture

---

Tech Stack

Frontend

• React
• React Router
• Context API
• CSS Modules
• Fetch API
• React Toastify

Backend

• Node.js
• Express
• Prisma ORM

Database

• PostgreSQL
• Neon

Deployment

• GitHub Pages (Frontend)
• Render (Backend)
• Neon (Database)

---

Architecture

             React Client
                  │
                  │ Fetch API
                  ▼
          Express REST API
                  │
             Prisma ORM
                  │
                  ▼
      PostgreSQL Database
               (Neon)

---

API

Get all motorcycles

GET /api/motorcycles

Supports query parameters

?search=
?category=
?sort=

Example

GET /api/motorcycles?category=Sport&sort=price

---

Get motorcycle by slug

GET /api/motorcycles/:slug

Example

GET /api/motorcycles/cb650r

---

Get categories

GET /api/motorcycles/categories

Installation

Clone the repository

git clone https://github.com/JavedanCode/honda-store.git

Backend

cd server

npm install

Create

DATABASE_URL=YOUR_DATABASE_URL

Generate Prisma Client

npx prisma generate

Apply migrations

npx prisma migrate deploy

Seed the database

npm run seed

Run the server

npm start

---

Frontend

cd client

npm install

Create

VITE_API_URL=http://localhost:3000/api

Run

npm run dev

Acknowledgements

This project was created as part of my journey through The Odin Project while expanding it into a complete full-stack application beyond the original curriculum.

Honda® logos, images, and branding belong to Honda Motor Co., Ltd. and are used here strictly for educational and portfolio purposes.

---

License

This project is licensed under the MIT License.

---

Thanks for visiting!

If you enjoyed the project, feel free to ⭐ the repository.