Welcome to the issue tracker for the world's leading dating app - The Unicorn Attractor!
With The Unicorn Attractor, you'll meet new people that share in your Unicorn love. Think of us as your most dependable wingman - wherever you go, we’ll be there, offering all the possibilities of riding off into the sunset!
Maintenance note: this project was originally built in 2019 for a Code Institute milestone. It has since been refreshed to run on modern Python/Django tooling, while keeping the original app structure and functionality largely intact.
The project has been upgraded from the original Django 2.x-era dependency set to a modern Django LTS stack.
Current local baseline:
- Python 3.14 in a local
.venv - Django 5.2.14
- Pillow 12.2.0
- django-storages 1.14.6
- django-cleanup 9.0.0
- psycopg 3.2.13
- stripe 15.1.0
Notable upgrade changes:
- Replaced legacy
STATICFILES_STORAGE/DEFAULT_FILE_STORAGEsettings with Django's modernSTORAGESsetting. - Replaced
{% load staticfiles %}with{% load static %}in templates. - Replaced Pillow's removed
Image.ANTIALIASconstant withImage.Resampling.LANCZOS. - Local development can use SQLite even when
.envcontains a remoteDATABASE_URLby settingUSE_SQLITE=1. - Local development uses filesystem media/static storage instead of S3.
- Ticket status updates, upvotes/downvotes, and ticket deletion now use POST requests with CSRF protection.
- Delete and status update permissions are enforced in the Django views.
Known remaining modernization work:
- The Stripe integration still uses the legacy Charges API shape. It imports under the current SDK, but should be migrated to Payment Intents or Checkout before any real payment use.
- The visual frontend dependencies are still the original CDN-era stack: Materialize 1.0.0, jQuery 3.4.1, Font Awesome 5, and Chart.js 2.8.0.
django-materializecss-formis pinned to its latest available release, but it is an old package and should eventually be replaced with local form rendering/templates.
back to top
This is actually the final project in my Full-Stack Software Development course with Code Institute, in the Full-Stack Frameworks module.
The brief provided requires the creation of, "a web application that allows users to submit tickets to an online issue tracker called the Unicorn Attractor, where bugs can be submitted for free, but feature requests require a nominal fee".
As a user, I want to be able to _____________:
- Create an account
- Log into the site
- Log out of the site
- Have a profile page
- Fully edit my profile details and upload a picture
- Change my password
- Delete my account
- See all of my submitted bug tickets and feature requests
- View all bug and feature request tickets
- Unlock achievements for my participation in the site
- View full details of any bug/feature
- Comment on a bug ticket for free
- Upvote a bug to indicate that I am also experiencing the issue
- Comment on a feature request for free
- Upvote a feature request for a fee to indicate that I wish this developed as a priority
- Create a bug ticket/feature request
- Be charged securely for feature requests
- See the current progress of bugs and features
- View charts/graphs showing how many bugs or features are tended to, as well as the highest-voted bugs and features
- View information on the App being offered
The design of the site is based on standard Materialize elements, with their colouring altered to be bright and colorful. Bug Reports and Feature Requests are displayed as cards, showing a brief summary of the ticket along with information on how many views and favourites that each has.
Frameworks used in the project are:
- Materialize 1.0.0
- Using the Materialize framework allowed for the development of a clean and modern user interface with minimal need to override or alter the default settings in most cases.
- Django 5.2
- Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
- jQuery 3.4.1
- Although mostly unbound from jQuery in version 1.0.0, Materialize still requires some jQuery in order to properly initialize its elements (such as dropdowns, carousels, etc.).
Given the mythical nature of unicorns, and their representation in popular culture, the site features a bright color scheme with heavy emphasis on pinks and purples. A balance has been struck so that the site doesn't appear garish or off-putting to users.
The primary fonts used on the site are those provided by the Materialize framework. The Google font Baloo Tamma has been used for titles and main headings.
Balsamiq Wireframes was used to create all of the wireframes during the design phase of this site.
These can be found using this link.
back to top
All required feature as detailed in the brief have been implemented, as well as several additional features that offer greater overall user experience.
Status-dependant Navbar
The options that a user will see displayed in the navbar are dependant on whether or not they are logged in.
- Users that are not logged in will see:
- The Unicorn Attractor
- Tickets
- Statistics
- Register
- Log In
- Users that are signed into the site will see:
- The Unicorn Attractor
- Tickets
- Statistics
- Profile
- Log Out
Admins will also see an additional link to the Django Admin panel.
Create Account
Users are able to create their own user account. The code checks against existing users in the database to ensure that the selected username is unique, and that both the username and password meet the minimum/maximum length requirements.
User Profile Page
Upon registering or logging into the site, users are directed to their own profile page. Here they can choose to edit their profile information, as well as upload a profile picture or leave the default image in place.
Logout
Users that have logged into the site may end their session at any time by clicking the 'Logout' button on the navbar. Django ends their session and redirects the user to the homepage.
Pagination
Only four tickets are displayed on the Tickets page so as not to overload the user with information. Pagination has been implemented to let users move through all the results that available.
Ticket Filtering
Users are able to filter the displayed tickets based on their status and/or type by using the dropdown menus at the top of the Tickets page.
Create a Bug Report
Users that have registered and logged in are able to create a Bug Report. They are only required to enter a title for the bug and a description of the issue that they are experiencing.
Create a Feature Request
Users may also create Feature Requests in a similar manner to creating a Bug Report. However, users are required to pay €100 via a credit/debit card before they may proceed to submit the ticket. The Stripe API allows this payment transaction to be processed securely.
View Detailed ticket information
When a user clicks any of the cards displaying ticket information they are directed to a page where they can view full details of the ticket. This includes:
- Who raised the ticket and their picture
- Current Status
- When the ticket was raised and last updated
- Full details of the issue
Edit a Ticket
Tickets may only be edited by either the user that created the ticket initially, or by an Admin. Editing a ticket is as simple as updating the information pre-populated into the relevant fields on the Edit Ticket page.
Delete Ticket
Tickets may only be deleted by either the user that created the ticket initially, or by an Admin. Clicking the delete button will trigger a modal asking the user to confirm the action and reminding them that this cannot be undone.
Upvote/Downvote Tickets
Any logged-in user may upvote a Bug Report for free by clicking the Upvote button on the Ticket Detail page. For Feature Requests, a modal will appear advising that there is a €5 fee for upvoting a Feature Request and allows the user to enter card details via the Stripe API to complete the process. Only once payment has been successful will the upvote be registered.
Change Ticket Status
Admins are able to change the current status of a ticket via dropdown below the other function buttons on the Ticket Detail page. This functionality is available only to Admin users.
Comment on a Ticket
All logged-in users are able to freely comment on any ticket that is not currently in 'Completed' status. At this point, users are informed that comments are closed. Comments show the author, timestamp, and a small image of their avatar.
View Ticket Stats
Al users are able to view a statistics page that displays interactive charts, rendered by Charts.js, detailing the status of all Bugs/Features, as well as the number of Bugs/Features that have been updated each day, that week, and that month.
Delete Account
Users should be able to delete their account at any time, however time constraints meant that this feature couldn't be implemented at this time.
User Badges
When users reached certain milestones in their participation with the site (such as their first comment, first Feature Request, etc.) they were to have badges appear in their user profiles representing each one. Again, time constraints make this an item that will need to be left until a future release.
back to top
- Microsoft Visual Studio Code - Open source IDE from Microsoft that was used to code this project.
- GitHub - Remote repository for all project code with git version control.
- TinyPNG - Compresses images used on the site to keep file sizes to a minimum.
- HTML - The fundamental code structure for all webpages.
- Sass CSS - CSS extension language used to build the CSS for this project and the recommended method to alter the default CSS of the Materialize framework.
- jQuery 3.4.1 - Javascript framework used to implement custom code and initialize Materialize functions.
- Materialize 1.0.0 - Primary visual framework for this project, based on Google's Material Design.
- Stripe - The Stripe API allows individuals and businesses to make and receive payments over the Internet.
- Chart.js - Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.
- Heroku
- Heroku - Hosts the deployed version of this project.
- Heroku Postgres - PostgreSQL is one of the world's most popular relational database management systems.
- Python
- Python 3.14 - Python is an interpreted, high-level, general-purpose programming language and is the language used for all backend functions of this project.
- Django 5.2.14 - Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
- Amazon Web Services
- Amazon S3 - Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 uses the same scalable storage infrastructure that Amazon.com uses to run its global e-commerce network.
back to top
Testing for this project has been completed using both automated and manual methods.
Automated testing has been conducted using standard UnitTests in combination with the Coverage.py testing tool. In all, 23 tests were written covering the original app behavior. The remainder being for non-user boilerplate code generated by Django.
Current local verification command:
cd src
USE_SQLITE=1 ../.venv/bin/python manage.py testCurrent local result after the Django 5.2 upgrade:
Ran 23 tests in 2.931s
OK
Additional upgrade checks:
cd src
USE_SQLITE=1 ../.venv/bin/python -Wd manage.py check
USE_SQLITE=1 ../.venv/bin/python manage.py makemigrations --check --dry-run
../.venv/bin/pip checkTravis-CI was used for the original project, but the old build badge/config should be treated as historical unless CI is reintroduced.
Extensive manual testing has been completed to check that the site performs as it should in different environments and in different browsers.
An MS Excel workbook detailing these tests can be found here.
HTML
Passing the HTML from all templates and base into the W3C Markup Validator generates numerous errors, but these are expected as the validator is unable to understand the Django templating that builds most aspects of the page. For the HTML that does not involve this templating, no errors have been found.
CSS
The CSS for the project has been generated by the Sass CSS extension language. Passing the generated CSS through the W3C CSS Validation Service shows that there are no errors. A number of warnings are flagged, but these relate to MS-Grid vendor prefixes and can be safely ignored.
Javascript
All Javascript was passes throught the Esprima Syntax Validator and was found to be syntactically valid.
Python
All Python code was passed through the PEP8 Online validator and is fully PEP8 compliant.
The project was tested to ensure full usability across the following browsers and their mobile equivalents (where applicable):
- Chrome v.75
- Edge v.44.18
- Edge (Chromium) v.77
- Firefox v.67
- Safari v.12
- Opera v.62
- Internet Explorer v.11
back to top
Before you are able to deploy and run this application locally, you must have the following installed on your system:
- Python 3.14 to run the application.
- pip to install all app requirements.
- An IDE of your choice, such as Microsoft Visual Studio Code.
- GIT for cloning and version control.
Next, perform the following steps:
Clone this GitHub repository by either clicking the green Clone or download button and downloading the project as a zip-file (remember to unzip it first), or by entering the following into the Git CLI terminal:
- git clone https://github.com/10xOXR/2BN-Milestone-5.git.
-
Navigate to the correct file location after unpacking the files.
cd <path to folder>
-
Create a
.envfile in the repository root containing the following environment variables as needed:- STRIPE_PUBLISHABLE - Used solely to identify your account with Stripe; it isn't secret.
- STRIPE_SECRET - Can perform any API request to Stripe without restriction.
- SECRET_KEY - Standard secret key, any value.
- AWS_ACCESS_KEY_ID - AWS user credentials.
- AWS_SECRET_ACCESS_KEY - AWS S3 credentials.
- EMAIL_ADDRESS - to send password reset emails.
- EMAIL_PASSWORD - authenticate email account.
- DATABASE_URL - Remote PostgreSQL database link if using a remote database.
You must create accounts with both Stripe and Amazon S3 if using the payment and remote media storage integrations. Prior knowledge on how to configure a publicly accessible S3 Bucket and the Stripe API are assumed for this project, as detailed instructions are beyond the scope of this document.
For local development without the remote database, set
USE_SQLITE=1when running Django commands. This forces the app to use local SQLite even if.envcontainsDATABASE_URL. -
Create and activate a virtual environment from the repository root:
python -m venv .venv
source .venv/bin/activate- Install all requirements from the requirements.txt file:
pip install -r src/requirements.txt- Apply migrations using local SQLite:
cd src
USE_SQLITE=1 ../.venv/bin/python manage.py migrate- Optional: create an admin user for local development:
USE_SQLITE=1 ../.venv/bin/python manage.py createsuperuser- Start the development server:
USE_SQLITE=1 ../.venv/bin/python manage.py runserverThe application should now be available at:
http://127.0.0.1:8000/
Running the project for the first time with USE_SQLITE=1 will cause Django to create a SQLite database named db.sqlite3.
Django will then migrate the files contained in the migrations folder to set up the following relational schema:
The original project was deployed to Heroku. Treat these notes as historical guidance and re-check the current hosting provider documentation before deploying the modernized version.
For a Heroku-style deployment, the app expects:
- A
src/requirements.txtfile so the platform can install the required dependencies. - A
src/Procfilewith a web process similar to:
web: gunicorn uacore.wsgi:application
- Environment variables equivalent to the
.envvalues described in local deployment. - A PostgreSQL database exposed through
DATABASE_URL. - AWS S3 credentials and bucket configuration for production media/static storage.
- Database migrations run against the remote database:
python manage.py migrateDo not set USE_SQLITE=1 in production.
back to top
- All text for the app information section and the comments were modified from information and reviews found on the Tinder dating app in the Google Play Store.
- Sources for all images used on the site can be found in this file.
- My mentor, Mark Railton, for all of his input on this project.
- Tim Nelson, for the immeasurable patience and help that he always provides and being the sounding board for my ideas and solutions to issues. HDL.