Clubbr is a dynamic web application that serves as a one-stop solution for managing and viewing college club events. It provides an intuitive interface for organizers to add, manage, and display events, enhancing the overall experience for both organizers and participants.
-
Event Management: Organizers can easily add new events through a user-friendly form. These events are then dynamically displayed on the events page, providing a centralized location for all club activities.
-
Detailed Event View: Each event is represented as a card on the events page. Clicking on an event card opens up a detailed view, providing more information about the event such as date, time, location, and description.
-
Interactive College Map: This is the highlight of clubbr.The application features an interactive map of the college, powered by Google Maps. This map displays the locations of all events happening on a given day, providing a visual overview of event locations. (WIP)
-
Organizers can add an event by filling out a form with the event’s details. Once submitted, the event is added to the database and displayed on the events page. Each event is represented as a card, which can be clicked to view more details.
Please ensure npm is installed on your PC.
- Vue JS: Vue 3.4.21
- vue-router: 4.0.13
- FormKit: 1.6.2
- axios: 1.6.8
Step 1: Clone the repository to a folder of your choice.
Step 2: Navigate to the root and run npm i to install the required dependencies.
Now, it's time to run them!
The project isn't hosted anywhere yet. So, please follow the steps to run the development server.
-
We host the JSON server first (the db.json file).
Step 1: Navigate to
/src/data.Step 2: Run
npx json-server --watch db.json. -
Now, check the hosted link and paste the base url at
/src/config.js. -
Lastly, we host the frontend.
- Open a new terminal and navigate to the root.
- Run
npm run devYay! The server is now running!