UX_RIT — v.1.0 (UX Club — MSRIT) 🎨🚀✨

A small interactive website showcasing the UX Club at MS Ramaiah Institute of Technology. v.1.0 includes a portfolio, members, interactive HuntUp trivia (with email reward flow), draggable UI elements, and accessible modals. Built with Next.js (App Router), React, Tailwind-like utility classes and small custom primitives.

Quick links 🔗

• Live app root: /app (Next.js app router) 🌐
• Hunt trivia API: /api/hunt/* 🧩
  • Questions: app/api/hunt/questions/route.js 📋
  • Verify answer: app/api/hunt/verify/route.js ✅
  • Completion emails: app/api/hunt/complete/route.js ✉️
• Send mail endpoint (shared): app/api/send-mail/route.js 📤
• Mongo DB helper: lib/mongodb.js 🗄️

What's in v.1.0 (high level) ✨

• Interactive HuntUp trivia modal (app/components/hunt.js) — 5 seeded questions; after clearing all questions the user enters name & email and both user and owner get emails. 🎉👩‍💻
• Portfolio with animated cards and modal detail (app/portfolio/page.js) using motion layoutId transitions. 🃏🔁
• Members directory, join form modal, header, social links, and small UI primitives (Input, Button). 👥📇
• Micro-interactions: floating cards, draggable widgets, cat mascot with hover bubble. 🐱🪄
• Server-side email via Nodemailer and MongoDB for storing/serving questions. 🧾📬

Important features ✅

• Accessible modals (aria roles, outside-click close) ♿
• Mobile-first behaviors (portfolio modal tap-to-close on small screens) 📱
• Server-side answer verification (answers not exposed to client) 🔒
• Email receipts to both owner and user after completion ✉️🤝
• Seed script for hunt questions 🧱

Full file structure (v.1.0 snapshot) 📁

Click to expand repository tree

• app/
  • layout.js
  • globals.css
  • about/
    • page.js
  • portfolio/
    • page.js
  • members/
    • page.js
  • components/
    • header.js
    • hunt.js
    • form.js
    • input.js
    • btn.js
    • hnt-btn.js
    • social.js
    • home.js
    • ui/
      • aurora-background.js
      • 3d/ (CardBody, CardContainer, CardItem)
• app/api/
  • send-mail/
    • route.js
  • hunt/
    • questions/route.js
    • verify/route.js
    • complete/route.js
• lib/
  • mongodb.js
• scripts/
  • seedHuntQuestions.js
• package.json
• README.md
• .env.example

Getting started — Clone & install (Linux) 🧭🐧

1. Clone the repo
   • git clone https://github.com//UX_RIT.git
   • cd UX_RIT
2. Install dependencies
   • npm install
   • or yarn
3. Create .env (see below)
   • cp .env.example .env
   • edit .env with DB and SMTP credentials 🔐
4. Seed questions (optional)
   • node scripts/seedHuntQuestions.js 🧪
5. Run dev server
   • npm run dev
   • Open http://localhost:3000 🚀
6. Build and start (production)
   • npm run build
   • npm run start 🏁

Environment variables (.env) 🔐

Create .env from .env.example. Key values used by the app:

Required:

• MONGODB_URI — MongoDB connection string (e.g. mongodb+srv://USER:PASS@cluster.mongodb.net) 🗄️
• MONGODB_DB — database name (e.g. uxclub) 📛

SMTP / email (Nodemailer)

• SMTP_HOST — smtp host (e.g. smtp.gmail.com) 📡
• SMTP_PORT — smtp port (e.g. 587) 🔢
• SMTP_SECURE — "true" for TLS, otherwise "false" 🔒
• SMTP_USER — SMTP username (email) 👤
• SMTP_PASS — SMTP password or app-specific password 🔑
• TO_EMAIL — owner/club email to receive completion notifications (optional; fallback SMTP_USER) 📨

Optional

• NEXT_PUBLIC_BASE_URL — site URL for absolute links 🌍
• NODE_ENV — development | production 🧰

Tech stack & tools 🛠️

• Next.js (App Router) + React hooks ⚛️
• Tailwind-like utility classes in JSX 🎛️
• motion/react — animations & layout transitions ✨
• Nodemailer — server-side emails 📤
• MongoDB — questions storage 🍃
• dotenv — local environment config 🌱

Key components & where to look 🔎

• HuntUp: app/components/hunt.js — fetches /api/hunt/questions, verifies via /api/hunt/verify, sends completion to /api/hunt/complete. 🧩
• Portfolio modal: app/portfolio/page.js — animated card -> modal flow; mobile tap-to-close behavior. 📱💫
• Home interactions: app/components/home.js — draggable widgets & mascot. 🐾
• API mailers: app/api/send-mail/route.js, app/api/hunt/complete/route.js. ✉️
• DB helper: lib/mongodb.js 🛢️
• Seed: scripts/seedHuntQuestions.js 🧰

UX rationale — how this represents UX Club MSRIT 🎓

• Encourages learning with a playful, interactive HuntUp flow (one question at a time). 🧠🎲
• Portfolio & member pages highlight student work and community. 🖼️🤝
• Accessible patterns: aria roles, clear labels, feedback messages. ♿✅
• Delightful micro-interactions create approachable campus-club personality. 🥳✨

Deployment notes & tips 🚀

• Use MongoDB Atlas for production; set proper IP/network rules. ☁️
• For SMTP, use app passwords (Gmail) or a transactional email provider (SendGrid/Mailgun). 🔐✉️
• Consider adding rate-limits / CAPTCHA on completion email endpoint to avoid abuse. 🛡️
• Add environment-specific monitoring / logging for production. 📊

Contributing ✍️

• Open issues or PRs for improvements and bug fixes. 🐞➡️✅
• Document UX rationale in PRs when changing interactions. 📝

Extras & ideas 💡

• Leaderboard for HuntUp completions 🏆
• Persist user completions in DB 💾
• Add E2E tests for quiz flow and APIs 🧪
• Internationalize copy for multi-language support 🌐

License 📜

• MIT

Thanks — this README is a starter for v.1.0. Add screenshots, demo links and contribution guidelines as you iterate. 🙌✨