GrooveLocator enhances your music discovery using the Google Maps API. Explore events visually with genre symbols, making it easy to find what you love. Customize searches by date, city, and genre. Save events with notes, hotel, and transport details for seamless planning. GrooveLocator simplifies your journey through the live music scene, offering a practical map of musical adventures.
I employed the Agile methodology and utilized a GitHub project board to organize and develop my user stories. To enhance clarity and structure, I designed a template that precisely outlines each user story. Additionally, I complemented these user stories with associated tasks to provide a comprehensive framework for project execution, as demonstrated below.
Issues Template
Issues List
Project Board
I used MoSCow priotitization to organise each iteration of my project
- Must Have: guaranteed to be delivered (max 60% of stories)
- Should Have: adds significant value, but not vital (the rest ~20% of stories)
- Could Have: has small impact if left out (20% of stories)
- Won't Have: not a priority for this iteration
-
As a developer, I can plan my database interactions using draw sql so that I can plan and organize my project.
-
As a developer, I can create a wireframe for my project so that I can visualize the project's layout and design and have a clear reference for implementation.. (Iteration 1)(MUST HAVE)
- Acceptance Criteria
- Develop a wireframe that represents the primary user interface of the project, including essential elements and layout.
- Ensure the wireframe provides a clear and intuitive user flow, allowing for a visual representation of how users will interact with the project.
- Acceptance Criteria
-
As a developer, I can create well-defined user stories for project planning using agile methodology so that I can efficiently plan and organize project requirements.. (Iteration 1)(MUST HAVE)
- Acceptance Criteria
- Create a product backlog with at least 10 user stories that outlines the project features and requirements.
- Ensure that each user story in the backlog is written from an end user's perspective, highlighting what the user needs or expects.
- Acceptance Criteria
-
As a developer, I can link to the google maps api so that I can display event data visually.(ITERATION 1)(SHOULD HAVE)
- Acceptance Criteria
- Google maps shows events in the local area that can be clicked on
- Acceptance Criteria
-
As a developer, I can deploy my project to Heroku so that I can it is accessible to users on the internet.(ITERATION 1)(SHOULD HAVE)
- Acceptance Criteria
- Initialize a Django project and create necessary project files and directories.
- Deploy the Django application to Heroku, ensuring it runs successfully on a live server.
- Verify that the deployed application works as expected on the Heroku domain.
- Acceptance Criteria
- As a site admin, I can create events so that I can efficiently manage and coordinate events.(ITERATION 1)(MUST HAVE)
- Acceptance Criteria
- The system allows the event organizer to input essential details such as event name, date, time, and location.
- Events can be categorized or tagged for better organization.
- Upon creation, the system should generate a unique identifier for each event.
- Acceptance Criteria
-
As a user, I can view event details so that I can learn more about the event.(ITERATION 1)(SHOULD HAVE)
- Acceptance Criteria
- Users can click on an event in the list to view its details.
- Event details are displayed in a modal or dedicated page.
- Details include event name, date, venue, genre, and ticket price.
- Acceptance Criteria
-
As a new user, I can create an account so that I can access and save events.(ITERATION 2)(COULD HAVE)
- Acceptance Criteria
- Users can access a registration form.
- The form collects email and password inputs.
- After successful registration, users can log in with their credentials.
- Acceptance Criteria
-
As a user, I can add details of my hotels/ travel to my saved events so that I can be organised and choose which events I would like to attend.(ITERATION 3)(MUST HAVE)
- Acceptance Criteria
- User is able to add and edit
- User is able to save events when logged in and they are added to their saved events page
- Acceptance Criteria
-
As a registered user, I can save events so that I can keep track of which events I want to attend.(ITERATION 2)(MUST HAVE)
- Acceptance Criteria
- Registered users can click a "Save Event" button on event details. and saved events appear in the user's dashboard.
- User can edit and add details to the event, such as adding transport and hotel information
- Users can remove events from their dashboard.
- Acceptance Criteria
-
As a user, I can see events on a map, with different symbols for genre so that I can quickly identify events I would like to attend(ITERATION 4)(SHOULD HAVE)
- Acceptance Criteria
- The map displays music events using markers.
- Markers are color-coded based on the event's date (e.g., upcoming events in one color, past events in another).
- Users can click on map markers to view event details.
- Acceptance Criteria
-
As a user, I can see a legend for the map so that I can know what each symbol means in relation to genre.(ITERATION 4)(SHOULD HAVE)
- Acceptance Criteria
- Each genre symbol in the legend is accompanied by a clear and concise description, providing users with a comprehensive understanding of what each symbol represents.
- The legend is strategically placed on the map interface, ensuring it is easily visible and does not obstruct the primary view of the map. Users should be able to toggle the legend on or off for convenience.
- Legend is responsive across screen sizes.
- Acceptance Criteria
-
As a user, I can browse events across multiple pages so that I can manage and navigate through a reasonable quantity of events at a time.(ITERATION 4)(MUST HAVE)
- Acceptance Criteria
- The pagination feature is implemented, allowing users to navigate through different pages of events.
- Each page displays a defined and manageable number of events, promoting a user-friendly browsing experience.
- The navigation controls (e.g., page numbers, next/previous buttons) are intuitive and clearly indicate the user's current position within the event list.
- Acceptance Criteria
-
As a user, I can filter events by date, city and genre so that I can view events relevant to my location and preferences.(ITERATION 4)(COULD HAVE)
- Acceptance Criteria
- The filtering feature is implemented, allowing users to refine events based on date, city, and genre criteria.
- Filter options are prominently displayed and easily accessible within the user interface.
- The map dynamically updates to display only events that meet the selected date, city, and genre filters.
- Acceptance Criteria
-
As a user, I can see alert boxes after certain actions so that I can clearly understand and confirm the consequences of my actions..(ITERATION 4)(SHOULD HAVE)
- Acceptance Criteria
- Alert boxes are triggered after significant actions, such as submitting a form, deleting content, or completing a transaction.
- The alert messages are concise, informative, and clearly convey the outcome or confirmation of the action taken.
- Users have the option to dismiss or confirm the alert, providing them with control and preventing accidental actions.
- Acceptance Criteria
I used a simple color scheme, so the user is not distracted and can clearly see the content.
The rich black background evokes a nightlife ambiance, aligning with the electronic music scene associated with club environments and nocturnal experiences. Purple shades complement this vibe, adding depth and visual interest reminiscent of neon lights in electronic music venues. This association of colour also creates a brand identity for my site.
The pairing of white text with the rich black background allows a high level of contrast, improving accesibility for the visually impaired.
#000000used as the text color for white backgrounds.#0F2027used for the site background.#343A40used for the footer background.#521093used as the hover effect colour for buttons.#6600CCused as the main theme colour.#FFFFFFused as the font colour.
I used Google Fonts to browse fonts that fit my theme.
-
Roboto was used for all of the sites text as it is clear and simple and creates a consistent theme throughout the site.
-
Font Awesome icons were used for saving events
-
Flaticon icons were used for the legend and markers for the google map
I used Figma to create the wireframes for this project.
-
The desktop wireframes are tailored to the widely adopted screen resolution of 1920 x 1080, constituting 22.18% of screens.
-
The tablet wireframes are designed to fit the dimensions of the iPad Pro (1024 x 1366).
-
For mobile devices, the wireframes are crafted to the specifications of the iPhone SE, with dimensions set at 375 x 667.
- This is the page the user lands on when visiting the website. As a new user you can see events nearby on the map and can learn what GrooveLocator is all about with reviews from users and a call to action button to sign up.
- After a user has signed up and logged in, the appearance of the home page changes, and the map height increases. The user is greeted by the user name and they are now free to explore the site and save events.
- The user can open up the legend to understand the meaning of the symbols which they can see displayed for events on the map.
- This shows the map filtered for just Techno events, as you can see only the relevant symbol is displayed on the map.
- An open infowindow which displays event information and a button which links to the event details page.
- This is where the user can create an account, optionally inputting their email address. If a user is already signed up and visits this page they can navigate to the login page via a link.
- This is where users who have already created an account can login. They can toggle to have their details remembered to avoid having to login again.
- This is how the user navigated to different pages of the site. The logo always appears but the menu is responsive and displays as a hamburger icon at smaller screen sizes.
- The footer appears on all pages and includes a contact email, icon links to social media websites and a small about section.
- The events page displays cards for each event in date descending order and provides the option to filter events based on genre, city and date.
- This screenshot shows the functionality of filtering events and only displaying relevant ones.
- A new user can see event details but cannot save or add information to their events
- A returning user is able to save events and add details about their hotel and transport.
- Events saved by the user are displayed here.
- If the user is yet to save any events, a notification is displayed.
- These are the error pages displayed
I wanted to include more features in my project which some of which I had planned to implement but I have logged as Wont't have on my GitHub project board aligned with MoSCow prioritization.
-
Social Login
- Streamline the user sign-up process by incorporating social login options, such as Google and Facebook. This not only saves users time but also increases the likelihood of them completing the registration.
-
Additional Map Filtering
- Enhance user experience on the Google Map by implementing advanced filtering options. Users should be able to selectively view events within a specific time frame, preventing map clutter and ensuring a more focused display.
-
Calendar View
- Integrate a calendar view feature to provide users with a visually intuitive way of tracking and managing their saved events. This allows for easy identification of upcoming events.
-
Email Reminders
- Implement a proactive email reminder system to keep users informed about their saved events. Regular reminders contribute to increased user engagement and participation.
-
Infowindows
- Optimize the user interface by restricting the opening of only one infowindow at a time. Achieve this by securely passing the Google Map API through the view, enhancing API key security. Additionally, enable users to save events directly from the Infowindow, streamlining their interaction.
-
Dynamic Prices
- Introduce dynamic pricing functionality based on the availability of tickets. This feature adapts prices according to ticket availability, enhancing user experience and potentially increasing event participation.
-
Ticketmaster API
- While initially considered for its ability to display numerous events on the map, the Ticketmaster API proved challenging to integrate with CRUD functionality. Evaluate alternative solutions or enhancements for a more seamless user experience.
-
Auto Complete
- Improve user search experience by incorporating Google autocomplete functionality when filtering events by city. This enhancement adds convenience and efficiency to the search process.
-
Ticketing
- Explore options to provide users with direct links to purchase tickets or consider integrating ecommerce functionality. Establish partnerships for selling tickets directly on the platform, offering a more comprehensive event experience.
-
Styling
- Refine the platform's visual appeal and responsiveness. Prioritize improvements to styling, ensuring a polished and user-friendly interface. Additionally, organize saved events to display in chronological order, enhancing user navigation and experience.
- HTML: Used for structuring the website's content.
- CSS: Employed for designing and organizing the site's layout.
- Bootstrap: Utilized as a CSS framework to establish an adaptive grid layout for responsiveness and to integrate preset styles and components.
- Python + Django: Served as the backend development stack, providing a robust server-side foundation.
- Javascript:
- Managed the display and interaction of the Google Maps API.
- Automated the closure of alert messages.
- Selectize Framework: Implemented to create an intelligent text input field with suggestions.
- PostgreSQL: Chosen as the relational database management system.
- ElephantSQL: Used to host the PostgreSQL database online.
- Cloudinary: Employed for online storage of static files, contributing to the site's efficiency.
- Figma: Played a key role in the project by facilitating the creation of wireframes.
- GitHub + Git: Used for version control and code management.
- WebAIM Contrast Checker: Ensured sufficient color contrast for accessibility.
- Heroku: Chosen as the hosting platform for the site.
- WAVE: To evaluate the accessibility of the site.
I created an entity relationship diagram using DrawSQL. This allowed me to plan out my database interactions more easily.
| Field Name | Field Type | Relationship |
|---|---|---|
| id (PK) | AutoField | |
| title | CharField | |
| slug | SlugField | |
| event_genre | CharField | |
| event_price | DecimalField | |
| event_location | CharField | |
| event_venue | CharField (nullable) | |
| event_date | DateField | |
| event_time | TimeField (nullable) | |
| event_details | TextField | |
| saved | ManyToManyField(User) | Many-to-Many with User |
| image | CloudinaryField | |
| latitude | FloatField (nullable) | |
| longitude | FloatField (nullable) |
| Field Name | Field Type | Relationship |
|---|---|---|
| id (PK) | AutoField | |
| user | ForeignKey(User) | Many-to-One with User |
| event | ForeignKey(Event, related_name='saved_events') | Many-to-One with Event |
| Field Name | Field Type | Relationship |
|---|---|---|
| id (PK) | AutoField | |
| user | ForeignKey(User) | Many-to-One with User |
| saved_event | ForeignKey(SavedEvent) | Many-to-One with SavedEvent |
| comment_text | TextField | |
| hotel_details | TextField (nullable) | |
| transport_details | TextField (nullable) | |
| timestamp | DateTimeField (auto_now_add=True) |
- Allauth User Model
- The User model was built using Django's Allauth library
| Field Name | Field Type | Relationship |
|---|---|---|
| id (PK) | AutoField | |
| username | CharField (from AbstractUser) | |
| EmailField (from AbstractUser) | ||
| password | CharField (from AbstractUser) | |
| ... | ... | |
| saved_events | ManyToManyField(Event) | Many-to-Many with Event |
| comments | ManyToManyField(EventComment) | Many-to-Many with EventComment |
For all testing, please refer to the TESTING.md file.
This project uses ElephantSQL for its PostgreSQL Database.
- Register using your GitHub account.
- Generate a new database instance by selecting Create New Instance.
- Provide a name (typically the project name: groovelocator).
- Choose the Tiny Turtle (Free) plan.
- Keep the Tags field empty.
- Pick the nearest Region and Data Center.
To store media assets online, this project takes advantage of the Cloudinary API. This is especially advantageous since Heroku does not retain this category of data.
- Register and log in to Cloudinary.
- Indicate Programmable Media for image and video API as your Primary interest.
- Optionally, customize your assigned cloud name.
- Copy your API Environment Variable from the Cloudinary Dashboard.
- Remove
CLOUDINARY_URL=from the API value; this acts as the key.
This project employs Heroku, a platform-as-a-service (PaaS) that empowers developers to construct, execute, and manage applications exclusively in the cloud.
-
After setting up your account, select New in the top-right corner of your Heroku Dashboard and choose Create new app from the dropdown menu.
-
Ensure your app name is unique, choose a region (EU or USA), and select Create App.
-
In the new app Settings, click Reveal Config Vars and set your environment variables:
Key Value CLOUDINARY_URLInsert your Cloudinary API key here DATABASE_URLInsert your ElephantSQL database URL here DISABLE_COLLECTSTATIC1 (temporary; can be removed for final deployment) SECRET_KEYAny random secret key -
Heroku requires two additional files for deployment: requirements.txt and Procfile.
Install project requirements using:
pip3 install -r requirements.txt
Update the requirements file if needed:
pip3 freeze --local > requirements.txt
Create the Procfile:
echo web: gunicorn app_name.wsgi > Procfile- Replace app_name with your primary Django app name.
-
For Heroku deployment, connect your GitHub repository:
- Either choose Automatic Deployment from the Heroku app.
- Or in the Terminal/CLI, connect to Heroku using:
heroku login -i - Set the remote for Heroku:
heroku git:remote -a app_name(replace app_name with your app name) - After Git
add,commit, andpushto GitHub, type:git push heroku main
-
The project should now be connected and deployed to Heroku!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt.
You will need to create a new file called env.py at the root-level,
and include the same environment variables listed above from the Heroku deployment steps.
Sample env.py file:
import os
os.environ["DATABASE_URL"]='ElephantSQL database URL'
os.environ["SECRET_KEY"]=" Your secret key"
os.environ['CLOUDINARY_URL']='clouinary API key'
os.environ['GOOGLE_API_KEY']='google maps API key'Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:
- Start the Django app:
python3 manage.py runserver - Stop the app once it's loaded:
CTRL+Cor⌘+C - Make any necessary migrations:
python3 manage.py makemigrations - Migrate the data to the database:
python3 manage.py migrate - Create a superuser:
python3 manage.py createsuperuser - run the Django app:
python3 manage.py runserver
Follow these steps to clone the repository:
- Visit the GitHub repository.
- Click on the "Code" button above the list of files.
- Choose your preferred cloning method (HTTPS, SSH, or GitHub CLI) and copy the URL.
- Open Git Bash or Terminal.
- Navigate to the directory where you want to clone the repository.
- In your IDE Terminal, enter the following command to clone the repository:
git clone https://github.com/KTC96/GrooveLocator.git
- Press Enter to create your local clone.
Forking the GitHub Repository allows you to create a copy on your GitHub account, enabling you to view and make changes without affecting the original owner's repository.
Follow these steps to fork the repository:
- Log in to GitHub and locate the GitHub Repository.
- Above the "Settings" Button on the menu, find the "Fork" Button.
- Click the "Fork" button, and you will now have a copy of the original repository in your own GitHub account!
| Source | Location | Notes |
|---|---|---|
| ticketmaster Discovery API | Home page map | Used this tutorial to set up my google maps API |
| Google Maps custom markers | Home page map | I used this tutorial to set up custom markers for my map for each genre |
| Code Institute | Events and saved events | Used pagination to display events across multiple pages |
| Code Institute | Saved Events, Home | Auto dismiss bootstrap alerts |
| Stack Overflow | Event details/ forms.py | Increase the size of text input fields (Third approach detailed by zuber) |
| Bootstrap | Navigation | I used bootstrap as a starting block for my responsive navigation bar |
| Django Docs | Events and saved events | Fix bug whereby if events not divisible by 3 they would not always fill up a row |
| Code Institute | Event Details | Used similar code for saving a blog post for the user to save an event |
| Code Institute | Event Details, Saved Events, Events | Code for displaying a placeholder image if no image available |
| Selectize | Events | Followed documentation to set up selectize search box |
| Google Maps custom infowindows | Home | Create custom infowindows and close when another is clicked on |
| YouTube | Home | I followed this tutorial to help me pass backend data to JavaScript |
| YouTube | All | I followed this tutorial to help get my footer to stay at the bottom of my page when there was not enough content |
| Source | Location | Notes |
|---|---|---|
| Canva | All pages | I used canva for the logo design |
| RedKetchup Favicon Generator | All pages | Used to create a range of favicon sizes |
| Unsplash | Home, Events, Login, Signup, Logout | I used unsplash for event images, user profiles and the background for authentication pages |
| Fontawesome | All pages | I used font awesome icons in the footer for links to social media and for the heart icon to save events |
I would like to thank my mentor Jack for his help during this project, and also my parents for supporting me on this career changing journey.
The events listed on the screenshots are not the same that are currently on the site due to a database issue near the end of my project.