Modern inventory and order management dashboard with role-based access, email verification, and automated restock workflows.
Live Demo: snap-order-sigma.vercel.app
Snap Order is a full-stack web application that streamlines inventory tracking, order processing, and restock management for small to medium businesses. Built with a modern Next.js stack, it provides a public marketing homepage and separate dashboards for administrators and regular users with appropriate access controls.
- Users register, verify their email, browse available products, place orders, and track order status.
- Admins manage the product catalog, oversee all customer orders, update order statuses, and approve/cancel automated restock requests.
- Restock automation runs daily via a cron job — when product stock drops below the minimum threshold, a restock request is automatically generated for admin review.
- Email notifications are sent for account creation, email verification (OTP), and password reset.
| Category | Tech |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript (strict) |
| UI | React 19 + Tailwind CSS v4 + shadcn/ui |
| Database | PostgreSQL via Prisma ORM |
| Auth | JWT (dual-token: access + refresh) + bcrypt |
| Validation | Zod |
| Nodemailer (Gmail OAuth2) + React Email | |
| Media | Cloudinary |
| Deployment | Vercel |
- Marketing Homepage: Public landing page with hero, feature highlights, workflow overview, and RBAC/security sections; auth-aware CTAs (Sign In vs Dashboard)
- Authentication: Registration, login, email verification (OTP), password reset
- Role-Based Access: USER and ADMIN roles with middleware-enforced route protection
- Dashboard: Role-specific overviews with key metrics
- Product Management: Create products with stock and pricing
- Order Processing: Place orders with atomic stock deduction, status tracking (PENDING → CONFIRMED → SHIPPED → DELIVERED)
- Automated Restock: Daily cron checks stock thresholds, creates pending restock requests; admins approve with adjustable quantities
- Customer Management: Admin view of all registered users
- Profile Management: Update name, phone, and profile photo
- Email Notifications: Welcome emails, OTP verification, password reset codes
- Node.js 18+
- PostgreSQL database
- Gmail account with OAuth2 credentials (for email)
- Cloudinary account (for image uploads)
# Clone the repository
git clone https://github.com/programmerrakibul/snap-order.git
cd snap-order
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Edit .env with your credentials (see Environment Variables below)
# Apply database migrations
npx prisma migrate deploy
# Generate Prisma client
npx prisma generate
# Start development server
npm run devVisit http://localhost:3000 for the public homepage, or sign in to access the dashboard.
| Variable | Required | Description |
|---|---|---|
DATABASE_URL |
Yes | PostgreSQL connection string |
ACCESS_TOKEN_SECRET |
Yes | JWT secret for access tokens (min 32 chars) |
REFRESH_TOKEN_SECRET |
Yes | JWT secret for refresh tokens (min 32 chars) |
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME |
Yes | Cloudinary cloud name |
CLOUDINARY_API_KEY |
Yes | Cloudinary API key |
CLOUDINARY_API_SECRET |
Yes | Cloudinary API secret |
NEXT_PUBLIC_SITE_URL |
Yes | Application base URL |
GOOGLE_CLIENT_ID |
Yes | Gmail OAuth2 client ID |
GOOGLE_CLIENT_SECRET |
Yes | Gmail OAuth2 client secret |
GOOGLE_REFRESH_TOKEN |
Yes | Gmail OAuth2 refresh token |
EMAIL_FROM_NAME |
Yes | Sender display name |
EMAIL_FROM |
Yes | Sender email address |
NODE_ENV |
Yes | development, production, or test |
CRON_SECRET |
No | Bearer token for restock-check API endpoint |
NEXT_PUBLIC_DEMO_EMAIL |
No | Pre-filled demo email on login form |
NEXT_PUBLIC_DEMO_PASSWORD |
No | Pre-filled demo password on login form |
| Command | Description |
|---|---|
npm run dev |
Start development server on port 3000 |
npm run build |
Create production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run clean |
Remove build artifacts |
prisma/ # Database schema and migrations
src/
├── proxy.ts # Middleware — auth guard + token refresh
├── actions/server/ # Server Actions (auth, products, orders, restock)
├── app/ # Next.js App Router pages
│ ├── page.tsx # Public marketing homepage
│ ├── auth/ # Login, registration, forgot password
│ ├── dashboard/ # Protected pages (overview, products, orders, etc.)
│ └── api/restock-check/ # Cron endpoint for automated restock
├── components/
│ ├── home/ # Homepage sections (hero, features, workflow, roles)
│ ├── shared/ # Navbar, footer, container, dashboard layout
│ ├── emails/ # React Email templates
│ ├── forms/ # Client form components
│ ├── modals/ # Dialog/modal components
│ ├── tables/ # Data table components
│ └── ui/ # shadcn/ui primitives
├── lib/ # Core utilities (Prisma, JWT, email, OTP, validation)
├── providers/ # React context providers
├── schemas/ # Zod validation schemas
└── types/ # TypeScript type definitions
Six models: User, Product, Order, OrderItem, RestockRequest,
RestockRequestItem — with full relational mapping for inventory, orders, and
restock workflows. See prisma/schema.prisma for details.
Snap Order uses Next.js Server Actions for all data operations — there is no
traditional REST API. The only exception is GET/POST /api/restock-check which
is called by Vercel Cron. All server actions are defined in
src/actions/server/ and are callable directly from client components.
Md. Rakibul Islam
- Portfolio: https://programmer-rakibul.vercel.app
- Email: rakibul00206@gmail.com
- WhatsApp: +880 188841-9206