Skip to main content
CampusBite is built with modern JavaScript technologies across the full stack. This page documents all major dependencies and their purposes.

​
Frontend stack

The client application is a React single-page application built with Vite.

​
Core frameworks

React 19.2

UI library with hooks and context for state management

Vite 7.3

Build tool with hot module replacement

React Router 7.13

Client-side routing with protected routes

Tailwind CSS 4.1

Utility-first CSS framework for styling

​
UI components

CampusBite uses a shadcn/ui-inspired component architecture with Radix UI primitives:
PackagePurpose
@radix-ui/react-dialogModal dialogs for confirmations
@radix-ui/react-dropdown-menuUser profile and action menus
@radix-ui/react-selectStyled select inputs
@radix-ui/react-switchToggle switches for availability
@radix-ui/react-tabsTab navigation in store dashboard
@radix-ui/react-avatarUser profile avatars
@radix-ui/react-checkboxForm checkboxes
@radix-ui/react-labelAccessible form labels
@radix-ui/react-popoverPopover menus
@radix-ui/react-scroll-areaCustom scrollbars
@radix-ui/react-separatorDividers
All Radix components are wrapped in custom implementations at frontend/src/components/ui/ to match the app’s design system.

​
Utilities and styling

"lucide-react": "^0.564.0"        // Icon library
"class-variance-authority": "^0.7.1"  // Component variants
"clsx": "^2.1.1"                  // Conditional classNames
"tailwind-merge": "^3.4.1"        // Merge Tailwind classes
"tailwindcss-animate": "^1.0.7"   // Animation utilities
"sonner": "^2.0.7"                // Toast notifications

​
HTTP client

Axios 1.13.5 handles all API communication with advanced features:
  • Request interceptor: Auto-attach JWT tokens
  • Response interceptor: Auto-refresh expired tokens (frontend/src/lib/api.js:28)
  • FormData support: Automatic content-type handling for file uploads
// Token refresh on 401 response
api.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401 && !originalRequest._retry) {
      // Attempt token refresh
    }
  }
)

​
Backend stack

The server is a Node.js application built with Express.js using ES modules.

​
Core framework

Node.js 18+

JavaScript runtime (ES modules enabled)

Express 5.2

Web framework for REST APIs

​
Database and ODM

MongoDB with Mongoose 8.12:
  • Schema validation with Mongoose models
  • Connection pooling and retry logic
  • SRV DNS resolution with fallback guidance (backend/src/config/db.js:23)
  • Auto-creation of collections on first server start
The system defines five main Mongoose schemas:
  1. User - Students, faculty, and store employees
  2. Store - Food outlets on campus
  3. MenuItem - Menu items with pricing and availability
  4. Order - Order records with status tracking
  5. RefreshToken - JWT refresh token whitelist
All schemas are located in backend/src/models/.

​
Authentication

"bcryptjs": "^3.0.3"           // Password hashing
"jsonwebtoken": "^9.0.3"      // JWT generation and verification
"cookie-parser": "^1.4.7"     // Cookie parsing middleware
JWT configuration:
  • Access tokens: 1 hour expiry
  • Refresh tokens: 7 days expiry
  • Tokens signed with separate secrets from environment variables

​
Security middleware

Helmet 8.1

Sets secure HTTP headers

CORS 2.8

Cross-origin resource sharing

express-rate-limit 8.2

Rate limiting with custom strategies
Rate limiting uses three separate limiters: global (3000 req/15min), auth (80 req/15min), and per-user order actions (300 req/15min). See backend/src/index.js:84.

​
Email service

Nodemailer 8.0 for transactional emails:
  • Gmail SMTP integration with app passwords
  • Email verification on registration
  • Password reset links
  • Order confirmation emails (optional)
Configuration via environment variables: 
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
[email protected]
SMTP_PASS=app-password

​
File uploads

Multer 2.0 middleware handles image uploads:
  • Menu item images
  • Store logos
  • UPI QR codes
  • Stored in /public/uploads/ (dev) or /data/uploads/ (production)
See backend/src/middleware/upload.js for Multer configuration.

​
Validation

Zod 4.3 for schema validation:
  • Request body validation
  • Type-safe error messages
  • Integration with Express via validation middleware (backend/src/middleware/validate.js)

​
Utilities

"uuid": "^13.0.0"       // Unique identifiers for orders
"morgan": "^1.10.1"     // HTTP request logging
"dotenv": "^17.3.1"     // Environment variable management

​
Development tools

Nodemon 3.1

Auto-restart server on file changes

Concurrently 8.2

Run frontend and backend in parallel

ESLint 9.39

Code linting and formatting

​
Package managers

The project uses npm as the primary package manager. Install all dependencies with: 
npm run install:all
This command installs dependencies for root, backend, and frontend workspaces.

​
Environment variables

CampusBite requires several environment variables for configuration:

​
Backend (.env)

VariableDescriptionExample
PORTServer port5000
NODE_ENVEnvironmentdevelopment
DATABASE_URLMongoDB URImongodb://localhost:27017/campusbite
JWT_SECRETAccess token secretRandom 32+ char string
JWT_REFRESH_SECRETRefresh token secretRandom 32+ char string
SMTP_USERGmail address[email protected]
SMTP_PASSGmail app passwordGenerated from Google
FRONTEND_URLFrontend URLhttp://localhost:5173
VariableDescriptionDefault
JWT_EXPIRES_INAccess token expiry1h
JWT_REFRESH_EXPIRES_INRefresh token expiry7d
SMTP_HOSTSMTP serversmtp.gmail.com
SMTP_PORTSMTP port587
FROM_EMAILSender email[email protected]
UPLOAD_DIRUpload directorybackend/public/uploads

​
Third-party integrations

CampusBite integrates with external services:

​
Gmail SMTP

Used for sending verification and password reset emails. Requires a Google account with 2-Step Verification enabled and an App Password generated.
Gmail App Passwords can be generated at: Google Account → Security → 2-Step Verification → App passwords.

​
UPI payment apps

Generates deep links for Indian UPI payment apps:
  • Google Pay (gpay://)
  • PhonePe (phonepe://)
  • Paytm (paytmmp://)
  • BHIM UPI (upi://)
Links are generated in backend/src/services/paymentService.js and include the store’s UPI ID and payment amount.
UPI deep links only work on mobile devices with the respective apps installed. The system doesn’t integrate with payment gateways—store employees manually confirm payments.

​
Browser compatibility

The frontend targets modern browsers with:
  • ES2020+ JavaScript features
  • CSS Grid and Flexbox
  • Native FormData API
  • LocalStorage for auth persistence
No Internet Explorer support. Minimum recommended versions:
  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

​
Next steps

Project structure

Explore the codebase organization

Architecture overview

Understand the system design

Build docs developers (and LLMs) love

Get started for freeTalk to us