Site Link: AEH Art
- Introduction
- User Experience
- Design
- Techincal Design
- Business & Marketing
- Project Management
- Features
- Future Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
Site Link: Allan E Hewitt
Allan E Hewitt Art is an e-commerce website that sells art prints of the artist (Allan E Hewitt). The artist is a skilled landscape painter and also a well-known soil scientist who creates hand-drawn soil profile pictures and landscape paintings. The website sells examples of the artists landscape paintings, soil profile drawings, and also other art formats by the artist. The website also showcases the artist's life and work, enabling the user to connect with the artist beyond purchasing his paintings.
The website brief was developed by the Hewitt Family Trust, who wanted a platform to showcase and sell Allan's art, and also to showcase Allan himself - sharing his accomplishments in both art and science with a wider audience.
The target audience is users who want to purchase art prints. These users will include landscape art painting enthusiasts, and also members of the science community who have an interest in scientific art and soil sciences. The site also aims to gain interest from people who want to find out more about Allan E Hewitt's life and achievements.
- To showcase and sell the artwork of Allan E Hewitt
- To showcase Allan E Hewitt's life
- As a user I can view a list of artwork so that I can decide what to buy
- As a user I want to view individual art pieces so that I can see the price, artwork details, single image and print size
- As a user I want to sort the artwork list by year so that I can see the year of the artwork easily
- As a user I want to sort the publications list by title or year so that I can see the publications I'm interested in easily - won't have
- As a user I want to sort by category of artwork so that I can find the best-price in a category, or sort the artwork in that category by name
- As a user I want to sort multiple categories of products at once so that I can find the best-priced or best-sized product across all categories
- As a user I want to search for artwork by name or type so that I can find a specific art piece I want to purchase
- As a site user I want to see what I've searched for & the number of results so that I can see if the artwork i want is available
- As a user I want to look at a specific category of artwork so that I can easily find artwork that suits me without looking through the entire catalogue
- As a user I want to signup for an account so that I can have my own account & review my profile
- As a user I want to login or logout so that I can access my profile and account
- As a user I want to recover my password in case i forget it so that I can have access to my account at all times
- As a user I want to be notified after signing up so that I can know that my registration was successful
- As a user I want to have my own user profile so that I can see my own order history and order confirmations, and save my payment details
- As a user I want to easily view the sum of my art selections so that I can manage my spending
- As a user I want to choose the quantity of a print when buying it so that I can ensure i don't accidentally select the wrong values
- As a user I want to see items in my cart to be purchased so that I can see the total cost of my selections and the artwork I have chosen
- As a user I want to change the quantity of individual art pieces in my bag so that I can make changes to my selection before purchasing
- As a user I want to enter my payment information so that I can successfully purchase my chosen artwork
- As a user I want to know my profile and payment information is safe and secure so that I can feel safe giving the needed information to make a purchase
- As a user I want to see an order confirmation after checkout so that I can ensure that i haven't made any mistakes
- As a user I want to get an email confirmation after checkout so that I can confirm what I have bought
- As a user I want to view the artist bio so that I can so that I can understand the artist better
- As a user I want to view my wishlist so that I can narrow down what to purchase
- As a user I want to edit my wishlist to help me refine my purchase plans
- As a user I want to delete my wishlist so that I can so that I don't keep unwanted lists
- As a user I want to be able to contact the site owner so that I can make enquiries about buying original artwork pieces
- As a user I want to sign up for newsletter emails so that I can so that I can stay up to date with the artist and his work
- As a user I want to view the artist bio so that I can so that I can understand the artist better.
- As a user I want to view shop info and FAQs to understand the site better
- As a user I want to view a newsletter to feel involved in the artist's story
- As a site owner I want to add new artwork so that I can add to the artwork inventory
- As a site owner I want to edit/update artwork so that I can change artwork prices, descriptions, images as needed
- As a site owner I want to delete artwork so that I can remove artwork that is no longer available
- As a site owner I want to be able to edit, update and/or delete newsletters from the website itself so that I can easily administer the newsletter without accessing the admin panel
- As a site owner I want to user to understand the site purpose and functions
The colour scheme was designed to reflect the artist's love of nature, both in painting and in science. The following colours were chosen:
- #4C694B - Hunter Green - used for buttons throughout the site, this colour links the body of the site with the ferns in the header
- #F5F5F5 - Whitesmoke - used for text
- #F0E68C - Khaki - used for highlighting text and buttons for contrast against the dark background
- #000000 - Black - used to anchor the footer, and for dividers
- #212539 - SlateGray - used for the main background colour, reflecting earthy tones whilst giving good contrast to the lighter text
Colour scheme
Roboto was used as the primary font as it is clear and easy to read. It was also chosen as it is serious and plain text, which links in with the scientific aspects of the site. I initally chose Prompt as a secondary font, which was intended to used for paragraph text, but I removeed this during development as I found the readability of the font was poor, particularly when used in bold.
Imagery was chosen to complement the science theme. The site concept is designed to reflect the layers of soil in a soil profile (as in much of the artist's art). The header of ferns represents the top layer/surface, and the colours get darker as the user travels towards the footer, as in many soil profiles. The background of most of the site was kept simple as a plain slate gray background so as not to distract from the artwork. The text section on the index page has a background of rocky dark soil, and the footer acts as the bedrock of the layers in strong black.
The icons are from fontawesome, and used to support clean and intuitive user experience.
- All soil profiles are provided courtesy of the Hewitt Family Trust, and are the artist (Allan E Hewitt's) own work.
- 'Dust to Dust' is provided courtesy of the Hewitt Family Trust, and is the artist's own work.
- Photographs of the artist are provided courtesy of the Hewitt Family Trust.
- Other artwork (landscapes and other categories) are royalty free images from Pixabay. They were chosen due to their similarity to the landscape and other art created by the artist. It is intended that these images will be replaced with the artist's own work in the future.
Wireframes for the project are below. Mobile and desktop wireframes were produced using Balsamiq, and main concept visual design page was constructed with Canva. Final product is broadly consistent with the intention and design of the wireframe designs.
Home Page Desktop Visual Mockup
Home Page Mobile Wireframe
Shop Desktop Wireframe
Shop Mobile Wireframe
Product Details Desktop Wireframe
Product Details Mobile Wireframe
Shopping Bag Desktop Wireframe
Shopping Bag Mobile Wireframe
Checkout Desktop Wireframe
Publications Desktop Wireframe
Publications Mobile Wireframe
Discover Desktop Wireframe
Discover Mobile Wireframe
Designed at planning stage, the database models were used to guide the development process while building the application. The initial schema closely reflects the structure of the finished application.
Database schema
Allan E Hewitt is an e-commerce store. It is a B2C (Business to Customer) store, selling physical products via secure monetary transactions using a single payment model.
Marketing is constructed around social media outreach (Facebook), and newsletter sign-up (Mailchimp).
A facebook page has been created for Allan E Hewitt Art, for marketing purposes in order to increase awareness and increase site traffic. The facebook page is linked in the site footer.
Facebook page
Mailchimp signup is embedded in the site footer. This service allows easy sign up services for email marketing and automations. Any user that signs up via mailchimp has their email address stored on the mailchimp server, and these emails will be used to distribute the site newsletter, in order to increase brand equity and loyalty.
The following were used to increase search engine optimisation for the site:
- Keywords were added to the meta tag within base.html. These were short-tail and long-tail keywords. Keywords were also added throughout the text of the site. These were used to reflect the contents of the site and increase site traffic.
- A sitemap.xml file was included - this lists the sites important pages, ensuring search engines can find, crawl and index the site. This can be especially useful for newer sites to help them be found.
- A robotx.txt file is included - this allows private areas of the site to be disallowed by web crawlers, and includes reference to the sitemap.
- sitemap
This project was planned and mangaged using an Agile Framework.
User stories were documented, then placed into a project backlog. Each user story was given a title and a number. Milestones were created (as epics) and stories attached to them. Epics were completed one at a time. Work tracking was done using kanban boards - A single board was used for the project, and user stories populated to the board from the project backlog. User stories that ended up as 'won't have' were then returned to the project backlog.
EPICS: User stories were broken up into the following epics (each user story was assigned an epic on the site's agile project board).
- Browsing
- Accounts
- Purchasing
- Site Admin
- Contact
- Wishlist
- About
MOSCOW prioritisation was applied to each user story at the outset, and then updated during the project as work progressed. Six prioritisation tasks were used (four for user stories and two for general task tracking):
- Must Have
- Should Have
- Could Have
- Won't Have
Only one user story (#3) ended up as a 'won't have' - This is kept in the backlog for consideration during future iterations of the site.
Kanban Board
The nav bar has two sections. A header banner with a fern background and the site logo, with a collapsible nav beneath it. The site logo acts as a home page link. There is a search bar, which displays in the fern header on desktop, and floats right when the nav collapses on smaller screens. The shopping bag link and shopping bag tally float right on the large nav, and sit at the bottom of the nav list when collapsed. The header and nav design are consistent across all pages of the site. Available dropdown options in the account tab change depending on log in status - if a user is not logged in they only see a log-in and sign-up button, a registered user will see Profile, Wishlist and Logout options, and a superuser will see in addition 'Add Artwork' and 'Add Newsletter' options. The shop dropdown gives user options to go to all artwork, or filter directly by category.
Nav bar large
Nav bar small
Nav bar 'Shop' dropdown desktop - all users
Nav bar 'Account' dropdown mobile - Superuser
Nav bar 'Account' dropdown mobile - Registered user (logged in)
Nav bar 'Account' dropdown mobile - Superuser, logged in
Nav bar 'Account' dropdown - Unregistered user/user not logged in
There are two sections to the home page.
The hero section has simple text banner that announces that prints are available now - indicating quickly the main purpose of the site. Three of the artwork images for sale are displayed and when clicked all take the user to the main shop page (as does the text banner). The format changes to stacked on smaller screens.
Home Page - Section 1
Below the hero section is a text section which give further information regarding what the site offers. The words 'Shop now' and 'Discover' are links to take the user to those pages, making it easy to enter the site's main content sections. The background is an image of dark soil, to simulate the visual concept of soil layers across the whole page.
Home Page - Section 2
The footer is black and heavy looking - this is to anchor the pages, and provide a visual feeling of soil layers and bedrock (in balance to the ferns at the header). It is a fixed footer, and consistent across every page. Within the footer are social links (to the site facebook page and the site creators linkedin page) and links to the main pages on the site. Documents and policies for privacy (e.g. GDPR considerations), terms & conditions for site use, and a copyright policy for the artist's artwork open in new tabs when selected. Mailchimp newsletter signup is embedded in the footer, so that this is visible to the user on every page of the site, maximising liklihood of sign-up. The footer layout changes as screen size changes.
Footer
Footer medium screen
The shop page is accessible by all users (logged in or not). There is an up arrow to return the user to the top of the page in the bottom right corner. All artwork is displayed to the user (depending on category chosen) on products cards, which are fully responsive.
All Artwork
Artwork - Soil Profiles
There is a category filter available on the shop page, providing the same category filters as the nav dropdown.
Categories dropdown
Users can sort products by title, year or price (and in reverse). Sorting works within categories also. The number of products found is displayed and reset returns user to All Artwork view.
Sort function
When a user searchs for a word in the search bar, the number of products found is displayed, along with the relevant product cards. Reset returns user to All Artwork view.
Search results
Product cards dispplay the artwork images and artwork title (when clicked these open the product detail page for that item). The image and title are links that go to the product detail view. The yellow tag is a catetgory link that will display the relevant category filtered view.
Artwork card
This page has 2 sections. The first is a more detailed description of the shop and site aims. This is also an opportunity for SEO optimisation. The second section contains FAQs in an accordian format.
Shop Info section 1
FAQs
This view shows the product title, year, price, detailed description, and category. Clicking the image will open the image in a new tab. User can select quantity to add to bag, or return to all artwork view. User can add product to wishlist. Adding to bag triggers a toast with bag summary and option to proceed to checkout.
Product Details View
Add to bag
User can amend quantity of item, or remove item from bag. Subtotals and grand total are displayed, along with a prompt to increase spending to achieve free delivery. User can return to all artwork view or go to checkout.
Shopping Bag
User must complete checkout form (pre-populated if user is logged in). Product details and totals are displayed. User is prompted to create account or login in to save details for future purchase. User can return to shopping bag page to adjust order. On successful order ther user is directed to an order information page, and sees a toast message with order number and informed to expect a confirmation email. Issues with payment processing are reported to the user.
Checkout
This page presents three cards, with each of the facets of the artist's life to explore. Clicking the find out more link loads the relevant page.
Discover
A static page that details the artists art development and skills. Opportunity for SEO keyword placement.
Artist
This page contains links to the artists scientific publications and awards. There is also text detailing his impressive scientific career. Opportunity for SEO keyword placement.
Scientist
Page displays a selection of the artists many publications is listed. Each DOI link opens the publication itself in a new tab. The page is paginated, allowing for addition of further publications in the future.
Publications
Page displays the artists many scientific awards. The page is paginated, allowing for addition of future awards.
Awards
A static page that details the artists life. Opportunity for SEO keyword placement.
Human
Contact form is presented. This is pre-populated for a logged in user. Contact form sends an email to user to confirm sending (and as a record), and a success toast is shown on submission.
Contact Form
Contact email to users nominated email account
contact submission toast
Page displays truncated views of all newsletters. User clicks ;Read full newsletter' to view individual newsletter in full.
Newsletter page
Full newsletter
Accessed via the account dropdown for registered users only, the user can view their wishlist, and remove items from it also.
Wishlist
Throughout the site, the user is given feedback on successful and unsuccessful actions via toasts. If a logged in user tries to perform a superuser action via the URL (e.g. delete or edit) they see a warning toast that they are not authorised for that.
Toast example 1
Toast example 2
Toast example 3
If the user tries to access a page that does not exist they view a custom 404 page that allows them to return safely to the home page. There is also a custom page for 500 (internal server) errors, in the same format.
404 page
New users can register under the account tab, to access the sign up page. An email confirmation link is sent to the user to confirm sign up.
Sign up
Sign in page gives option to go to sign up page in case user arrived there in error. User can also reset password from this page - user will recieve an email with a link to reset.
Sign in
Password reset email
When user selects log out option, the confirmation of log out page loads, giving option to cancel (returning to the home page).
Log out
User can view saved personal details and update these. Previous orders are detailed. Clicking on a previous order loads the full invididual order detail, along with a toast to indicate this is a past order.
Profile Page
Previous order details
Toast - Previous order
- Pagination for awards page
- Sorting and filtering for publications page
- Contact form to send copy of email to site admin on form submission
- Sale and/or discount feature
- Add summernote (or similar) to newsletter entry for improved formatting
- Expand FAQ section & increase visibility of this section for the user (links, refactoring layout)
Extensive testing was conducted, and the documentation for this is can be found here.
- If there is only 1 or 2 product cards returned during a search (e.g. when searching for 'mafic'), the responsive layout distorts the cards at screen widths between 769-1200px. On some aspect ratios the cards are still acceptable for viewing (however are pushed to the left side of the screen), however at some ratios the cards are unsatifactorily distorted. This is due to the layout controls imposed on the card display system. I discovered this bug during final testing and would priorise correcting this in the next revision of the site. I considered creating code that would restrict the user from searching for only 1 or 2 products, but decided this would be more disruptive to users (many of whom may never encounter the bug, even when searching for only one or two items.) User can select 'reset' to restore full product listing, or click on the product title or image to go to the product detail view, which will load normally.
-
During testing I found the footer was floating on the shopping bag page page. I initally checked the footer template html and javascript code but couldn't find any errors. After a long search on stack overflow, I found a post about a similar issue, where the user had an unclosed div breaking their layout. This prompted me to return to the relevant html and careful count the divs. I found the table and the subsequent div were not closed, and adding these in corrected the issue.
-
For the quantity input form on the product details page - I had followed the set up and layout for this as per the Code Institude Boutique Ado walkthrough. In the walkthrough there was a bug noted where the quantity input selectors did not work correctly on large screen layouts (due to the use of IDs instead of classes and the layout being formatted in two different ways meaning the ID didn't work for the second layout). THe isse was that the selector allowed nubmer entry outside of the defined range (1-99). I tried to update the javascript for the quantity selectors to use classes to solve this but was unsuccessful. Therefore I decided to modify the layout, so that only one layout schema was required (using flexbox), thus allowing the javascript IDs to function correctly. However once I had reworked the layout the selectors still were not working correctly (as before). Once I ensured there were no issues with my HTML, I narrowed down the issue to the javascript. I did a very close read of the javascript to ensure I very clearly understood what each word in the code was doing.
$('.update-link').click(function (e) { var form = $(this).prev('.update-form'); form.submit(); });
I noted that '.prev' clause related to the previous sibling element, which caused me to re-examine my html set-up. I identified that during refactoring the html I had broken the parent-child relationship required by the javascript by adding a div in the wrong place. Reworking the code to move the div so the parent & child elements were adjacent corrected the issue immediately.
This site can be forked using Github as follows (to make a copy in your own repo)
- Go to Fork button on the right-side ribbon menu (between Unwatch and Star)
- Click the button to make a copy automatically into your own respository
- Owner will default to your own github name
- Add a repository name and an optional
- Add a repository name and an optional description
- Select Create Fork button
This site can be cloned using Github as follows (to make a copy on your own machine):
- Enter the relevant Github repository
- Click the green Code from the menu (to the left of the green Gitpod button)
- Click the green Code button from the menu (to the left of the green Gitpod button)
- Copy the link under https (to copy using HTTPS)
- Open git bash on your own machine, and select the directory you want to save into
- Type 'git clone' then copy in your link The site github link is here:
Ensure project set up appropriately for Django:
- add env.py to gitignore
- pip3 install django gunicorn
- pip install dj_database_url psycopg2
- pip freeze --local > requirements.txt (to automatically update the requirements.txt file)
- django-admin startproject project_name . (to start project)
- python manage.py startapp app_name (to create project app)
- populate 'installed apps' (settings.py) with app name/s
- python manage.py make migrations (to prepare changes for migration)
- python manage.py migrate (to migrate changes)
- python manage.py runserver (to test local environment is working)
- In Heroku dashboard click Create New App button
- Give app a unique name
- Select region e.g. Europe
- Click Create App
- Go to Resources tab
- from add-ons select 'Heroku Postgres'
- Go to Settings tab
- Add Config Vars:
- Click on Reveal Config Vars button
- Copy the contents of the DATABASE_URL file
- Click *Add button
- add env.py file to the root directory
- add to the gitignore file:
- env.py
- os.environ["DATABASE_URL"] = "the database link copied from Heroku above"
- os.environ["SECRET_KEY"] = "any secret key (maybe use an online generator)"
- Go to Settings tab, then Config Vars
- in key box enter "SECRET_KEY", in adjoining box paste your secret key from above
-
in the root settings.py file add:
from pathlib import Path import os import dj_database_url
if os.path.isfile("env.py"): import env
-
Secret key
- delete the current key from settings.py
- Add the following in it's place: SECRET_KEY = os.environ.get(SECRET_KEY)
- Go to Settings tab, then Config Vars
- Enter: DISABLE_COLLECTSTATIC, value of '1'
- Comment out the database settings and add: DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL")) }`
- Amend the templates array to read: 'DIRS': [TEMPLATES_DIR]
- Add Heroku host address to 'allowed hosts': eg 'aeh-art.herokuapp.com', localhost'
- perform initial git commit and git push
- Go to deploy tab within your app
- Select 'github' for deployment method
- Use search box to search for your repsitory, then connect to link Heroku & Github
- Ensure DEBUG set to False in settings.py (Github)
- In Heroku disable collect-static (set to 0)
- Manually deploy by selecting 'Deploy Branch'
- Click view once the option appears to go to live site
This is used to store media & static files.
- Create AWS account and log in
- Go to: All services - Storage and select 'S3'
- Chose your closest region
- Name your bucket (suggest using django app name)
- Go to: 'Object ownership', select 'ACLS enabled'
- Set the bucket to 'public'
- Deselect the 'block all public access' choice
- Create bucket
- Enter the bucket (click on bucket name)
- Go to 'properties'
- Edit 'Static website hosting' to 'enabled'
- Copy the index & document error default values & save changes
- Go to 'Permissions' - and enter this code into the CORS section [ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]
- Go to 'Bucket policy' - 'edit' - 'policy generator'
- On policy generations page choose 'S3 bucket policy' from the 'select type of policy menu
- Allow all principals: enter * in 'Principle'
- Go to 'Actions' - 'Get object'
- Copy the 'Bucket ARN' number (previous tab) & paste into 'Amazon Resource Name'
- Select 'Add statement' - 'Generate Policy'
- Copy policy & paste into bucket policy editor.
- Add /* to end of the policy resource key
- Save
- Go to Access control list - edit
- Go to 'Everyone (public access)' - enable 'list', & agree to the warning pop-up
- Save
- Go to IAM
- Go to 'User Groups' - 'create group' - name the group - 'Create'
- Go to 'Policies' - 'Create New Policy' 'JSON' - 'Import Managed Policy' - 'S3' - 'AmazonS3FullAccess' - 'Import'
- Go to 'S3 permissions' - get ARN
- Add this code underneath the resource section: "Resource": [ "{YOUR ARN}", "{YOUR ARN}/*" ]
- Delete * from 'Resource'
- Select 'Next' - 'Review' - enter name/description - 'Create Policy'
- Go to 'User Groups'- 'Find New Group' - 'Permissions' - 'Add Permissions' - 'Attach Policies' - find your policy - click 'Add Permissions'
- Go to 'Users' - add name - select 'Access key - Programmatic access
- Select 'Next' - choose your newly created group - follow through to end
- Select 'Create user' - download CSV file (containing AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY). Do not lose the keys as they cannot be recovered.
-
In Django:
pip3 install boto3 pip3 install django-storages pip3 freeze > requirements.txt -
Go to app settings - add 'Storages' to 'Installed Apps'
-
In settings, add this code:
if 'USE_AWS' in os.environ: AWS_STORAGE_BUCKET_NAME = 'insert-your-bucket-name-here' AWS_S3_REGION_NAME = 'insert-your-region-here' AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID') AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY') -
Go to Heroku - Settings - Config Vars - add the AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY, and the associated values from the CSV file (step 11 in prev. section); also add USE_AWS as key, and set to True; Remove DISABLE_COLLECTSTATIC
-
In Django: go to settings.py - add the following code to the code section just addede above:
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com' STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/' MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/' AWS_S3_OBJECT_PARAMETERS = { 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT', 'CacheControl': 'max-age=94608000', }
-
Create root level file: custom_storages.py; add this code:
from django.conf import settings from storages.backends.s3boto3 import S3Boto3Storage class StaticStorage(S3Boto3Storage): location = settings.STATICFILES_LOCATION class MediaStorage(S3Boto3Storage): location = settings.MEDIAFILES_LOCATION -
Go to AWS - S3 bucket - Create folder - name it 'media' - save
-
Click into media folder - upload - add files - upload your images
-
Go to 'Permissions' - select 'Grant public-read access' - upload
- This project was heavily based around Code Institute Boutique Ado walk-throughs and code, particularly with the use of Stripe and AWS
- The wishlist was adapted from the github repository Music Store by Paul Modelay
- Bootstrap accordian code used for FAQs is from bbbootstrap.com
- Enacting pagination was guided by dontrepeatyourself.org
Written content was created by the site author, unless specifically credited within the content itself.
Languages
Frameworks
- Django Python web framework (backend)
- Bootstrap 4 Front-end web framework
During the creation of this site I used the following technologies:
- Git Hub used for online programming, change tracking and storage respository for this project.
- Heroku cloud platform service to deploy, use & manage the application.
- Elephant SQL Postgres SQL database service.
- AWS Platform for image hosting.
- Lucid Charts for database schema creation during devlopment phase.
- Tables Generator used to create tables in manual testing section for README.
- Allauth used to manage users and their authentication.
Thanks to my mentor Medale Oluwafemi for his advice and support, and my family and colleagues for bearing with me.