fiery-portal
Mini RjBuild a full-stack College Event Registration Portal. Stack: * React (Vite) * Node.js + Express * MongoDB * JWT Authentication * Custom CSS only (no Bootstrap, Tailwind, Material UI) Roles: Admin: * Login (admin / inspirante2026) * Create events * View all events * View registration count * View registrations for an event Student: * Login using hardcoded users * View upcoming events * Register for events * View own registrations Features: * Event fields: name, date, venue, capacity * Prevent duplicate registration * Disable registration when capacity is full * Show "Full" badge * Student event list sorted by date ascending * Admin cannot register for events * Display capacity fill percentage: * <50% Green * 50–79% Amber * 80%+ Red API Requirements: * All routes start with /api * Proper REST API * JWT protected routes * Proper error handling * Try/catch in all API calls Database Collections: * users * events * registrations Seed Data: * 11 student accounts * 5 sample events Generate: * Complete folder structure * Frontend and backend code * MongoDB models * Seed script * README.md * DECISIONS.md * .env.example * Setup instructions Create a clean, modular, internship-quality project.
Comments (0)
Sign in to leave a comment
Project Tasks29
Implement Navbar for Landing
As a frontend developer, implement the Navbar section for the Landing page. Build the Navbar component using React with useState (menuOpen, scrolled), useRef (logoRef, navLinksRef, magneticBarRef, drawerRef, hamburgerTimelineRef), and useCallback hooks. Implement: (1) scroll-shadow detection via window scroll listener setting `scrolled` state; (2) GSAP logo SVG path draw animation on mount using strokeDasharray/strokeDashoffset on all path/circle elements with stagger 0.5 and power3.inOut ease; (3) GSAP mobile drawer slide-in/out animation toggled by `menuOpen` state (x: 0 / x: '100%'); (4) magnetic underline bar effect on desktop nav links using mousemove to find closest link and GSAP-animating magneticBarRef x/width; (5) NAV_LINKS array with Home/Events/Dashboard hrefs. Import Navbar.css. Note: this component likely already exists from other pages — reuse if available.
Build Auth API Endpoints
As a Backend Developer, implement the authentication API endpoints under /api/auth. Include POST /api/auth/login supporting both admin (admin/inspirante2026) and hardcoded student accounts. Return JWT tokens with role claims (admin/student). Implement JWT middleware (verifyToken, requireAdmin, requireStudent) for protecting routes. Handle errors with try/catch and proper HTTP status codes. Store hardcoded student accounts in seed script. Collections: users.
Define MongoDB Models and Seed
As a Backend Developer, define Mongoose models for all three collections: (1) User model with fields username, password (hashed), role (admin/student); (2) Event model with fields name, date, venue, capacity, createdAt; (3) Registration model with fields userId, eventId, registeredAt, with unique compound index on (userId, eventId) to prevent duplicates. Create a seed script that inserts 1 admin account (admin/inspirante2026), 11 hardcoded student accounts, and 5 sample events. Include .env.example with MONGODB_URI, JWT_SECRET, PORT.
Implement Login Page UI
As a Frontend Developer, implement the Login page (v1). Build a single login form supporting both admin and student roles with role-based redirect after successful JWT authentication. Include username/password fields, form validation, error display, and loading state. On success, store JWT in localStorage/context and redirect admin to /dashboard and students to /home. Use custom CSS only matching the design system colors (#1A73E8 primary, #FF6F61 secondary). Note: depends on temp_backend_auth being available for integration.
Implement Dashboard Page UI
As a Frontend Developer, implement the Dashboard page (v1) for admin users. Display all created events in a list/table with name, date, venue, capacity, and registration count. Include a Create Event form/modal with fields: name, date, venue, capacity. Show capacity fill percentage with color coding: Green <50%, Amber 50-79%, Red 80%+. Show 'Full' badge when capacity is reached. Protect route for admin role only. Use custom CSS matching design system. Note: depends on temp_backend_events and temp_backend_registrations for API integration.
Implement Home Page UI
As a Frontend Developer, implement the Home page (v1) for student users. Display upcoming events sorted by date ascending with name, date, venue, capacity, and fill percentage color coding (Green/Amber/Red). Include Register button per event — disable and show 'Full' badge when at capacity. Prevent duplicate registration UI feedback. Show event details on click. Protect route for student role. Use custom CSS matching design system. Note: depends on temp_backend_events and temp_backend_registrations for API integration.
Implement Events Page UI
As a Frontend Developer, implement the Events page (v1) for admin users. Display full event list with registration counts and capacity monitoring. Show capacity fill percentage with color coding. Include ability to click into an event to view its registrations. Protect route for admin role. Use custom CSS matching design system. Note: depends on temp_backend_events and temp_backend_registrations for API integration.
Implement Registrations Page UI
As a Frontend Developer, implement the Registrations page (v1) supporting both roles: Admin view shows all registrations for a specific event; Student view shows the authenticated student's own registrations with event details and status tracking. Protect routes based on role. Use custom CSS matching design system. Note: depends on temp_backend_registrations for API integration.
Implement Profile Page UI
As a Frontend Developer, implement the Profile page (v1) for student users. Display account information for the authenticated student (username, role). Use custom CSS matching the design system. Protect route for authenticated users. Note: depends on temp_backend_auth for user context.
Implement Settings Page UI
As a Frontend Developer, implement the Settings page (v1) for admin users. Provide portal management settings UI. Protect route for admin role. Use custom CSS matching the design system.
Setup Auth Context and Routing
As a Frontend Developer, set up global authentication context and client-side routing for the portal. Implement React Context (AuthContext) providing user state, JWT token, login/logout functions, and role-based helpers. Configure React Router with protected route wrappers that redirect unauthenticated users to /login and enforce role-based access (admin routes vs student routes). Setup Vite project structure with src/pages, src/components, src/context, src/api directories. Create an axios/fetch API client configured with base URL and Authorization header injection from context.
Setup CSS Design System
As a Frontend Developer, set up the global CSS design system for the portal. Create a root CSS variables file with all design tokens: --primary: #1A73E8, --primary-light: #E8F0FE, --secondary: #FF6F61, --accent: #FFD700, --highlight: #FFA500, --bg: #FFFFFF, --surface: rgba(240,240,240,0.8), --text: #333333, --text-muted: #777777, --border: rgba(200,200,200,0.5). Define base reset styles, typography scale, and shared utility classes. Ensure all page and section CSS files import or extend this foundation. No Bootstrap, Tailwind, or Material UI.
Implement LandingHero for Landing
As a frontend developer, implement the LandingHero section for the Landing page. Build a 3D interactive event galaxy using @react-three/fiber Canvas, useFrame, useThree, OrbitControls from @react-three/drei, and THREE.js. Key elements: (1) EVENTS_DATA array of 16 campus events (id, name, date, venue, capacity); (2) generateStarPositions() using golden-angle spiral distribution to position stars in 3D space with radius 2.2–5.0; (3) EventStar component with meshRef/glowRef, useMemo for baseEmissive/hoverEmissive colors from STAR_COLORS array, useFrame animation loop, isHovered/isSelected state props, onHover/onClick handlers; (4) Framer Motion AnimatePresence for event detail overlay card; (5) useState for hoveredEvent and selectedEvent; (6) useCallback for interaction handlers. Import LandingHero.css. This is the most complex section involving 3D canvas rendering.
Implement LandingGalaxyFeature for Landing
As a frontend developer, implement the LandingGalaxyFeature section for the Landing page. Build a feature explanation section using React with useRef and framer-motion useInView. Render a `features` array of 3 items (Click to Explore #1A73E8, Drag to Rotate #FF6F61, Hover to Connect #FFD700) each with: headline with goldWord highlight, description text, number badge, iconColor, bgTint, inline SVG icon, and decorative bgIcon SVG. Apply useInView-triggered entrance animations per card with staggered reveal. Each card has bgTint background and colored icon container. Import LandingGalaxyFeature.css.
Implement LandingCapacityShowcase for Landing
As a frontend developer, implement the LandingCapacityShowcase section for the Landing page. Build an animated event capacity display using React with useState, useEffect, useRef, and framer-motion useInView/AnimatePresence. Key components: (1) AnimatedCounter component with requestAnimationFrame loop, cubic-ease easing (1 - Math.pow(1-progress, 3)), and isActive/target/duration props; (2) EventCard component with hovered useState, getBarColor() returning 'red'/'amber'/'green' based on fill percentage thresholds (80%/50%), Framer Motion whileHover y:-6 lift with boxShadow, staggered entrance via index*0.15 delay; (3) EVENTS array with 3 events (Startup Pitch Night 42/120, AI Workshop 56/80, Cultural Fest 200/200); (4) cs-card--{colorKey} CSS modifier classes; (5) isFull/spotsLeft calculations. Import LandingCapacityShowcase.css.
Implement LandingEventBrowse for Landing
As a frontend developer, implement the LandingEventBrowse section for the Landing page. Build an event browse list using React with useRef, useCallback, framer-motion (useScroll, useTransform) and GSAP. Key elements: (1) EVENTS array of 6 events with name/date/venue/capacity/registered fields; (2) getCapacityInfo() function returning percent, colorClass (eb-fill-green/amber/red), badgeClass (eb-badge-open/filling/full), badgeText; (3) cardVariants with alternating left/right entrance (i%2===0 ? x:-60 : x:60) and i*0.12 delay stagger; (4) MagneticButton component with useRef btnRef, mousemove handler computing centerX/centerY offset * 0.4 and GSAP animating x/y, mouseleave resetting to 0 — disabled when isFull; (5) useScroll/useTransform for parallax scroll effects on section. Import LandingEventBrowse.css.
Implement LandingAdminHighlight for Landing
As a frontend developer, implement the LandingAdminHighlight section for the Landing page. Build a two-column admin feature highlight using React with useRef and framer-motion useInView. Key elements: (1) FEATURES array of 3 items (Create & Manage Events, Track Real-Time Registrations, Monitor Capacity Limits) each with title, desc, and inline SVG icon with className 'ah-bullet-icon'; (2) DASHBOARD_EVENTS array of 4 mock events with name/date/registered/capacity/pct/color fields for a simulated dashboard preview; (3) bulletContainerVariants with staggerChildren 0.12 and delayChildren 0.1; (4) bulletItemVariants with x:-40 entrance and power2.out ease; (5) iconBounceVariants with scale [0.6, 1.15, 1] keyframe sequence; (6) dashboardVariants with x:50 entrance delayed 0.25s; (7) stripeVariants with scaleY:0→1 over 0.8s. Import LandingAdminHighlight.css.
Implement LandingStudentHighlight for Landing
As a frontend developer, implement the LandingStudentHighlight section for the Landing page. Build a student-facing feature highlight using React with useRef and framer-motion useInView. Key elements: (1) features array of 3 items using lucide-react icons (Calendar, MousePointerClick, ClipboardList) for Browse Campus Events, One-Click Registration, Manage Your Registrations; (2) mockEvents array of 4 events with dotClass variants (sh-mock-event-dot--blue/coral/gold/orange) and action ('register'/'full') for a simulated student events UI panel; (3) bulletVariants with x:40, rotateY:90 entrance and per-item i*0.12 delay; (4) stripeVariants animating height 0%→100% over 0.8s for right-side accent stripe; (5) two decorative parallax layers (sh-decor-bg, sh-decor-mid) with CSS variable --scroll transforms at -0.2px and -0.4px multipliers; (6) Framer Motion whileInView on accent stripe. Import LandingStudentHighlight.css.
Implement LandingSecurityTrust for Landing
As a frontend developer, implement the LandingSecurityTrust section for the Landing page. Build a trust/security cards section using React and framer-motion. Key elements: (1) trustCards array of 3 items (auth: Secure Authentication/Active badge, privacy: Data Protection/Verified badge, performance: Reliable Performance/Stable badge) each with id, title, description, badge text, and inline SVG icon with className 'st-icon-svg'; (2) cardVariants with scale:0.95/y:30 entrance, i*0.15 delay stagger, and power2-equivalent ease; (3) badgePulse animation looping opacity [0.5, 1, 0.5] over 1.5s infinite for status badges; (4) decorative parallax layer (st-decor-layer) with 3 orb divs and CSS --scroll transform at -0.2px; (5) whileInView-triggered card entrances with viewport margin '-60px'. Import LandingSecurityTrust.css.
Implement LandingCTA for Landing
As a frontend developer, implement the LandingCTA section for the Landing page. Build a call-to-action section using React with useState (particles, barVisible), useRef (primaryBtnRef, accentBarRef, sectionRef), useEffect, useCallback, framer-motion AnimatePresence, and GSAP. Key elements: (1) IntersectionObserver on sectionRef at threshold 0.2 triggering setBarVisible(true) for scroll-revealed lc-accent-bar; (2) handlePrimaryEnter spawning 6–9 randomized particles with angle/dist/xEnd/yEnd/variant/size using particleIdRef counter, plus GSAP scale:1.08 on primaryBtnRef; (3) handlePrimaryLeave GSAP scale:1 reset; (4) particles state auto-cleared after 700ms via setTimeout cleanup; (5) Framer Motion animated accent bar (y:-4→0, opacity:0→1 on barVisible); (6) parallax lc-decor-bg layer with lc-gradient-wash and lc-orbit-ring elements using CSS --scroll variable. Import LandingCTA.css.
Implement Footer for Landing
As a frontend developer, implement the Footer section for the Landing page. Build the Footer component using React with useRef (footerRef, columnsRef array, socialsRef array, copyrightRef) and GSAP with ScrollTrigger plugin (gsap.registerPlugin(ScrollTrigger)). Key elements: (1) linkColumns array of 4 columns (Product, Company, Resources, Legal) each with title and 4 link objects (label + href); (2) socialIcons array of 4 SVG icons (Twitter, GitHub, LinkedIn, Instagram) with path data for SVG stroke rendering; (3) GSAP fromTo stagger animation on each column in columnsRef (y:40→0, opacity:0→1, delay i*0.1, ScrollTrigger start 'top 92%'); (4) GSAP SVG stroke-draw animation on socialsRef icons via ScrollTrigger; (5) columnsRef populated via ref callback array pattern. Import Footer.css. Note: this component may already exist from other pages — reuse if available.
Build Events API Endpoints
As a Backend Developer, implement the events API endpoints under /api/events. Include: POST /api/events (admin only) to create events with fields name, date, venue, capacity; GET /api/events to list all events sorted by date ascending; GET /api/events/:id for a single event. Apply JWT middleware for protected routes. Add capacity fill percentage computation and 'Full' status logic. Handle try/catch and proper error responses. Collection: events. Seed 5 sample events.
Setup Express App and Middleware
As a Backend Developer, set up the Node.js + Express application structure. Configure: Express app with CORS, JSON body parsing, and error-handling middleware; dotenv for environment variables; MongoDB connection via Mongoose with retry logic; route registration for /api/auth, /api/events, /api/registrations; global error handler returning structured JSON error responses; helmet for basic security headers. Create folder structure: src/routes, src/controllers, src/models, src/middleware, src/config. Note: docker-compose and k8s are already done — focus on app-level setup.
Integrate Login Auth Flow
As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation and the Auth API backend. Ensure the login form submits credentials to POST /api/auth/login, JWT is received and stored in AuthContext, role-based redirect works correctly (admin → /dashboard, student → /home), and error messages display properly for invalid credentials. Confirm protected routes reject unauthenticated requests.
Build Registrations API Endpoints
As a Backend Developer, implement the registrations API endpoints under /api/registrations. Include: POST /api/registrations to register a student for an event (prevent duplicates, check capacity before registering, disable if full); GET /api/registrations/my to return the authenticated student's registrations; GET /api/registrations/event/:eventId (admin only) to list all registrations for a specific event including registration count. Add 'Full' badge logic when capacity is reached. Handle all errors with try/catch. Collection: registrations.
Integrate Dashboard Events Flow
As a Tech Lead, verify the end-to-end integration between the Dashboard page frontend implementation and the Events/Registrations backend APIs. Ensure event creation form submits to POST /api/events, the event list is fetched from GET /api/events with registration counts, capacity color coding renders correctly, and admin-only route protection is enforced.
Integrate Home Student Events
As a Tech Lead, verify the end-to-end integration between the Home page frontend and the Events/Registrations backend APIs. Ensure events are fetched sorted by date ascending, registration button calls POST /api/registrations, duplicate registration is blocked with proper UI feedback, 'Full' badge appears when capacity is reached, and capacity color coding (Green/Amber/Red) renders correctly.
Integrate Events Admin Page
As a Tech Lead, verify the end-to-end integration between the Events page frontend implementation and the Events/Registrations backend APIs. Ensure the event list renders with correct registration counts from GET /api/events, capacity monitoring displays correct color coding, and clicking into an event loads registrations from GET /api/registrations/event/:eventId correctly.
Integrate Registrations Page Flow
As a Tech Lead, verify the end-to-end integration between the Registrations page frontend and the Registrations backend API. Ensure admin view correctly fetches and displays all registrations for a specific event via GET /api/registrations/event/:eventId, and student view correctly fetches and displays the authenticated student's own registrations via GET /api/registrations/my with proper event details.
No comments yet. Be the first!