link to site: Link to live site.
Important notice: If you are NOT logged into this site: please look at this from the perspective of a customer If you are loggged in as a SUPERUSER please look at this from the perspective of an admin / business owner If you are logged in (and NOT as a SUPERUSER ) please look at this from the perspective of a staff memeber
also to note the "Beekeeper" (Login / Sign-up) menu ONLY exists for the purposes of testing. In a real-life scenario this would be "hidden" and up to the business owner to circulate!
Also please note company approval for use of assets was granted
This site is a ticket management system for a company called Swarms.ie
Swarms is a honeybee removal charity business, that connects people with beekeepers to remove colonies and swarms from their property.
The purpose of this site is to make the process of connecting people to beekeepers more efficient for the Swarms.ie owner as currently this is a manual effort task through spreadsheets and phone calls / text messages.
This site allows visitors to log a Service Request (SR) with Swarms for the removal of the swarm 365 days and without the need for phone calls / emails
The website was created to be eye-catching and user-friendly. The emphasis is on the user experience; the user can navigate the website easily to log their Service Request.
The website is designed to be accessible by all, with features like:
-
Skip to Content link
-When tabbing through the site the user will be preseneted with a skip to content link which bypasses the header section and is linked to
-
Colours chosen
- #ea9d34 (yellow) colour chosen had contrast issues on a white background, this was updated to #8b4313 (brown) to provide a higher contrast for users.
-
Form
- the form uses the "hidden" attribute to show and hide content for users while not impacting the accessibility tree or making the form confusing
- ARIA labelled by: this is also heavily featured in the form to provide context of the questions for those who may need this.
-Role = "Presentation" in the report-a-swarm page for the progress bar. this is to inform the users that the context of this is purely decoration purposes and is not required for them to complete the form
- Prefers reduced motion: on the report-a-swarm page, there is an animated fieldset border (Black and yellow) and loading divs prefers reduced motion is present for those with motion sickness that it does not cause disorientation side effects this has been tested by me (as I suffer with this, and does not have any unwanted side effects) .
If the user has a preference set for reduced motion, the animations are slowed down, and overall animation is reduced. This is to reduce animations that can make users nauseous (vestibular dysfunction) to test this in Chrome
- If the user has a preference set for reduced motion, the animations are slowed down, and overall animation is reduced. This is to reduce animations that can make users nauseous (vestibular dysfunction) to test this in Chrome
- Go to Inspect
- Select the 3 dots beside the X for close
- Select “Run command”
- Search for “Reduced”
- Click the “Do not emulate CSS prefers-reduced-motion”
- Refresh the page, and you will notice that the animation does not run.
- To undo this open the site in a new tab.
-
- Python 3.11: the primary language used to develop the server-side of the website.
- JS: the primary language used to develop interactive components of the website.
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website.
-
- Django: python framework used to create all the logic.
-
- SQLite: was used as a development database.
- PostgreSQL: the database used to store all the data.
-
- Git: the version control system used to manage the code.
- Pip3: the package manager used to install the dependencies.
- Gunicorn: the webserver used to run the website.
- Spycopg2: the database driver used to connect to the database.
- Django-allauth: the authentication library used to create the user accounts.
- ElephantSQL: the cloud database used to store all the data.
- GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Chrome DevTools: was used to debug the website.
- Font Awesome: was used to create the icons used in the website.
- W3C Validator: was used to validate HTML5 code for the website.
- W3C CSS validator: was used to validate CSS code for the website.
- JShint: was used to validate JS code for the website.
- PEP8: was used to validate Python code for the website.
- Cloudinary: used to store images uploaded to site.
- django-filter: used to filter querysets.
- django-tables2: used to provide responsive tables.
- django-widget-tweaks: used to modify the HTML of the rendered forms.
- whitenoise: used to serve the static files
- miro: used to draw diagrams
- bootstrap css: used for table responsiveness
Link to testing documentation.
Link to features documentation.
| Page | Language | Description | Resolution | Cause |
|---|---|---|---|---|
| Report-Swarm | JavaScript | Using regex on phone to confirm if number is correct, if at any point an error appeared I would set the custom error to be more descriptive than pattern does not match, once I corrected the error on change and next would still set the error and could not move onto the next section of the form event.target.setCustomValidity("Please enter phone number in 353121234567 format"); | event.target.setCustomValidity(""); | As I'm setting the error to true by using a non-empty string I need to set this back to false using an empty string after the error appears |
Tables - especially with tables the design of this site was desktop orientated. While the site is fully responsive and tables are responsive using bootstrap CSS the best experience for tables is via a desktop / tablet
Active link not on pages : I am aware that for active pages there is not identified, this is due to reusing templates
Louis Hoebregts link to blog article
Kevin Powell link to codepen
Red Eyed Coder Club link to youtube video
swarms business!
Andy Bell (CSS Reset File)
