OrderXpress is a premium, high-performance Full Stack Point of Sale (POS) and inventory management system designed specifically for fast-paced restaurants, cafes, and retail stores. It merges a beautiful, dynamic user interface with robust backend operations to deliver lightning-fast checkout flows.
- ⚡ Lightning Fast POS Interface: Optimized Next.js 15 routing for instant category switching and cart management.
- 🌐 Full Stack Architecture: Complete end-to-end solution featuring a React/Next.js frontend and integrated Next.js API route backend.
- 💳 Multi-Gateway Payment Support: Fully integrated with Stripe Checkout for secure credit/debit card processing, alongside native wallet tracking (Google Pay, PhonePe, Paytm) and Cash tracking.
- 📦 Real-Time Inventory & DB: Powered by MongoDB Atlas. Products and transaction histories are instantly synced to the cloud.
- 🎨 Stunning UI/UX: Built with Tailwind CSS v4 and Framer Motion for smooth, dynamic animations, hover effects, and a premium "glassmorphism" aesthetic.
- 📊 Admin Dashboard: Comprehensive backend management portal to track recent orders, manage customer profiles, and update product inventory on the fly.
- 🌙 Dark Mode Support: Seamless toggling between light and dark themes using
next-themesand Shadcn UI components. - 🧾 Automated Digital Receipts: Auto-generates beautifully crafted printable order receipts upon successful payment routing.
- Frontend: Next.js 15 (App Router), React 19, TypeScript
- Styling: Tailwind CSS v4, Radix UI, Shadcn UI, Framer Motion
- Backend: Next.js Serverless API Routes
- Database: MongoDB & Mongoose
- Payments: Stripe API (
stripe-node) - Icons: Lucide React
Here's a flowchart visualizing how the OrderXpress full-stack ecosystem interacts from browsing to checkout:
sequenceDiagram
autonumber
participant U as 👤 User/Admin
participant UI as 🖥️ Next.js Frontend
participant API as ⚙️ Next.js API Routes
participant M as 🗄️ MongoDB Atlas
participant S as 💳 Stripe API
U->>UI: Browse Menu / Manage Items
UI->>API: Fetch Products/Inventory Data
API->>M: Query Database
M-->>API: Return Data
API-->>UI: Serve Items to Display
U->>UI: Add Items to Cart & Checkout
UI->>S: Process Secure Payment
S-->>UI: Payment Success webhook/response
UI->>API: Send Order Confirmation
API->>M: Save Order & Deduct Inventory
M-->>API: Database Updated
API-->>UI: Transaction Complete
UI-->>U: Generate Digital Receipt
Here is a visual breakdown of the package.json structure, illustrating our scripts, runtime dependencies, and devDependencies:
Make sure you have Node.js (v18+) and npm installed on your machine.
git clone https://github.com/CodeWithBasu/OrderXpress.git
cd OrderXpressnpm installCreate a .env.local file in the root directory and add your database and payment API keys.
# MongoDB Atlas Connection URI
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/OrderXpressDB
# Stripe Payment Keys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...(Note: To test card payments, ensure your Stripe keys are set to "Test Mode". To accept real money, swap them for "Live Mode" keys).
If you are starting fresh, you can optionally populate your database with our beautiful artisanal starter menu (Burgers, Pizzas, Desserts, Mocktails, etc.):
node scripts/seed.jsnpm run devOpen http://localhost:3000 with your browser to launch the POS terminal. Access the management dashboard at http://localhost:3000/admin.
This application connects to an external MongoDB Atlas cluster. If you encounter a 500 Internal Server Error when loading products, ensure that your current IP address is whitelisted in your MongoDB Atlas Network Access settings.
Built with ❤️ by CodeWithBasu