Online Lego Collection

This site is made for avid Lego collectors! You can keep track of your sets, their status, and where they are (like your attic, or spare room). You can Favourite sets, or add sets you don't own yet to build out a wish list. While sharing features are not yet implemented on this page, they will be soon, and you can then share your entire collection, and your wish list, with friends and family (or even strangers if you like)! Your Online Lego Collection also has a field to keep track of missing pieces in your sets, when needed, and you can sort and filter your collection to be able to easily access that information and more. This is your one-stop-shop to keep track of all your sets and what's happening with them.

1. User Experience
   1. User Stores
      1. Visitor Goals
         1. First-Time Visitor Goals
         2. Returning Visitor Goals
         3. Frequent Visitor Goals
   2. Design
      1. Colour Palette
      2. Typography
      3. Imagery
   3. Site Planning
      1. Lucidchart
      2. Wireframes
2. Features
   1. To Be Implemented
   2. Closed Enhancements
3. Technologies
4. Testing
   1. Manual Testing
   2. Automated Testing
   3. Validator Testing
      1. WAVE
      2. Lighthouse
      3. PEP8
   4. Bugs
5. Deployment
   1. Heroku
   2. Droplet
6. Credits

User Experience

Visitor Goals

First-Time Visitor Goals

• As a first-time visitor to the site, I can create an account and a Lego collection to keep track of my sets.
• As a first-time visitor to the site, I can view public Lego collections, and Lego collections shared with me.*

*Once Sharing features are enabled

Returning Visitor Goals

• As a returning visitor to the site, I can log into my account to view and edit my Lego collection.
• As a returning visitor to the site, I can manage my account, to ensure passwords, usernames, and email addresses are kept up-to-date and secure.

Frequent Visitor Goals

• As a frequent visitor to the site, I can manage my Lego collection, including the build status and location for all my sets.
• As a frequent visitor to the site, I can create new Lego sets in the database, so I and others can add them to collections.
• As a frequent visitor, I can delete my Lego collection, and my account.

User Stories

All implemented, detailed EPICs and related user stories are available in project Issues.

Design

Colour Palette

Typography

2 different Google Fonts were used for the page title and website text. They are the same font in different styles for improved design.

Imagery

AI-generated images were used throughout. Stable Diffusion and ComfyUI were used with the Dreamshaper 8 model.

Site Planning

Lucidchart

Lucidchart was used to plan out the database models. An additional "Build Status" was later added ("Extra").

Wireframes

Wireframes were used to plan out the pages for the site. Minor styling adjustments were made, based on user feedback, such as putting the nav bar above the site header.

Homepage

Logged in:

Logged out:

Collections

Main page with collection - slight adjustments to buttons were made for better styling and added pagination:

Main page without collections:

Add Sets - this page was split into 2 in the end. 1 page for the "Global Set Details" ("Create Set" in the final page version), and 1 page for the "Personal Set Details" ("Add Set"):

Additionally, a new view was added but not planned in wireframes for existing collections without any sets. No sort/filter buttons are shown, but instead a message advising the user to add or create a set.

Profile

Logged in:

Logged out:

Shared

Sharing features are not yet implemented. However wireframes were created to plan out the features.

Logged in with selected collection:

Logged in without a selected collection (dropdown list for all collections the user was given access to):

Logged out (public collection link):

Features

All features have been planned and outlined in the Kanban board for the project using Issues. The implemented features are available here.

To Be Implemented

Features not yet implemented are available in the project's Kanban board in the To Do and In Progress columns, as well as these EPICs.

Closed Enhancements

Closed enhancements can be found here. If an enhancement is labelled as "wont-have", it was not and will not be implemented.

Technologies

• Lucidchart to create the entity relationship diagram
• Balsamiq to plan out the pages using wireframes
• Pycharm IDE linked to GitHub to edit the project files
• GitPod when utilising Tutor Support
• GitHub to store the code and for version-control
• GitHub Desktop to be able to commit changes to the code without having to use the web-based tool
• Heroku to deploy the app and have it available for use online
• DigitalOcean Droplet to deploy the app and use it after project submission
• Python for project functionality
  • Cloudinary for image upload and management
  • Coverage to check test coverage for the project
  • dj-database-url for easier database configuration
  • django-allauth for user creation, authentication, and management
  • Django-Select2 to enable database searching within a dropdown
  • Gunicorn to enable web services
  • Pillow for image processing
  • Whitenoise for static files
• JavaScript for site functions
• HTML for the templates for each of the pages for the site
• CSS for page styling
• Django was used as the Python framework for the project
• PostgreSQL as the database for local development
• ElephantSQL as the database for the live web app
• Favicon to generate the page's Favicon
• Flexbox for CSS styling
• Unicorn Revealer for CSS debugging
• Wave for accessibility checks

Testing

Manual Testing

All manual testing in the below table was done using Microsoft Edge, Chrome, and Safari browsers, on MacOS, Windows 11, AndroidOS, and iOS.

Function	Expectation	MacOS Safari	iOS Safari	iPadOS Chrome	Windows 11 Edge	AndroidOS Chrome
Homepage view (logged out)	When viewing the homepage while logged out, the user should be asked to log in or create an account	✓	✓	✓	✓	✓
Collections view (logged out)	When viewing the collections page while logged out, the user should be asked to log in or create an account	✓	✓	✓	✓	✓
Create Collection (logged out)	When logged out, the Create Collection page will show a message asking the user to sign up or log in.	✓	✓	✓	✓	✓
Edit Collection (logged out)	When logged out, the Edit Collection page will show a message asking the user to sign up or log in.	✓	✓	✓	✓	✓
Create New Set (logged out)	When logged out, the Create Set page will show a message asking the user to sign up or log in.	✓	✓	✓	✓	✓
Add Set (logged out)	When logged out, the Add Set page will show a message asking the user to sign up or log in.	✓	✓	✓	✓	✓
Profile view (logged out)	When viewing the profile page while logged out, the user should be asked to log in or create an account	✓	✓	✓	✓	✓
Shared view (logged out)	When viewing the Shared page while logged out, a message should be displayed advising that the sharing features are coming soon	✓	✓	✓	✓	✓
Create Account (logged out)	The Create Account page, when logged out, should display sign-in and forgot password links, as well as the required fields for creating an account and the Signup button. When entering information that doesn't cause errors, the account should be created in the database, and the user should automatically be logged in and redirected to their Collections page	✓	✓	✓	✓	✓
Create Account Errors	When creating an account, if the user enters a username or email address that is already in the database, or a password that doesn't meet the minimum requirements, an error message should be displayed	✓	✓	✓	✓	✓
Forgot Login/Password (logged out)	Reset password links should redirect to the password reset page and allow the user to send a forgot password email to their email address	✓	✓	✓	✓	✓
Password Reset Email	When the user clicks the link in the email to reset their password, they should be directed to a page to change it. If the password meets the minimum requirements, the password should be successfully changed for the account, the user automatically logged in, and redirected to their Collections page	✓	✓	✓	✓	✓
Password Reset Email Errors	When the user clicks the link in the email to reset their password, they should be directed to a page to change it. If the password they enter does not meet the minimum requirements,they should receive an error. If the user uses a password reset link that is invalid (expired/already used), they should also receive an error and be directed to request a new reset email	✓	✓	✓	✓	✓
Log In (logged out)	When a user logs into their account with the correct credentials, they should be redirected to their Collections page.	✓	✓	✓	✓	✓
Log In Errors	If using incorrect credentials when trying to log in, error messages should be displayed accordingly	✓	✓	✓	✓	✓
Create Account (logged in)	The Create Account page should automatically redirect to the Collections page if a user tries to access it while logged in	✓	✓	✓	✓	✓
Forgot Login/Password (logged in)	The reset password page should provide a message informing the user they are already logged in, and referring to change password and profile pages	✓	✓	✓	✓	✓
Homepage view (logged in)	A message should be displayed to the user, referring them to their Collections link	✓	✓	✓	✓	✓
Collections view (logged in, no collection)	A button to Create Collection should be shown to the user	✓	✓	✓	✓	✓
Collections view (logged in, no sets)	Buttons should be shown to the user to allow them to Add Set, Create New Set, Edit Collection, or Delete Collection	✓	✓	✓	✓	✓
Collections view (logged in, with sets)	Buttons should be available for the user to sort, reverse sort and filter their collection, as well as Add Set, Create New Set, Edit Collection, or Delete Collection. Users can, of course, also view all the information for their sets on this page (image, number, name, pieces, build status, set location, missing pieces, favourite status)	✓	✓	✓	✓	✓
Create Collection (with custom picture)	Users can create a collection and upload their own picture when doing so, which will then show on the Collections page	✓	✓	✓	✓	✓
Create Collection (without picture)	Users can create a collection without uploading a custom picture, and their collection name will then show on the Collections page with the default collection picture	✓	✓	✓	✓	✓
Create Collection Errors	If a user tries to create a collection without a name, they will receive a message that it is required	✓	✓	✓	✓	✓
Create New Set (without picture)	Users can create a new set, which will add it to the database with a set number and name, and optionally set picture, number of pieces (in the set) and link to the Lego site. When not adding a picture, a default set image will be added.	✓	✓	✓	✓	✓
Create New Set (with custom picture)	Users can create a new set, which will add it to the database with a set number and name, and optionally set picture, number of pieces (in the set) and link to the Lego site. When creating a set with an uploaded picture, that picture will be available for that set in the database.	✓	✓	✓	✓	✓
Create New Set Errors	If a user tries to create a set using a set number already in the database, they will receive an error. They will also receive an error if no set number and name are provided	✓	✓	✓	✓	✓
Add Set (logged in)	Users can search for sets in the database, add a build status (required), as well as (optional) set location, favourited status, and missing pieces, and add it to their collection	✓	✓	✓	✓	✓
Add Set Errors	If a Build Status is not provided and the user tries to save the set to their collection, they will receive an error message	✓	✓	✓	✓	✓
Sorting	Sorting options should be available for Set Number, Set Name, # Pieces, Build Status, Set Location, Missing Pieces, and Favourite. Clicking the applicable option will sort the sets in the list accordingly. Clicking "Reverse Sort" will reverse the set list, and "Reset Sort" will reload the page without special sorting	✓	✓	✓	✓	✓
Filtering	Filtering options should be available for # Pieces, Build Status, Set Location, Missing Pieces, and Favourite. Clicking the applicable option will enable the Filter Details to be selected, and the sets to be filtered accordingly. Clicking "Reset Filter" will reload the page without special filtering	✓	✓	✓	✓	✓
Column Selection (small screens only)	On small screens (typically phones), only 4 columns can be shown at a time. An extra dropdown should be shown for users to change which columns they are viewing, from the default. When users remove and add columns using the checkboxes in this dropdown, the visible columns should be updated accordingly in the table	N/A	✓	N/A	N/A	✓
Edit Collection (logged in)	Users can change their collection name and picture, and their set details (build status, set location, missing pieces, favourite status). They can also delete sets in bulk from their collection and have buttons available to Save or Discard the changes made. Save Changes will update all the relevant data in the database. Discard Changes will redirect the user back to Collections. Add/Create New Set buttons are available on this page as well	✓	✓	✓	✓	✓
Edit Collection Errors	If the user tries to Save Changes while the collection name or any set build status is empty, they will receive an error	✓	✓	✓	✓	✓
Delete Collection	Users can delete their collection using the button on their Collections page. Once they confirm in the pop-up that they want to proceed, the collection is deleted from the database	✓	✓	✓	✓	✓
Profile view (logged in)	The user should be able to see their profile details (username, email, privacy, set details), change their profile (username, email, privacy, password), and delete their account	✓	✓	✓	✓	✓
Change Username	When entering a new username on the Profile page and pressing the Save button, the user's username should be updated in the database, if it is not yet taken	✓	✓	✓	✓	✓
Change Username Errors	When entering a new username on the Profile page and pressing the Save button, the user should receive an error message if the username already exists in the database	✓	✓	✓	✓	✓
Change Email	When entering a new email address on the Profile page and pressing the Save button, the user's email should be added to their account in the database, if it is not yet used in another account	✓	✓	✓	✓	✓
Change Email Errors	When entering an email address that is already associated with an account, and pressing the Save button, the user should receive an error message to that effect	✓	✓	✓	✓	✓
Update account Privacy	Users can choose a different Privacy setting for their account in their Profile, and when they Save it, it should update in the database	✓	✓	✓	✓	✓
Change Password	Users can change their password by entering their current password, and a new password twice, that meets the minimum requirements. An error will appear if the new password does not meet those requirements, or the current password is incorrect	✓	✓	✓	✓	✓
Manage Emails	Users can re-send verification emails and remove addresses from their account, when applicable, as well as add email addresses	✓	✓	✓	✓	✓
Email Verification/Removal	When clicking a valid verification link for an email, the user should be directed to the Profile page, and the email should be confirmed. Other addresses in the account should be automatically removed. When removing emails, an error should appear if the user attempts to remove the verified or only email in the account.	✓	✓	✓	✓	✓
Email Verification/Removal Errors	If clicking an invalid/expired email verification link, they should receive an error to that effect and be advised to request a new one. If the user tries to remove a second unverified email, that should be removed.	✓	✓	✓	✓	✓
Delete Account	On the Profile page, users can delete their account by checking the box, clicking the Delete Account button, and confirming deletion in the pop-up menu. After doing so, the account is deleted from the database and a confirmation is shown to the user	✓	✓	✓	✓	✓
Delete Account Errors	If the user tries to delete their account without ticking the required checkbox, they will receive an error	✓	✓	✓	✓	✓
Shared view (logged in)	When viewing the Shared page while logged in, a message should be displayed advising that the sharing features are coming soon	✓	✓	✓	✓	✓
Log In (logged in)	When a user accesses the login page while already logged in, they should be automatically redirected to their Collections page.	✓	✓	✓	✓	✓
Log Out	When a user logs out, they are logged out and redirected to the homepage	✓	✓	✓	✓	✓

Automated Testing

117 automated tests were created to ensure forms and views perform as intended. These tests provide 99% coverage for the project and all tests pass.

Validator Testing

HTML

All pages were put through the W3 HTML Validator and all issues identified were resolved. One issue (Error: A select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have a child option element.) was related to django-select2 and resolved by adding a size attribute greater than 1 to the widget in the form.

CSS

CSS code was put through W3C and no errors are found.

JSHint

JSHint was used to validate the JavaScript used. There are no legitimate errors found.

• The validator twice shows the error "The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype."
  • The lines in question are, however, wrapped in if statements
• "$" is mentioned as an undefined variable several times, however these are from JQuery.
• 3 unused variables mentioned are used in templates

PEP8

Some spacing issues (lines too long) were identified by PEP8, but these were all resolved except for settings.py, where one of the Django password validator names is too long.

WAVE

All pages were checked with WAVE. There are Alerts on some pages, however nothing unexpected. All errors were resolved.

Lighthouse

Lighthouse was run on all pages for the site and issues identified were resolved, where possible.

• Images were all converted from png to webp
• Missing meta header details were added
• JavaScript console errors resolved
• Aria-labels added for those fields without labels

Cumulative Layout Shifts caused a lower score in Performance for the pages listed below. This was deemed acceptable, to enable better responsiveness and dynamic resizing.

• Create Set
• Profile page
• Change password
• Change email
• Create account

Homepage

Collections page without collections

Create Collection

Collections page with collection but no sets

Create Set

Add Set

Collections page with sets

Edit Collection

Profile page

Change password

Change email

Shared page

Create account

Forgot Login/Password

Login page

Logged Out Views

Bugs

Known bugs are all listed in these project's Issues with the label "bug".

Fixed bugs can also be found in the project's Issues here.

Deployment

The site was deployed on both Heroku and using a Digital Ocean Droplet. This was to keep the site live after the project submission, and due to networking issues caused by Heroku (see this bug for additional details).

Heroku

For Heroku, the following steps were used for deployment:

1. Cloned the basic repository from Code Institute
   1. Code > Open with GitHub Desktop
2. Created new repository in own GitHub for the cloned repository
3. Created new app on Heroku
   1. New > Create new app
   2. Provide app name and select region > Create app
4. Linked Heroku to cloned GitHub repository
   1. Click GitHub in the Deployment method section
   2. Log into GitHub, provide access to Heroku, and type in the repository name
   3. Search
   4. Connect
5. Enabled automatic deploys
   1. Tick the box for Automatic deploys in the corresponding section
6. Added python buildpack in the Settings > Buildpacks section
7. Added necessary Config Vars

Droplet

To deploy the project using a Digital Ocean Droplet, these steps were followed:

1. In your settings.py in GitHub for ALLOWED_HOSTS and CSRF_TRUSTED_ORIGINS:
   1. Ensure "localhost" and "https\://localhost" are added
   2. Add environment variables for your DROPLET_IP and your public domain name (if applicable)
2. Create Droplet in Digital Ocean project
   1. Select the nearest Datacenter and preferred OS
   2. Leave Droplet Type as Basic (Shared CPU)
   3. Select Regular > $4/mo CPU options (choose a more expensive plan if desired)
   4. Select the Authentication Method
   5. Enter the name for your Droplet (or use the default one provided)
   6. Create Droplet
   7. Click "Enable now" for Reserved IP within the Droplet
   8. Click "Assign Reserved IP"
      1. If you have a public domain name you want to use, ensure you add your reserved Droplet IP to your URL forwarding
   9. Within Networking > Firewalls, "Create Firewall"
      1. Enter a name for your firewall
      2. New rule under SSH
         1. HTTP
      3. New rule under SSH
         1. HTTPS
      4. Search for your Droplet name under Apply to Droplets
      5. "Create Firewall"
3. Open the Droplet Console and clone your GitHub repository with the Django project
   1. In the GitHub repository, click Code and copy the HTTPS link
   2. In the Droplet console: git clone <HTTPS_LINK>
4. Update and install the necessary packages via the console
   1. sudo apt-get update
   2. sudo apt-get dist-upgrade
   3. sudo reboot
   4. apt install python3-pip python3.11-venv nginx (replace with your python version as needed)
   5. sudo snap install core; sudo snap refresh core
   6. sudo snap install --classic certbot
   7. cd <CLONED_GITHUB_PROJECT_FOLDER>
   8. If you have/need a .env file, you can copy it via your local machine's console using:
      1. scp LOCAL_FOLDER/.env DROPLET_USER@DROPLET_IP:/root/DROPLET_DIRECTORY
      2. Remember to add your environment variables for your Droplet IP and public domain name (if applicable)
   9. python3 -m venv .venv
   10. source .venv/bin/activate
   11. python3 -m pip install -r requirements.txt
   12. deactivate

5. Some files on the Droplet now need to be edited, and services enabled and started, so that your site will constantly run without having to manually runserver

   1. In your Droplet's console: vi /etc/systemd/system/gunicorn.socket
   2. i (for "insert")
   3. Paste:

      
      [Unit]
      Description=gunicorn socket

   [Socket] ListenStream=/run/gunicorn.sock

   [Install] WantedBy=sockets.target

   4. Press the Escape key
   5. Type: ```:wq``` and press Enter ("write quit")
   6. ```vi /etc/systemd/system/gunicorn.service```
   7. ```i```
   8. Paste:

   [Unit] Description=gunicorn daemon Requires=gunicorn.socket After=network.target

   [Service] User=root Group=www-data WorkingDirectory=/root/ EnvironmentFile=/root//.env ExecStart=/root//.venv/bin/gunicorn \ --access-logfile - \ --workers 1 \ --timeout 120 \ --bind unix:/run/gunicorn.sock \

   .wsgi:application [Install] WantedBy=multi-user.target ``` 9. Escape key 10. ```:wq``` and Enter 11. ```vi /etc/nginx/sites-available/``` 12. ```i``` 13. Paste: ``` server { listen 80; server_name ; location = /favicon.ico { access_log off; log_not_found off; } location // { root /root/>; } location / { include proxy_params; proxy_pass http://unix:/run/gunicorn.sock; } } ``` 14. Escape key 15. ```:wq``` and Enter 16. ```systemctl enable gunicorn.socket``` 17. ```systemctl enable gunicorn.service``` 18. ```systemctl start gunicorn.service``` 19. ```systemctl start gunicorn.socket``` 20. ```vi /etc/nginx/nginx.conf``` 21. Use your arrow key to move your text cursor to the empty line above "sendfile on;" 22. ```o``` 23. ```client_max_body_size 10M;``` (change 10M to a larger number if you want to allow larger file sizes) 24. Escape key 25. ```:wq``` and Enter 26. ```sudo ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled``` 27. ```nginx -t``` 1. You want to see a "test is successful" here to ensure the previous steps were correctly followed and without typos
6. Adjust settings as below to enable encryption on your webpage via letsencrypt. This only works if you own the domain yourself and it's automatically renewed every 90 days.
   1. sudo ln -s /snap/bin/certbot /usr/bin/certbot
   2. certbot --nginx -d <YOUR_PUBLIC_DOMAIN_NAME>
      1. Enter an email address, as required by the console
      2. Y to agree to terms of service
      3. N to decline sharing your email address
   3. sudo systemctl restart nginx
7. After making changes in GitHub, you will need to git pull in the Droplet console and systemctl restart gunicorn.service

Credits

The base template was cloned from the Code Institute GitHub repository. Various other resources were used for different features. They are all listed below, categorised accordingly.

Special thanks to my husband who helped with troubleshooting and figuring out the Droplet setup, and my mentor for her various resources and constant reminders to document everything. Also thank you to Tutor Support for helping with my complicated questions, even if the topic was out-of-scope.

CustomUser Documentation

• Django authentication
• CustomUser model usage
• CustomUser user management
• Choices fields in models
• Case-insensitive usernames

CSS

• Rainbow gradient (removed during styling update)

Custom Form Messages

• Custom invalid login messages
• Custom form errors

Account Management

• Django introduction
• Custom login view
• Remove intermediate logout page
• Allauth account templates (to assist in template customisation)
• Updating user profiles
• User-led account deletion
• Fixing stray django-added tags

Collection Sort, Filter, Edit

• Assign values to objects for inserting into database (collection owner from collection model for lego_collection model)
• Javascript redirect bugfix for sorting and filtering
• Edit multiple objects at once (for sets in collections)
• Cascading dropdowns for filter
• Pagination

Collection Mobile View

• HTML select option checkboxes
• Display column based on checkboxes
• Hide columns based on checkboxes

Droplet Setup

• Update Kernel
• Installing requirements
• Setup instructions
• Error fix for file upload
• Encrypting pages