ClubSphere is a full-stack MERN (MongoDB, Express, React, Node.js) web application designed to be the central hub for discovering, joining, and managing local clubs and their events.
It simplifies the organizational burden for club managers by providing tools for club/event creation, membership fee collection, and registration tracking. For members, it offers a seamless way to find clubs, manage their memberships, and register for events securely.
| Type | Link |
|---|---|
| Live Application | https://clubsphere-a11b12.netlify.app/ |
| Client (Frontend) Repo | https://github.com/AyanSujon/ClubSphere-Client.git |
| Server (Backend) Repo | https://github.com/AyanSujon/ClubSphere-Server.git |
| API Endpoint | https://club-sphere-api.vercel.app/ |
ClubSphere is built around a robust three-role system (Admin, Club Manager, and Club Member) and offers the following core functionalities:
- Authentication & Authorization: Secure user login and registration with distinct roles.
- Dedicated Dashboards: Separate, role-specific dashboards for Admin, Manager, and Member, providing tailored functionalities and data.
- Secure Payments: Integration with Stripe for handling secure, free or paid club memberships and event registration fees.
- Transaction Tracking: Members can view their payment history, and the Admin can monitor all platform transactions.
- Club Manager Tools: Managers can create, edit, update, and delete clubs and associated events.
- Member Registration: Members can join clubs and register for specific events.
- Oversight: Managers can view their club members and track event registrations.
- System Monitoring: Comprehensive overview of all users, clubs, and financial transactions across the platform.
- User Management: Ability to manage user roles and overall system integrity.
Use the following credentials to explore the different role-based dashboards:
| Role | Password | |
|---|---|---|
| Admin | @Admin1 |
admin1@gmail.com |
| Club Manager | @Manager1 |
manager1@gmail.com |
| Club Member | @clubMember1 |
clubmember1@gmail.com |
The application leverages a modern MERN stack with a focus on efficiency, secure authentication, and developer experience.
| Package | Purpose |
|---|---|
express |
Minimalist web framework for Node.js (Routing and middleware). |
mongodb |
Official MongoDB driver for Node.js (Database interaction). |
stripe |
Official Stripe SDK for processing payments securely on the server. |
firebase-admin |
Enables secure authentication and authorization using Firebase Admin SDK. |
cors |
Provides middleware to enable Cross-Origin Resource Sharing. |
dotenv |
Loads environment variables from a .env file. |
| Package | Purpose |
|---|---|
react / react-dom |
Core libraries for building the user interface. |
@tanstack/react-query |
Powerful library for data fetching, caching, and state management. |
axios |
Promise-based HTTP client for making API requests. |
react-router |
Declarative routing for React. |
react-hook-form |
High-performance, flexible form validation and management. |
firebase |
Client-side SDK for user authentication (e.g., Google Sign-In, Email/Password). |
tailwindcss / @tailwindcss/vite |
Utility-first CSS framework for rapid styling. |
framer-motion |
Library for production-ready animations and gestures. |
recharts |
Composable charting library built with React and D3. |
sweetalert2 / react-hot-toast |
Libraries for beautiful, responsive alerts and notifications. |
| Page Name | URL |
|---|---|
| Home | Home |
| Clubs | Clubs |
| Events | Events |
| Pricing | Pricing |
| Dashboard (Redirects based on role) | Dashboard |
| Profile | Profile |
| Club Details (Example) | Club Details |
| Event Details (Example) | Event Details |
| Page Name | URL | Features |
|---|---|---|
| Overview | Overview | System-wide statistics |
| Manage Users | Manage Users | Member role assignment, user control |
| Manage Clubs | Manage Clubs | Club oversight and management |
| Transactions | Transactions | Payment management and history |
| Page Name | URL | Features |
|---|---|---|
| Overview | Overview | Manager's clubs and events summary |
| Create Club | Create Club | Create new clubs |
| Create Event | Create Event | Create new events |
| My Clubs | My Clubs | View, update, and delete owned clubs |
| Club Members | Club Members | View members of owned clubs |
| Events Management | Events Management | View, update, and delete events |
| Event Registrations | Event Registrations | Track event registrations |
| View/Edit Club (Example) | View/Edit Club | Detail view and editing of a club |
| Page Name | URL | Features |
|---|---|---|
| Overview | Overview | Member's activity summary |
| My Clubs | My Clubs | Browse joined clubs |
| My Events | My Events | View events they are registered for |
| Payment History | Payment History | View transaction history |
@Admin1 admin1@gmail.com
admin2@gmail.com @Admin2
admin3@gmail.com @Admin3
manager1@gmail.com @Manager1
manager2@gmail.com @Manager2
manager3@gmail.com @Manager3
clubMember1@gmail.com @clubMember1
clubMember2@gmail.com @clubMember2
clubMember3@gmail.com @clubMember3
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.