campusconnect-club

bySunny Kadbhane

I am an MCA final-semester student working in a team of 3. We want to build a small, simple, student-level full-stack web application: # CampusConnect ## College Club & Event Management System IMPORTANT: Keep this project EASY, SMALL, CLEAN, QUICK, and understandable for MCA students. DO NOT over-engineer it. Prioritize: SIMPLE > COMPLEX WORKING > FANCY UNDERSTANDABLE > ADVANCED COMPLETE > HUGE Do not add features that are not requested. # 1. TECHNOLOGY STACK Frontend: - React.js - Vite - JavaScript - JSX/HTML - CSS - Axios - React Router Backend: - Node.js - Express.js Database: - MySQL Other: - JWT authentication - bcryptjs for password hashing - Git/GitHub DO NOT use: - TypeScript - Next.js - Redux - MongoDB - Firebase - Docker/Kubernetes - Microservices - GraphQL - Tailwind unless absolutely necessary - AI/ML - Payment systems - Email OTP - Google OAuth - Chat - Notifications - WebSockets - Complicated architecture/design patterns - Unnecessary libraries # 2. PROJECT PURPOSE CampusConnect is a college platform where students can: 1. Register and login 2. View college clubs 3. View club details 4. Join a club 5. View upcoming events 6. Register for events 7. View joined clubs 8. View registered events Admin can: 1. Login 2. Add/edit/delete clubs 3. Add/edit/delete events 4. View users 5. View event registrations These are the COMPLETE core features. # 3. USER ROLES Only two roles: STUDENT ADMIN Student: - Register/login/logout - View dashboard - View clubs and club details - Join clubs - View my clubs - View events and event details - Register for events - View my events Admin: - Login - View admin dashboard - Add/edit/delete clubs - Add/edit/delete events - View users - View event registrations Normal users MUST NOT be able to register as ADMIN. # 4. DATABASE Use MySQL. Main tables: users: - id - name - email - password - role clubs: - id - name - description - category events: - id - club_id - name - description - date - venue registrations: - id - user_id - event_id club_members: - id - user_id - club_id Use only these tables. Do not create unnecessary tables. Create: database/schema.sql database/sample.sql schema.sql must contain CREATE TABLE statements. sample.sql must contain sample users, one admin account, clubs, events, and registrations. # 5. PROJECT STRUCTURE Use this simple structure: CampusConnect/ frontend/ public/ src/ components/ Navbar.jsx ClubCard.jsx EventCard.jsx pages/ Home.jsx Login.jsx Register.jsx Dashboard.jsx Clubs.jsx ClubDetails.jsx MyClubs.jsx Events.jsx EventDetails.jsx MyEvents.jsx Admin.jsx services/ api.js App.jsx main.jsx index.css package.json vite.config.js backend/ routes/ auth.js clubs.js events.js controllers/ auth.js clubs.js events.js middleware/ auth.js config/ db.js server.js package.json .env.example database/ schema.sql sample.sql README.md .gitignore Keep filenames short and student-friendly. # 6. FRONTEND Home: - CampusConnect name/logo - Short introduction - Explore Clubs - View Events - Login/Register - Simple college-themed design Login: - Email - Password - Login button Register: - Name - Email - Password - Register button - Role automatically STUDENT Dashboard: - Welcome message - Joined clubs count - Registered events count - Upcoming events - Quick links Clubs: - Club name - Category - Short description - View Details Club Details: - Name - Category - Description - Join Club My Clubs: - Joined clubs Events: - Event name - Club - Date - Venue - Register Event Details: - Name - Description - Date - Venue - Register My Events: - Registered events Admin: - Total users - Total clubs - Total events - Add/edit/delete clubs - Add/edit/delete events - View registrations Do not create complicated admin pages unless necessary. # 7. API Authentication: POST /api/auth/register POST /api/auth/login Clubs: GET /api/clubs GET /api/clubs/:id POST /api/clubs PUT /api/clubs/:id DELETE /api/clubs/:id Membership: POST /api/clubs/:id/join GET /api/my-clubs Events: GET /api/events GET /api/events/:id POST /api/events PUT /api/events/:id DELETE /api/events/:id Registration: POST /api/events/:id/register GET /api/my-events Users: GET /api/users Use simple, understandable API names. # 8. AUTHENTICATION Use JWT. After login: - Store token appropriately - Identify logged-in user - Protect student-specific APIs - Protect admin APIs Only ADMIN can: - Add/edit/delete clubs - Add/edit/delete events - View users - View registrations Students cannot access admin operations. Use bcryptjs for password hashing. # 9. ERROR HANDLING Only basic error handling is needed: - Invalid login - Duplicate email - Missing fields - Club not found - Event not found - Already joined club - Already registered for event - Unauthorized admin operation Return simple, user-friendly messages. # 10. UI Modern but simple student-level UI. Theme: - Blue - White - Light gray - Small amount of purple if useful Use: - Cards - Buttons - Navbar - Dashboard cards - Clean forms - Basic responsive CSS Must work reasonably on desktop, laptop, tablet, and mobile. Do NOT make it look like a huge enterprise application. # 11. CODE STYLE Code must be beginner/student friendly. Use: - Simple functions - Simple React components - Straightforward Express routes - Simple SQL queries - Clear variable names - Comments where useful Avoid: - Advanced abstractions - Custom hooks unless genuinely needed - Complicated state management - Complex architecture - Unnecessary error-handling frameworks Every file/function/API/component must have a clear purpose. # 12. GITHUB TEAM DIVISION 3 members: Member 1 / Leader: - Authentication - Dashboard - Admin - Database - Integration - GitHub management Member 2: - Clubs - Club details - Join club - My clubs Member 3: - Events - Event details - Event registration - My events Suggested branches: main leader-auth member2-clubs member3-events Use meaningful commits such as: "Added login page" "Added club API" "Added event registration" "Fixed dashboard" # 13. DEVELOPMENT ORDER Build in this order: 1. Create React/Vite frontend 2. Create Node/Express backend 3. Connect backend to MySQL 4. Create database tables 5. Register/login 6. Student dashboard 7. Clubs 8. Club joining 9. Events 10. Event registration 11. Admin operations 12. Connect everything 13. Test everything 14. Deployment Do not jump into advanced features. # 14. DEPLOYMENT Keep deployment beginner-friendly. Frontend: Vercel or Netlify Backend: Render or another simple equivalent Database: Hosted MySQL-compatible database Do NOT require Docker, AWS infrastructure, Kubernetes, CI/CD, or complex cloud architecture. # 15. ENVIRONMENT VARIABLES backend/.env.example: PORT= DB_HOST= DB_USER= DB_PASSWORD= DB_NAME= JWT_SECRET= Never put real secrets in GitHub. # 16. README README.md should contain: - Project description - Features - Technologies - Folder structure - Database setup - Installation - Frontend commands - Backend commands - Environment variables - API endpoints - Team members - Screenshots - Deployment instructions - Demo credentials - Future scope # 17. DOCUMENTATION Prepare simple MCA-level content for: 1. Abstract 2. Introduction 3. Problem Statement 4. Objectives 5. Scope 6. Functional Requirements 7. Non-Functional Requirements 8. Technology Requirements 9. System Architecture 10. ER Diagram 11. Use Case Diagram 12. Data Flow Diagram 13. Database Design 14. Module Description 15. Testing 16. Screenshots 17. Advantages 18. Limitations 19. Future Scope 20. Conclusion # 18. TESTING Create simple test cases for: - Registration - Login - Invalid login - View clubs - Join club - View my clubs - View events - Register for event - Duplicate registration - Admin add/edit/delete club - Admin add/edit/delete event - Unauthorized admin access Use: Test Case | Input | Expected Result | Actual Result | Status # 19. FUTURE SCOPE Mention only as future improvements: - Email notifications - Club chat - Event reminders - QR attendance - Mobile application - Online certificates - Advanced analytics Do NOT implement them. # 20. IMPORTANT OUTPUT INSTRUCTIONS Build the project STEP-BY-STEP. DO NOT dump thousands of lines of code at once. For the FIRST response, provide ONLY: 1. Final project folder structure 2. Database schema 3. API list 4. 3-member task division 5. Development plan Do NOT write the complete application yet. For every file you create later, use this format: FILE: frontend/src/pages/Login.jsx PURPOSE: Handles student/admin login UI. Then provide the COMPLETE code for that file. When modifying an existing file, always provide the COMPLETE updated file, not fragments. Keep all imports, filenames, routes, API endpoints, database fields, and component names consistent. The final project must run without missing files or mismatched imports. Again: KEEP IT SMALL, SIMPLE, STUDENT-FRIENDLY, AND EASY TO EXPLAIN IN AN MCA VIVA.