A modern e-commerce catalogue for DreamPack Smart Solutions, a B2B packaging supplier offering paper bags, gift boxes, food containers, custom labels, and printing services.
- Framework: Next.js 16 (App Router)
- Database: PostgreSQL (Neon) with Drizzle ORM
- CMS: Custom Admin Dashboard
- Authentication: NextAuth.js
- Styling: Tailwind CSS
- Image Storage: Vercel Blob
- Analytics: Vercel Analytics
- Language: TypeScript
- Responsive product catalogue with category browsing
- Product search with category filters
- Individual product pages with image galleries
- Shopping cart with quote request flow
- Contact page with business info
- Mobile-friendly navigation with hover dropdowns
- Full CRUD for products and categories
- CMS for About page and Contact page content
- Site settings management (contact info, business hours, social links)
- Media management with Vercel Blob uploads
- User authentication with secure sessions
- Server-side rendering for SEO
- Optimized images with Next.js Image component
- Static generation where applicable
- Node.js 18+
- PostgreSQL database (or Neon account)
- Vercel account (for Blob storage)
- Clone the repository:
git clone https://github.com/AH316/dreampack.git
cd dreampack- Install dependencies:
npm install- Set up environment variables:
cp .env.example .envEdit .env with your credentials:
DATABASE_URL=postgresql://user:password@host:5432/dreampack
AUTH_SECRET=your-secret-key
BLOB_READ_WRITE_TOKEN=your-vercel-blob-token
- Push database schema:
npm run db:push- Run the development server:
npm run dev- Open http://localhost:3000 for the frontend
- Open http://localhost:3000/admin for the admin panel
src/
├── app/
│ ├── (frontend)/ # Public-facing pages
│ │ ├── page.tsx # Homepage
│ │ ├── products/ # All products listing
│ │ ├── category/[slug]/ # Category pages
│ │ ├── product/[slug]/ # Product detail pages
│ │ ├── search/ # Search functionality
│ │ ├── about/ # About page
│ │ ├── contact/ # Contact page
│ │ └── quote/ # Quote request page
│ ├── admin/ # Admin panel routes
│ │ ├── (auth)/ # Login page
│ │ └── (dashboard)/ # Protected admin pages
│ └── api/ # API routes
├── components/ # React components
│ ├── admin/ # Admin-specific components
│ ├── cart/ # Shopping cart components
│ ├── layout/ # Header, Footer, Navigation
│ ├── product/ # Product cards, grids
│ └── ui/ # Shared UI components
├── db/ # Database
│ ├── index.ts # Drizzle client
│ ├── schema.ts # Database schema
│ └── migrations/ # SQL migrations
└── lib/ # Utility functions
├── settings.ts # Site settings helper
└── cart/ # Cart context and types
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run db:generate |
Generate Drizzle migrations |
npm run db:push |
Push schema to database |
npm run db:studio |
Open Drizzle Studio |
| Variable | Description |
|---|---|
DATABASE_URL |
PostgreSQL connection string |
AUTH_SECRET |
Secret key for NextAuth.js |
BLOB_READ_WRITE_TOKEN |
Vercel Blob storage token |
Private - All rights reserved.