SCVAC League Western Division

Milestone Project 3 - Data Centric Development

A web application for a local athletics league giving information about match venues and timetables.

External user's goal

For managers and athletes, to obtain up to date information about matches.

Site owner's goal

For organisers and officials, to share information with all participants rather than just the members of a mailing list.

Features

The initial focus of this project is general data about the league and matches:

The participating clubs, with links to their own websites.
Match dates and venues with Google Maps.
Match timetables with events and age categories.

All users can view the information presented on the site. Administrators and officials have a higher access level to enable new material to be added and existing material to be edited or deleted.

On opening the app, the SCVAC (Southern Counties Veterans Athletic Club) logo is drawn and a welcome message appears on a grass bakground. Then the participating club names (with links to their websites) translate from the left in individual lanes of an athletics track. The numbers worn by athletes for competition then appear.

Underneath the track, a navigation menu offers 'Matches', 'Declarations', 'Results', 'Log In' and 'Register'. 'Declarations' is not currently available but will be a feature of the app in future development. The same applies for 'Results', so a link is provided to relevant meetings on the Power of 10 athletics database.

'Log In' and 'Register' display a form styled as a long jump pit. Successful login or registration displays the user's profile page in a similar format. The menu changes to show 'Profile' and Log Out', and the club names each show an editing button.

'Matches' takes the user to a differently styled page. This has a brick wall background, brass plaque logo, title and navigation menu, and wood bars for each match. When clicked the bar expands into a noticeboard with two sheets of paper, the first for general match details and a Google map, and the second for the timetable.

Users logged in with higher access see additional links to add, edit and delete:

'Add match' bar above the existing match bars
'Edit match' Post-it note on the first sheet for editing the general match details.
'Edit the timetable' Post-it note on the second sheet for editing the timetable, or 'Add a timetable' if none has been created.
'Delete match' at the bottom of the noticeboard frame.

The various 'add' and 'edit' pages are forms with the same styling as the 'Match' page. 'Add Match' and 'Edit Match' are single pages, while 'Add Timetable' and 'Edit Timetable' are multiple step forms covering all the events.

Features for future development

The work submitted for this project is to be expanded with additional functionality:

The 'Declarations' page will enable team managers to declare athletes for their clubs. Then the declared athletes can be entered for specific events in a match timetable.
The 'Results' page will enable officials to enter positions and performances into forms pre-loaded with athlete details.
An additional search feature will enable quick retrieval of historical results and rankings.
An upload feature will enable users to share reports and photographs of specific events.
A notification feature to email or text user-specific messages.

Technologies and tools used

HTML5
CSS3
JavaScript
Python
Flask
MongoDB
SVG
Adobe Illustrator
Adobe Photoshop
Google Fonts
Google Maps
Github
Gitpod
Heroku

Planning and development

This is a competition that I take part in myself as an athlete and team manager. The inspiration for creating a web application for it came from the following:

No mention of this division is given on the official SCVAC site.
Information is sent to the team managers of each club, who then have to pass it on to athletes.
Declarations and results are processed by means of Excel spreadsheets and emails.

These factors lead to quite a laborious and slow process of administration.

Design

Looking at related websites reveals little in the way of creative graphics or even photography in many cases. My aim was to incorporate some objects typically seen at an athletics track into the look of the site.

I like the distinctive SCVAC logo which is always a good place to start with 'branding'. Unfortunately the only available copy of it was very low quality, measuring a little over 100 pixels wide. This prompted me to draw a vector image using Adobe Illustrator, taking care to put strokes onto separate layers, adjust their directions appropriately and create distinct fill layers. I then exported to SVG format and included it inline within the HTML file to enable straightforward CSS styling and animation.

The welcome, registration, login and profile pages should make it obvious that this is an athletics website, with the track and long jump pit being prominent. On the matches pages a more flexible format was required, for which paper documents on a noticeboard was chosen. This will also be the format for future developments on the site.

A disadvantage with creative styling is that certain useful form inputs such as a datepicker cannot be styled appropriately. For this reason the 'Add Match' form uses dropdowns for weekday, date, month and year which is obviously not as user-friendly.

Fonts

The slab serif font used throughout the site is Roboto Slab, for it's readability at all sizes. Other fonts are used to suit their positions or context:

Allerta Stencil for the track.
Oswald for the numbers.
Rock Salt for the long jump pit
Special Elite for paper documentation.
Just Another Hand for paper form entries.
Permanent Marker for post-it notes.

Testing

The unforgiving nature of Python+Flask meant that pages would not display unless coding was correct!

Testing of newly created features were carried out at as they were written and at each commit to Github. The following browsers were used on a Windows PC:

Google Chrome
Mozilla Firefox
Microsoft Edge
Opera
Internet Explorer

Less frequent tests were also performed on an Android phone using Chrome and an iPhone and iMac using Safari.

To test the functionality of the site, various scenarios were played out for users with differing access rights and objectives.

User without account or not logged in

Step 1: Open Welcome page
Expected outcome: Logo, welcome message, club and number animation sequence perform - successful

Step 2: Test external links
Expected outcome: External sites open in a new tab - successful

Step 3: Open Matches page
Expected outcome: Matches page displays correctly - successful

Step 4: Open a match board
Expected outcome: Match board opens and displays Google Map and timetable pages, aligned at random angles - successful

User without account

Step 1: Open Register page
Expected outcome: Register page displays correctly - successful

Step 2: Attempt to register without required field
Expected outcome: Alert to fill in appropriate field given and form not posted - successful

Step 3: Attempt to register with all required fields entered
Expected outcome: New user appears in database. Profile page displayed with welcome message - successful

User with account

Step 1: Open Log In page
Expected outcome: Log In page displays correctly - successful

Step 2: Attempt to log in with incorrect details or without required field
Expected outcome: Flash message and blank form displayed. User not logged in - successful

Step 3: Attempt to log in with both fields entered correctly
Expected outcome: Profile page displayed with welcome message - successful

User with higher access

Step 1: Open Matches page
Expected outcome: Matches page displays correctly with 'Add Match' bar displayed - successful

Step 2: Open a match board
Expected outcome: Match board opens and displays 'Edit match', 'Add a timetable' or 'Edit the timetable', and 'Delete match' links - successful

Step 3: Attempt to add a match without all required fields
Expected outcome: Form not sent - successful

Step 4: Attempt to add a match with all fields entered correctly
Expected outcome: New match appears in database. Matches page displayed with flash message - successful

Step 5: Attempt to edit a match
Expected outcome: Form loaded with existing values. Changes made in database. Matches page displayed with flash message - successful

Step 6: Attempt to add a timetable
Expected outcome: Changes made in database. Matches page displayed with flash message - successful

Step 7: Attempt to edit a timetable
Expected outcome: Changes made in database. Matches page displayed with flash message - successful
Desirable outcomes not achieved: Form loaded with existing values.

Step 8: Attempt to delete a match
Expected outcome: Changes made in database. Matches page displayed with flash message - successful

Code Validation

The following online tools were used to check code:

HTML - W3C Markup Validation Service
CSS - W3C CSS Validation Service
JavaScript - BeautifyTools JavaScript Validator
Python - ExtendsClass Python syntax checker

Deployment

Gitpod was used for writing the code for this application, with regular commits and then pushes to a GitHub repository. Heroku was chosen as a suitable host because it can run Python code, unlike GitHub pages which was used for previous projects.

In order to deploy to Heroku, I had to follow these steps from my dashboard:

Click 'New' and 'Create new app'.
Fill in the 'App name' and select 'Europe' from the 'Choose a region' options.
Click 'Create app'
From the 'Deployment method' options, select GitHub.
From 'Connect to GitHub', use the search box to find the appropriate repository.
Click 'Connect'
Click 'Settings'
Click 'Reveal Config Vars'
Add the following Key-Value pairs:
Click 'Deploy'
Click 'Enable Automatic Deploys'

A requirements.txt and Procfile were created in Gitpod to enable Heroku to run the app. Once development is complete, click 'Open app' to open the app from Heroku.

It is also possible to clone the GitHub repository and run the application locally:

From the main page of the repository, click 'Code'.
Click the copy icon next to the URL.
In an IDE, change the current working directory to where you want the cloned directory to be created.
Type 'git clone' and paste the previously copied URL.
Press enter to create the clone.

code-institute-submissions / athletics-league Goto Github PK

athletics-league's Introduction