SportsSync Application

Purpose of SportsSync

We were tired of the constant back and forth trying to find a substitute to fill in for our social sports team at UWA and having to fork out hefty forfeit fees. To eliminate this hassle, we created SportsSync, making it easier for teams to find substitutes and manage their events seamlessly.

SportsSync is a web-based platform, created using Flask, designed to connect sports enthusiasts by allowing them to browse, join, and create sports events in their community. It enables users to tailor their experience through customisable profiles and facilitates easy communication and management of events. This solution addresses the need for a centralised location where athletes of all levels can find and organise sports activities according to their preferences and skill levels.

Group Members

Student Name	Student Number	Github Username
Lauren Hart	23164229	lauhart
Declan Barrett	23074941	DeclanB1
Edward Le	23020568	edwardisintou
Matthew Chew	22974046	mattcw9090

SportsSync Architecture

Register New Account

Note: not all fields are necessary some are optional for the user, and can be editted later on

Login

User is directed to Login Page

User is logged in (Introductory View is displayed)

Browse Events (Find Requests View)

Click "Browse Events" from the navigation bar

User can browse all existing event request posts

Note: User does not need to be logged in to view this page

By clicking on details, user can view specific event request details

Post New Event (Create Requests View)

Click "Post New Event" from the navigation bar

Update User Profile (eg. add Profile Picture)

Click "My Profile" from the Navigation Bar

Click on Profile Picture to edit

Select "Choose File", followed by Uploaded Picture

Note: User can also update their profile information

Update/Delete Existing Event

User can view, update or delete their existing events

Quick Start Guide

Follow these steps to get the Flask application running locally on your machine:

1. Create and Activate a Virtual Environment Open your terminal and run the following commands:

python3 -m venv venv
source venv/bin/activate

2. Install Required Dependencies

pip3 install -r requirements.txt

3. Create Secret Key

   a) Create new file called ".env"

   b) Generate unique secret key in the terminal

import os
os.urandom(24)
quit()

c) Save generated secret key to variable SECRET_KEY in .env

Sample SECRET_KEY saved to .env file

4. Navigate the Source Directory

cd src

5. Launch Application

python3 app.py #run with debug mode on

or

flask run #run with debug mode off

How to run Tests

cd src
python -m unittest test_app.py                                                     

HTML and CSS Validation

The application automatically generates HTML files for validation purposes. Follow these steps to validate the HTML and CSS files:

1. Run the Application

   Follow the steps in the "Quick Start Guide" to launch the application.

2. Generate HTML Files for Validation

   The app.py code is set up to generate HTML files in the html_generated_files_for_validation directory each time a page is rendered. These files can be used for validation.

3. Validate HTML and CSS

   • Navigate to the html_generated_files_for_validation directory.
   • Use the following online tools to validate the generated HTML and CSS files:
     • HTML: W3C Markup Validation Service
     • CSS: W3C CSS Validation Service

   Upload the generated HTML files to these websites and review the validation results.