Tag2Eat is an IoT-enabled smart canteen system that streamlines the dining experience through NFC-based authentication and cashless transactions. By leveraging existing MIFARE college ID cards, ESP32 microcontrollers, and a modern web platform, the system eliminates long queues, reduces manual payment errors, and provides real-time transaction analytics.
- NFC Authentication: Tap-to-authenticate using existing college ID cards
- Web Dashboard: Real-time order management and transaction monitoring
- Shopping Cart System: Browse menu items and place orders
- Order Tracking: Live status updates for placed orders
- User Authentication: Secure login and profile management
- ESP32 Integration: Hardware communication with cloud platform
- ESP32: Main microcontroller with WiFi connectivity
- MFRC522 NFC Reader: Reads MIFARE card UIDs via SPI communication
- LCD Display (16x2): Shows authentication and payment status
- Buzzer: Audio feedback for transactions
Frontend & Backend:
- Next.js - React framework for web dashboard
- TypeScript - Type-safe development
- Supabase/Neon Postgres - Database for users and transactions
- Razorpay - UPI payment integration
- Vercel - Deployment platform
IoT Layer:
- Arduino/ESP32 Firmware - NFC reading and WiFi communication
- ThingSpeak MQTT - IoT messaging protocol
- REST APIs - Bridge between hardware and cloud
Development Tools:
- Biome.js - Code formatting and linting
- Husky - Git hooks for code quality
- pnpm - Fast, disk space efficient package manager
- User registration with student ID linking
- Secure login with session management
- NFC card UID mapping to user profiles
- Real-time order monitoring
- Menu item management
- Transaction history
- User profile management
- Browse canteen menu
- Add items to cart
- Place orders with NFC authentication
- Track order status (Pending → Preparing → Ready → Completed)
- UPI payment via Razorpay
- Secure transaction processing
- Payment status tracking
- Transaction receipts
- Node.js 18+ installed
- pnpm package manager
- Supabase/Neon database account
- Razorpay API credentials (for payment integration)
- ESP32 development board with MFRC522 NFC reader (for hardware testing)
-
Clone the repository
git clone https://github.com/rev-sin/Tag2Eat.git cd Tag2Eat -
Install dependencies
pnpm install
-
Set up environment variables
cp example.env .env.local
Update
.env.localwith your credentials:# Database DATABASE_URL=your_postgres_connection_string # Supabase NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key # Razorpay RAZORPAY_KEY_ID=your_razorpay_key RAZORPAY_SECRET=your_razorpay_secret # ThingSpeak (optional) THINGSPEAK_API_KEY=your_thingspeak_key
-
Run the development server
pnpm dev
-
Open the application
Navigate to http://localhost:3000
-
Upload ESP32 Firmware
- Open
arduino/directory in Arduino IDE - Configure WiFi credentials in the sketch
- Upload to ESP32 board
- Open
-
Wire the Components
- Connect MFRC522 to ESP32 via SPI pins
- Connect LCD display (I2C or parallel)
- Connect buzzer to GPIO pin
- Refer to circuit diagram in project documentation
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.