Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/elite1122/marathon-management-system

A full-stack Marathon Management System connecting organizers and participants. Users can create events, register, and manage their dashboard with secure login and database integration.
https://github.com/elite1122/marathon-management-system

contextapi reactjs reactrouter sweetalert2 tailwindcss

Last synced: 10 months ago
JSON representation

A full-stack Marathon Management System connecting organizers and participants. Users can create events, register, and manage their dashboard with secure login and database integration.

Awesome Lists containing this project

README 

          
# Go Marathon BD (Marathon Management System) Website Design Using Core React, Tailwind CSS, DaisyUI & MongoDB



## Project Theme: Marathon Management System 🌟

The Marathon Management System is a platform that helps organize marathon events

 by connecting event organizers with participants. Users can create marathons, sign up

 for events, and manage their registrations through a personal dashboard. This project

 offers practical experience in building full-stack applications, setting up user login,

 managing data, and connecting with a secure database.



## 🛠️ Technologies Used

### Frontend:

- **React.js** – Dynamic and efficient component-based UI framework for front-end building.

- **Tailwind CSS** – Utility-first CSS framework for a beautifully responsive and customizable interface.

- **React Toastify** – Delightful notifications and alerts for seamless user feedback.

- **React Router** - For handling navigation and routing across pages.

- **Context API** - For state management.

- **Sweet Alert** – Delightful notifications and alerts for seamless user feedback.



### Backend:

- **Node.js** - Provides the runtime environment for executing server-side JavaScript.

- **Express.js** - Simplifies building APIs and handling server-side logic.



### Database:

- **MongoDB** - A NoSQL database for storing user data, campaign details, and transaction records.



### Deployment:

- **Firebase** - Hosts the front end for a fast and scalable user experience.

- **Vercel** - Hosts the backend API for seamless server interactions.



## 📱 Key Features

### 🚀 Dynamic and Responsive Design

- **Description:** Fully responsive design ensures compatibility across all devices, including desktops, tablets, and mobile phones.



### 🔑 Secure Authentication

- **Description:** User authentication using Firebase, ensuring secure access and management of personal accounts.

- **Sign-In Options:** Includes email/password login and Google authentication.



### 🎯 **Event Management**

- **Create Marathons:** Organizers can set up marathons by providing event details, registration dates, and more.

- **Browse Events:** Participants can explore upcoming marathons and view detailed event information.

- **Manage Registrations:** Users can register for events and view their registrations in a personal dashboard.



### 💻 **Dashboard for Easy Management**

- **For Organizers:** Manage all created events, update event details, and track participant registrations.

- **For Participants:** View registered marathons, update details, or cancel participation.



### 📅 **Dynamic Date Handling**

- Intuitive date pickers for setting registration and event start dates.



### 🔔 **Real-Time Notifications**

- Get instant feedback with toast notifications for actions like successful event creation, updates, or cancellations.



### 🛡️ **Secure API Integration**

- Robust backend APIs handle CRUD operations for events, user profiles, and registrations, ensuring data integrity and smooth communication.



---



## ⚛️ React Fundamentals Used



### 🧩 **Component-Based Architecture**

- Functional components are used throughout the project to build modular and reusable UI elements.



### 🪝 **Hooks for State Management**

- `useState`, `useEffect`, and `useContext` are used extensively for managing state and side effects.

- Routing and navigation are streamlined using `useNavigate` and `useLocation`.



### 🌐 **Context API**

- Global state management ensures seamless communication between components for user authentication and event data.



### 🎨 **Tailwind CSS**

- Stylish and responsive designs for mobile and desktop users.



---



## 📝 Usage



### 🔍 **Navigate the Platform**

- Use the **Navbar** to explore:

  - **Home**: Overview of the platform.

  - **All Marathons**: Browse a list of all upcoming events.

  - **Dashboard**: Manage to add marathon, my marathon list, and my apply list.

      - **Add Marathon**: Create a new marathon event.

      - **My Marathon List**: Manage your created events as an organizer.

      - **My Apply List**: View and manage your registered events as a participant.



### 🚀 **Key Actions**

1. **Explore Events**: Browse upcoming marathons and view details.

2. **Register**: Sign up for events directly from the details page.

3. **Create Event**: Organizers can log in to create and manage marathon events.

4. **Manage Events**: Update or delete events from the dashboard.



---



## 🔗 Dependencies

- @fortawesome/fontawesome-svg-core: ^6.7.2

- fortawesome/free-brands-svg-icons: ^6.7.2

- @fortawesome/free-solid-svg-icons: ^6.7.2

- @fortawesome/react-fontawesome: ^0.2.2

- axios: ^1.7.9

- firebase: ^11.1.0

- localforage: ^1.10.0

- match-sorter: ^8.0.0

- react": ^18.3.1"

- react-countdown-circle-timer: ^3.2.1

- react-datepicker: ^7.5.0

- react-dom: ^18.3.1

- react-icons: ^5.4.0

- react-router-dom: ^7.1.0

- react-toastify: ^11.0.2

- react-tooltip: ^5.28.0

- sort-by: ^1.2.0

- sweetalert2: ^11.15.3



## Installation

- Run `npm install` to install project dependencies.



## 📣 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check out the issues page if you want to contribute.



## 🎉 Show Your Support

If you like this project, consider giving it a ⭐ on GitHub!



## 🌐 Live Demo

✨ **[Experience the Live Version Here!](https://gomarathonbd.web.app)** ✨



## 📂 GitHub Repository

✨ **[Visit Repository!](https://github.com/elite1122/Marathon-Management-System)** ✨