▄▀█ ▀▄▀ █ █▀
█▀█ █░█ █ ▄█
A production-ready, full-stack luxury travel booking platform.
Next.js 16 · MongoDB · Razorpay · Groq AI · NextAuth v5
Axis is a high-end travel booking application built with Next.js 16 (App Router). It features AI-powered destination search via Groq, a Razorpay checkout with deposit support and loyalty miles, a real-time admin dashboard, and a bespoke glassmorphic UI — no component libraries, fully hand-crafted.
💎 Premium User Experience
- Glassmorphic Design System — bespoke CSS variables and cinematic animations with no utility-class clutter
- Domestic / International Mode — site-wide toggle that instantly filters destinations, packages, and the lookbook gallery while transitioning hero sliders
- Pinterest-Style Lookbook — masonry gallery with high-resolution photography and frosted-glass category filters
- Interactive 3D Globe — spinning WebGL globe with projection-tracked floating HTML location labels
🤖 AI-Powered Exploration
- Destination Search — Groq (Llama-3.3-70b) matches users with 4–6 curated destinations from a natural language query
- Streaming Budget Planner — generates real-time itineraries and cost breakdowns directly in the browser
🗺️ Interactive Map
- Luxury Cartography — built on
react-leafletwith Carto Voyager basemaps - Native Scroll Feel — custom DOM-level wheel interceptors for Mac trackpad pan and pinch-zoom
- Smart Camera — clicking a destination card collapses the glass sidebar and smoothly flies to the map pin
💳 Payments & Booking
- Flexible Checkout — pay in full upfront, or secure a booking with a 25% deposit
- Pay Remaining Balance — dedicated portal flow to pay off the outstanding 75%
- Axis Miles Loyalty — apply loyalty miles at checkout for real-time discounts
- Post-Booking Invoice — detailed success page generates a full receipt
- Automated Cancellations — cancel ≥48 hours before travel with an automated Razorpay refund
🛡️ Admin & Security
- Real-Time Admin Portal — SWR-powered dashboard with revenue charts, role management, refund processing, and date-range filtering
- Cryptographic Webhooks — Razorpay events verified via HMAC signatures with idempotency constraints to prevent duplicate processing
- Rate Limiting — Upstash Redis guards registration and checkout endpoints against brute-force attacks
| Category | Technology |
|---|---|
| Framework | Next.js 16.2 (App Router, Turbopack) |
| Database | MongoDB Atlas (Mongoose 9) |
| Authentication | NextAuth v5 — Google OAuth + Credentials |
| Payments | Razorpay — Checkout JS + Webhooks |
| Styling | Vanilla CSS + CSS Variables |
| AI | Groq API (Llama 3.3-70b) |
| Validation | Zod |
| Nodemailer (SMTP) | |
| Rate Limiting | Upstash Redis |
| Monitoring | Vercel Analytics, Speed Insights, Sentry |
git clone https://github.com/PremSahith/Axis.git
cd Axisnpm installCreate .env.local in the project root. All required keys are typed in lib/env.ts.
# Database
MONGODB_URI=mongodb+srv://<user>:<password>@cluster...
# Auth
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
AUTH_GOOGLE_ID=your_google_oauth_id
AUTH_GOOGLE_SECRET=your_google_oauth_secret
# Payments
RAZORPAY_KEY_ID=rzp_test_...
RAZORPAY_KEY_SECRET=your_razorpay_secret
RAZORPAY_WEBHOOK_SECRET=your_webhook_secret
NEXT_PUBLIC_RAZORPAY_KEY_ID=rzp_test_...
# AI
GROQ_API_KEY=gsk_...npm run devOpen http://localhost:3000.
MongoDB Connection Pooling — a global Mongoose cache prevents connection exhaustion in Vercel's serverless environment and is passed securely to the NextAuth MongoDBAdapter.
Incremental TypeScript — allowJs: true supports a gradual migration; core utilities and DB models (e.g. the IBooking interface) are already fully typed.
ISR at the Edge — heavy content pages (destinations, packages, lookbook) are statically generated at the edge with a 3600s revalidation window for fast loads and minimal DB hits.
Dynamic SEO — TouristDestination and Product JSON-LD schemas, plus dynamically generated OpenGraph tags for rich social sharing previews.