Next.js NestJS Three.js Prisma TailwindCSS Docker
BeyondTee is a premium, production-ready full-stack e-commerce solution that empowers users to customize casual wear (T-shirts, hoodies, and more) in an immersive, real-time 3D editor. Built with a robust monorepo architecture leveraging Next.js, NestJS, and Three.js.
- Immersive 3D Customizer Studio: Real-time interactive 3D apparel editor using React Three Fiber. Users can rotate, zoom, and decorate custom models (T-shirts, hoodies) dynamically.
- Smart Layering Engine: Add multiple decorative decals, custom typography, change colors, and scale/reposition layers on the fly.
- Premium E-Commerce Flow: Intelligent search and filter sidebar (by Fit, Collection, Gender), seamless cart management, secure checkout, and real-time public order tracking.
- Vibrant User Experience: Enhanced UI with custom cursors, scroll reveal animations, glassmorphism elements, and fully responsive layouts.
- Live Analytics Dashboard: Real-time telemetry tracking gross revenue, orders, stock levels, and user registration analytics.
- Order & Logistics Manager: Granular order tracking where admins can view specific 3D custom design configurations, transaction receipts, and customer details.
- Marketing Engine: Easily create, validate, and manage promotional coupon codes (percentage discount or flat-rate deductions).
- Client-Side Security: Integrated Next-Auth credential check paired with NestJS JWT guards to enforce secure, role-based authorization for admin layouts.
BeyondTee Landing Page ๐ฎ 3D Customizer Studio
BeyondTee 3D Customizer
BeyondTee Shop ๐ Admin Analytics Dashboard
BeyondTee Admin Dashboard
Ensure you have the following installed on your machine:
- Node.js (Version 18 or higher)
- Git
- Docker Desktop (Optional, for containerized run)
Navigate into the backend workspace and spin up the development API:
# 1. Navigate to the backend directory cd backend # 2. Install dependencies npm install # 3. Setup environment variables (Create .env based on .env.example) # Add keys for JWT, Stripe, Cloudinary, AWS S3 cp .env.example .env # 4. Generate Prisma client & initialize database (SQLite by default) npx prisma generate npx prisma migrate dev --name init # 5. Seed the product catalog npm run prisma:seed # Seeds the database with products and admin user # 6. Start NestJS server in watch mode npm run start:dev
The backend API will boot up on http://localhost:3001
Navigate to the web workspace and run the client-side server:
# 1. Navigate to the web directory cd ../web # 2. Install dependencies npm install # 3. Setup client environment variables # Ensure NEXT_PUBLIC_API_URL points to http://localhost:3001 cp .env.local.example .env.local # 4. Start Next.js development server npm run dev
Open your browser and visit http://localhost:3000
- Admin Panel Email:
admin - Admin Panel Password:
admin - Sign-in is accessible via http://localhost:3000/auth/signin
The stack is fully containerized and production-ready. You can build the stack using Docker or host it directly on a Hostinger VPS.
To run the full backend, frontend, and database locally in production containers:
- Edit
backend/prisma/schema.prismato switch the database provider topostgresql(or use a managed PostgreSQL service). - Spin up the containers using the production file:
docker-compose -f docker-compose.prod.yml up --build -d
Deploy the system directly on a Hostinger VPS with Nginx, Nginx Proxy, and Let's Encrypt SSL.
Connect to your Hostinger VPS via terminal:
ssh root@YOUR_VPS_IP_ADDRESS
Install the application prerequisites:
# Update server sudo apt update && sudo apt upgrade -y # Install Git sudo apt install git -y # Install Docker & Docker Compose sudo apt install docker.io docker-compose -y sudo systemctl enable docker sudo systemctl start docker
Clone the repository and set up environment files:
cd /var/www git clone https://github.com/Rushikesh5102/BeyondTee.git cd BeyondTee # Configure Backend nano backend/.env # (Paste database URL, Cloudinary secrets, Hostinger SMTP info. Ctrl+X, Y, Enter) # Configure Frontend nano web/.env.local # (Paste production backend URL NEXT_PUBLIC_API_URL and nextauth configurations. Ctrl+X, Y, Enter)
Boot up the stack in detached background mode:
sudo docker-compose -f docker-compose.prod.yml up --build -d
Verify container status:
sudo docker ps
Set up Nginx as a reverse proxy:
# Install Nginx and SSL tools sudo apt install nginx -y sudo apt install certbot python3-certbot-nginx -y # Configure Nginx proxy rules sudo nano /etc/nginx/sites-available/beyondtee
Paste this configuration (replace yourdomain.in with your domain):
server { server_name yourdomain.in www.yourdomain.in; # Route /api traffic to the NestJS Backend (Port 3001) location /api/ { proxy_pass http://localhost:3001/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } # Route all other traffic to the Next.js Frontend (Port 3000) location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }
Enable the configurations and restart Nginx:
sudo ln -s /etc/nginx/sites-available/beyondtee /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl restart nginx
Obtain a free SSL certificate for secure HTTPS:
sudo certbot --nginx -d yourdomain.in -d www.yourdomain.in
Beyondtee/
โโโ backend/ # NestJS backend API
โ โโโ prisma/ # Database schemas and seeds
โ โโโ src/ # Core application source code
โ โโโ Dockerfile # Backend deployment container
โโโ web/ # Next.js customizer client
โ โโโ public/ # Static assets and icons
โ โโโ src/ # Next.js pages & React components
โ โโโ Dockerfile # Frontend deployment container
โโโ docs/ # Screenshots and assets
โโโ docker-compose.yml # Local stack orchestration