Book Store Frontend

Live Demo: https://ys-bookstore.vercel.app — free to sign in and explore.

⚠️ Note: This is hosted on free-tier services (Vercel for frontend, Render for backend, Brevo for email). Cold starts, rate limits, and sleep cycles may cause delays or temporary instability. For the best experience, run the project locally.

A full-featured online bookstore built with Next.js. Features role-based dashboards for admins, sellers, customers, and drivers.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS + shadcn/ui
• State: React Context (Auth, Cart, Notifications)
• HTTP Client: Axios with automatic token refresh
• Charts: Recharts
• Animations: Framer Motion
• Font: Roboto / Roboto Mono

Features

Customer

• Browse books by category
• Search and filter products
• Shopping cart with persistent state
• Checkout with ABA/Card/COD payment
• Order tracking with delivery stepper
• Product reviews and ratings
• Wishlist
• Email/password auth + Google/GitHub/Facebook OAuth

Seller

• Dashboard with sales analytics, revenue chart, top products
• Product management (CRUD)
• Category management
• Order item status management
• Monthly revenue, payment method/status stats

Admin

• Full dashboard with KPIs (sales, orders, users)
• Revenue overview chart (monthly)
• Top products
• User, seller, driver management
• Product, category, payment, review CRUD
• Delivery tracking

Driver

• Delivery tracking management

Getting Started

Prerequisites

• Node.js 18+
• Backend running at the configured NEXT_PUBLIC_API_BASE_URL

Environment Variables

Copy .env.example or create a .env file:

NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api

Install & Run

npm install
npm run dev

Open http://localhost:3001.

Project Structure

src/
├── app/                  # Next.js App Router pages
│   ├── admin/            # Admin dashboard & CRUD pages
│   ├── auth/             # Login, register, password reset
│   ├── seller/           # Seller dashboard & management
│   ├── cart/             # Shopping cart & checkout
│   ├── orders/           # Order history & tracking
│   ├── products/         # Product listing & detail
│   ├── profile/          # User profile
│   └── wishlist/         # Wishlist
├── components/           # Reusable UI components
│   ├── common/           # Navbar, sidebar, footer
│   ├── Dashboard/        # Admin KPIs & grids
│   ├── seller/           # Seller dashboard charts
│   ├── auth/             # Auth forms & OAuth
│   ├── book/             # Book cards, carousels
│   ├── cart/             # Cart & checkout
│   ├── order/            # Order components
│   ├── review/           # Review modal & cards
│   └── ui/               # shadcn primitives
├── context/              # React Context providers
├── hooks/                # Custom hooks
├── lib/                  # API helpers, utilities
└── types/                # TypeScript types & schemas

Available Scripts

npm run dev        # Start development server
npm run build      # Production build
npm run start      # Start production server
npm run lint       # Lint with ESLint

API Integration

Uses Axios with cookie-based auth (withCredentials: true). On 401 responses, the interceptor automatically calls /auth/refresh-token to rotate the access token. Failed refreshes redirect to /auth/signin.

Deployment

The app is deployed on Vercel. Backend CORS allows https://ys-bookstore.vercel.app.

npm run build