Welcome CGCrossFit is your go to website for all things CrossFit. Our platform allows users to easily register for an account, book appointments, and stay informed about upcoming events. We are dedicated to helping individuals achieve their health and fitness goals by providing a seamless experience for managing workouts and connecting with the CrossFit community!
Whether you're looking to schedule your next training session, learn about upcoming CrossFit events, or simply explore information to enhance your fitness journey, CGCrossFit is here to support you every step of the way. Join us today and take the first step towards a healthier, fitter you!
Link to live website here: Click Me
This site was developed using:
-
Create a website using Django.
-
Using Bootstrap, HTML, CSS, python and javascript.
-
Create a website with CRUD functionality.
This project was developed using the Agile methodology. The implementation progress of all epics and user stories was tracked through a GitHub Project can be found. here
The goal of this website is to make CrossFit booking easy. Users just need to log in, which will take them to a page where they can book CrossFit sessions.
Users also have the ability to edit and delete their reservations while logged in. The website is designed to be easy to navigate, and it clearly shows available booking slots.
| EPIC | User Story | |
|---|---|---|
| ADMINISTRATION | ||
| As a logged-in admin, I want to access the admin page. | ||
| As a logged-in admin, I want to authenticate and manage comments. | ||
| As a logged-in admin, I want to create new users and authors. | ||
| As a logged-in admin, I want to delete users, booking authors, and comments. | ||
| CONTENT | ||
| As a user, I want to see a menu so I can easily navigate through website content | ||
| As a user, I want to understand what the website is about without having to read too much. | ||
| USER REGISTRATION | ||
| As a user, I want to register on the website. | ||
| As a user, I want to authenticate using only my email and password. | ||
| As a user, I want to know that I've logged out successfully. | ||
| BLOGS EVENT | ||
| As a logged-in user, I want to select a blog and comment on or like the selected blog. | ||
| As a logged-in user, I want to delete and edit my own previous comments. | ||
| BOOKING | ||
| As a user, I want to book an appointment. | ||
| As a logged-in user, I want to cancel a booking. | ||
| CONTACT | ||
| As a user, I want to contact the admin. | ||
| As a user, I want to receive confirmation that my message has been received. | ||
| As a user, I want to see contact information on the website. |
- As a site staff member, I can manage CrossFit classes (create, read, update, and delete) so that users can view and participate in upcoming CrossFit session
- Given I am a site staff member,
- When I navigate to the 'Add Class' form on the admin panel,
- Then I should be able to fill out the form with the following details: Class Name Date and Time Duration Instructor Name Maximum Participants Description
- I can submit the form,
- Then the new CrossFit class should be created and saved in the system,
- I should see a confirmation message (e.g., "CrossFit class successfully created").
- Given a CrossFit class has been created,
- When I visit the homepage or classes section, *Then I should see a list of upcoming CrossFit classes with details such as: Class Name Date and Time Instructor Name Available Slots Users should be able to view these classes in a calendar view or list format.
- Given I am a site staff member,
- I have created a CrossFit class,
- When I navigate to the admin panel and select the class I want to edit,
- I should be able to update any of the class details (e.g., time, instructor, maximum participants),
- Save the changes,
- the updated details should be reflected in the system,
- I should see a confirmation message (e.g., "CrossFit class successfully updated").
- Given I am a site staff member,
- I have created a CrossFit class,
- I navigate to the admin panel and select the class I want to delete,
- I should be able to delete the class,
- I should see a confirmation message (e.g., "CrossFit class successfully deleted"),
- The class should no longer appear on the homepage or in the classes list.
- As a site user, I can log in with my created username and password to access the site and view my previous actions, including registered CrossFit classes.
- Given I am a registered site user,
- When I navigate to the login page,
- Then I should see a form that requires my username and password,
- I can enter my credentials and submit the form,
- I should be logged in,
- I should see a welcome message (e.g., "Welcome, [Username]!").
- If the credentials are incorrect: I should see an error message (e.g., "Invalid username or password. Please try again."),
- Given I am a logged-in user,
- I have registered for CrossFit classes in previous sessions,
- When I navigate to my dashboard or profile page,
- I should see a list of all the CrossFit classes I have registered for,
- Including details such as Class Name, Date and Time, Instructor, and Status (e.g., "Registered").
- If I have not registered for any classes: I should see a message indicating that (e.g., "You have not registered for any CrossFit classes yet."), I should be provided with a link or option to browse upcoming classes.
- Given I am a logged-in user,
- When I click on the "Logout" button or link,
- I should be prompted with a confirmation message (e.g., "Are you sure you want to log out?"),
- If I confirm the logout: I should be logged out of the system, I should be redirected to the homepage or a logged-out landing page, I should see a message confirming the logout (e.g., "You have successfully logged out.").
- If I cancel the logout action: I should remain logged in and stay on the current page.
- I used Balsamiq to design the wireframes for my website.
This project the Django User Model. The data schema was created using Lucid.
I chose green as the primary color to evoke the energy and vitality associated with a CrossFit gym, while also reinforcing its dynamic environment. Paired with a white background, this green creates a striking contrast that results in a clean and polished look. The use of green as the primary color effectively ties all design elements together, ensuring a cohesive and energizing brand identity.
- I selected these colors to use on the website. (created with coolers.io)
I chose this font for its tall height and wide proportions, which enhances readability and mirrors the dynamic and vertical nature of CrossFit exercises. Its friendly appearance is balanced with boldness and strength, making it not only visually appealing but also effective in maintaining a smooth flow throughout the site.
The navigation elements include Home, About, Classes, Contact, and Booking. If the user is signed in, there will also be a link to My Bookings and comment.
add_class navigation should only be visible to users with staff status. Staff members should see the add_class option in the navigation, while regular users should not.
Welcome to join if you are interested in joining CrossFit. CGCrossfit is a CrossFit gym located in Dublin. Our website is designed to showcase the wide range of services we offer to help you achieve your fitness goals.
At the bottom of this page, users can read comments from other users. If a user is logged in or, they have access to buttons for deleting or updating comments. And Users can also click the heart icon to like event.
If a user is not signed in, they will be redirected to the registration form. A signed-in user can book a session by selecting a date and time.
404 Not Found” is displayed when a user tries to access a page that doesn’t exist. This message suggests that the user may have mistyped the URL or clicked on a broken link. The page includes a button to redirect users back to the homepage.
-
On the admin panel, as an admin or superuser, I have full access to CRUD functionality. This allows me to view, create, edit, and delete the following items.:
-
Blog
-
About
-
Booking
-
Comments
-
Author
-
Categories
-
Profiles
- CrossFit focuses on high-intensity functional movements performed at a high intensity. The workouts are designed to improve overall fitness and can be modified for various fitness levels.
- Exercises are based on functional movements that mimic everyday activities, such as lifting, squatting, running, and jumping. These movements are designed to improve overall strength, endurance, and mobility.
- CrossFit emphasizes community and camaraderie. Classes often involve group workouts where participants encourage each other and work together, fostering a strong sense of community.
- CrossFit incorporates a wide range of exercises, including weightlifting, gymnastics, and cardiovascular conditioning. This helps participants develop strength, endurance, agility, and flexibility.
- User Flow: Allow users to register an email address when they book a session or through their profile settings. Notification System: Integrate an email service provider (like SendGrid or Mailgun) to handle email notifications. Ensure that users receive updates for changes or cancellations of their sessions. Backend Logic: Implement logic to check for changes or cancellations and trigger email notifications accordingly.
- Cancellation Policy: Define a specific time frame (e.g., 24 hours before the session) during which users cannot cancel their bookings. User Interface: Display this cancellation policy clearly during the booking process and in user account settings. Enforcement: Implement backend validation to prevent cancellations within the specified window. Consider offering a grace period or exception handling for special cases.
- Activity and Session Management: Develop an admin interface where administrators can view, edit, and manage Activity and Session models. Permissions: Ensure that only authorized users (e.g., admins) have access to this page and can make changes. User Experience: Provide a user-friendly interface with search and filter options to easily locate and modify records. Consider adding validation checks to ensure data integrity during updates.
about.html
https://validator.w3.org/nu/?doc=https%3A%2F%2Fcrossfit-pp4-85463579609b.herokuapp.com%2Fabout%2F
classes.html
contact.html
booking.html
https://validator.w3.org/nu/?doc=https%3A%2F%2Fcrossfit-pp4-85463579609b.herokuapp.com%2Fbooking%2F
error404.html
https://validator.w3.org/nu/?doc=https%3A%2F%2Fcrossfit-pp4-85463579609b.herokuapp.com%2F404%2F
Style.css
Lighthouse was used to test Performance, Best Practices, Accessibility and SEO on Desktop and Mobile.
Home-page
About-page
Classes-page
Contact-page
Booking-page
add_class-page
Home-page
About-page
Classes-page
Contact-page
Booking-page
add_class-page
map.js
confirmation_script.js
Python testing was done using the PEP8.
All python files were entered into the online checker and no errors were found in any of the custom code.
- About
admin.py
models.py
views.py
- Blog
admin.py
forms.py
models.py
views.py
- Booking
admin.py
forms.py
models.py
views.py
- Contact
admin.py
forms.py
models.py
views.py
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Nav Links | Opened site url | Only "Register" is visible | Worked as expected |
| Event Cards | Opened site url | Event cards are visible | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Submit | Clicked submit | New edits show on edit page | Worked as expected |
| New comment added to event page | Clicked save | New comment show on Event page | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Delete Comment | Clicked "Delete" button on event page | Message show deleted. | Worked as expected |
| Delete comment on delete page | Clicked delete | comment is removed from homepage | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Can see edit and delete buttons | As a staff user, I can see the edit and delete buttons for only the classes I created | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Add class | Clicked Add class nav link | Add class form showed | Worked as expected |
| New add class added to booking page | User can see it on the booking page | Staff can see edit and delete buttons on the booking page |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Submit | Clicked submit | New add class show on class list page | Worked as expected |
| New edit added to add class page | Clicked save | New edit show on add class page | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Delete add class list | Clicked Delete button on add class list page | Message showed deleted. | Worked as expected |
| Delete add class list on delete page | Clicked delete | comment is removed from class page | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Book | Clicked Book button on booking page | Message: Show booking successfully. | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| Book cancel | Clicked Book cancel button on booking page | Message: Show booking cancelled successfully. | Worked as expected |
| TEST | ACTION | EXPECTATION | RESULT |
|---|---|---|---|
| 404 Error | Typed /A at end of url | 404 error page to show | Worked as expected |
No known unresolved bugs
- Psycopg2:
A library for Python that facilitates interaction with PostgreSQL databases. - Gunicorn:
A server used in Heroku for running Python web applications. - Allauth:
A package for authentication and account management. - Cloudinary:
Used for hosting static files and media. - Summernote:
A rich text editor. - Crispy Forms:
A tool to style forms.
- Bootstrap:
Was used to style the website, add responsiveness and interactivity - GitHub:
GitHub is used to store the project's code after being pushed from Git - Heroku:
Heroku was used to deploy the live project. - PostgreSQL:
The database used through heroku. - Balsamiq:
To create all wireframes. - Lucidchart:
Lucidchart was used to create the database diagram - Pexels:
To search for images. - W3Schools:
To Read the documentation. - PEP8:
Was used to validate all the Python code. - Jshint:
Was used to validate all the javascript code. - W3C HTML:
Was used to validate all the HTML code - W3C CSS:
Was used to validate the CSS code - Am I responsive:
For testing wireframes. - Fontawesome:
To add icons to the website - Google Tools:
To search for information. - Google Fonts:
To search for and borrow fonts. - Coolors:
To create a colour chart. - Stack Overflow:
For Troubleshooting.
The live deployed application can be found deployed on Heroku.
This project uses a Code Institute PostgreSQL Database.
To obtain my own Postgres Database from Code Institute, I followed these steps:
- Signed-in to the CI LMS using my email address.
- An email was sent to me with my new Postgres Database.
Caution
- PostgreSQL databases by Code Institute are only available to CI Students.
- You must acquire your own PostgreSQL database through some other method if you plan to clone/fork this repository.
- Code Institute students are allowed a maximum of 8 databases.
- Databases are subject to deletion after 18 months.
This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.
To obtain your own Cloudinary API key, create an account and log in.
- For Primary interest, you can choose Programmable Media for image and video API.
- Optional: edit your assigned cloud name to something more memorable.
- On your Cloudinary Dashboard, you can copy your API Environment Variable.
- Be sure to remove the
CLOUDINARY_URL=as part of the API value; this is the key.
This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
Important
This is a sample only; you would replace the values with your own if cloning/forking my repository.
| Key | Value |
|---|---|
CLOUDINARY_URL |
user's own value |
DATABASE_URL |
user's own value |
DISABLE_COLLECTSTATIC |
1 (this is temporary, and can be removed for the final deployment) |
SECRET_KEY |
user's own value |
Heroku needs three additional files in order to deploy properly.
- requirements.txt
- Procfile
- runtime.txt
You can install this project's requirements (where applicable) using:
pip3 install -r requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze --local > requirements.txt
The Procfile can be created with the following command:
echo web: gunicorn app_name.wsgi > Procfile- replace app_name with the name of your primary Django app name; the folder where settings.py is located
The runtime.txt file needs to know which Python version you're using:
- type:
python3 --versionin the terminal. - in the runtime.txt file, add your Python version:
python-3.9.19
For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
- Select Automatic Deployment from the Heroku app.
Or:
- In the Terminal/CLI, connect to Heroku using this command:
heroku login -i - Set the remote for Heroku:
heroku git:remote -a app_name(replace app_name with your app name) - After performing the standard Git
add,commit, andpushto GitHub, you can now 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.
Important
This is a sample only; you would replace the values with your own if cloning/forking my repository.
Sample env.py file:
import os
os.environ.setdefault("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")
# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")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(Mac) - 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 - Load fixtures (if applicable):
python3 manage.py loaddata file-name.json(repeat for each file) - Everything should be ready now, so run the Django app again:
python3 manage.py runserver
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/ciarangriffin93/CGCrossFit.git
- Press Enter to create your local clone.
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
-
Youtube: This databases and understanding more about postgrsql.
-
django-cloudinary-storage: This django-cloudinary-storage package is used for this purpose. More details can be found in the Django Cloudinary Storage documentation.
-
W3schools: This site was created using information W3Schools.
-
Code Institute: This is from code institute to learn how to create "I Think Therefore I Blog".
-
Git Commit: I learn how to writing better commit messages.
-
I would like to thank to my mentor, Tim Nelson and Rory Sheridan for his help and unwavering support.
-
I would like to thank to my tutor at Code Institute for their help and unwavering support.
-
I would like to thank to my family for their patience, support, and understanding.
-
I would like to Code Institute's Slack community,and Deaf group for their support.