Speedy Cars

View the live project here.

This full-stack framework project was built using Django, PostgreSQL, Python, HTML, CSS, and JavaScript. The Speedy Cars website is designed to display cars for sale to customers and allow them to book, edit or cancel test drives. The website also provides an option to find a car with specific search criteria. The business owner can also easily manage the car stock from the administration panel.

Table of contents

• Speedy Cars
  • User Experience (UX)
    • Primary Goal
  • User Requirements and Expectations
  • User Stories
    • Users
    • Site owner
    • Error Handling
  • Agile Methodology
    • Kanban dashboard
  • Wireframes - Desktop
  • Wireframes - Tablet
  • Wireframes - Mobile
  • Site Map
  • Structure
    • Code Structure
    • Database design
    • Models
  • Design Choices
    • Home page background
    • Fonts
    • Colours
  • Features
    • Responsive design
    • Homepage
    • Navigation Menu
    • Cars page
    • Pagination
    • Car details page
    • Thumbinals
    • Ability to book a test drive with a specific car
    • Search page
    • Preserving search inputs selected by the user
    • About page
    • Dashboard
    • Messages system to provide feedback to the user
    • Footer
    • Dynamic page titles
    • Authentication
    • Error handling
    • Customized Admin (the business owner) panel
    • Admin panel - ability to add a new car
    • Admin panel - ability to add a new employee
    • Admin panel - ability to review booked driving tests
    • Admin panel – ability to select cars that will be displayed on the page
  • Features to be implemented
  • UX testing
  • Manual Testing
  • Automated tests
  • Code Validation
    • HTML
    • Python
      • speedy_cars project
      • booking app
      • cars app
      • employees app
      • home
    • CSS
    • JS
    • Color Contrast Accessibility Validator
    • Lighthouse testing
    • Accessibility testing
  • Technologies Used
    • Languages
    • Python Libraries
    • Database
    • Frameworks
    • Programs & Tools
  • Bugs
  • Unfixed bugs
  • Deployment
    • Using Github & Gitpod
    • Deployment to heroku
    • Final deployment
    • Forking the GitHub Repository
    • Cloning This Project
  • Credits
  • Content
  • Acknowledgments

User Experience (UX)

Primary Goal

The primary goal of the website, from the site owner’s perspective, is as follows:

• To attract customers to the business by showing a variety of cars for sale
• To allow a user to navigate the website easily
• To allow a user to make an inquiry about a car
• To allow a user to book a test drive
• To allow a user to easily search a car they are looking for
• Ability to add a new car for sale
• To allow a user to read testimonials about Speedy Cars

The primary goal of the website, from a site user’s perspective, is as follows:

• To view the cars available for sale
• To view details about the car along with a description and price
• To be able to easily find a car they are looking for
• To book a test drive
• To make an inquiry about the car
• To view the business opening hours and address
• To read more about the business
• To view other customers' testimonials about Speedy Cars

Back to Top

User Requirements and Expectations

• Easy to navigate by using a few buttons
• Appealing dashboard with a functional overview
• No broken links
• Appropirate error handling
• Responsive and visually appealing on all devices.
• Ability to make an inquiry about the car
• Ability to book a test drive
• Ability to edit or cancel a test drive

Back to Top

User Stories

Users

• As a user, I want to be able to view all available cars in one of the categories:
  • Petrol
  • Diesel
  • Hybrid
  • Electric
• As a user, I want to see a description of each car available for sale along with relevant pictures.
• As a user, I want to be able to navigate the website quickly and easily.
• As a user, I want to be able to use the search option to find the car I’m looking for.
• As a user, I want to be able to view the price of the car.
• As a user, I want to be able to read other users’ testimonials.
• As a user, I want to be able to inquire about the car.
• As a user, I want to be able to book a test drive.
• As a user, I want to be able to edit or delete a test drive I have made.
• As a user, I want to read more information about the business.
• As a user, I want to be able to see featured(recently added) cars.
• As a user, I want to be able to sign in to or create an account.
• As a user, I want to be able to log out of an account.
• As a user, I want to be able to view the business’s social media channels.
• As a user, I want to log in after I created an account and see my test drive bookings.
• As a user, I want to be informed if a test drive cannot be booked for any reason.
• As a user, I want to be informed if a test drive was booked successfully.

Back to Top

Site owner

• As a user, I want to attract car buyers.
• As a user, I want an appealing website with a range of cars.
• As a user, I want users to be able to view the full range of cars available for sale.
• As a user, I want users to be able to view the relevant description of each car along with the price.
• As a user, I want users to be able to have an option to search for the car they are looking for.
• As a user, I want users to be able to make an inquiry about the car.
• As a user, I want users to be able to book a test drive with the selected car.
• As a user, I want users to be informed if a test drive cannot be booked.
• As a user, I want users to be able to edit and cancel a test drive.
• As a user, I want users to be able to read about the business.
• As a user, I want users to be able to navigate the site easily and quickly.
• As a user, I want users to be able to sign in to or create an account.
• As a user, I want users to be able to log out of their accounts.
• As a user, I want to be able to add new cars or remove them if they are sold.
• As a user, I want users to be able to view the business's social media.
• As a user, I want to be able to add testimonials.

Back to Top

Error Handling

• If the page cannot be loaded, the user should be able to return through the website's navigational structure without hitting the back button on their browser.

Back to Top

Agile Methodology

Kanban dashboard

Github issues were used to create the User stories and group them according to MoSCoW prioritization technique. Link to the project with live issues can be found HERE. The issues are currently in two categories - done or not for this deadline.

Back to Top

Wireframes-Desktop

• Home page
• Cars page
• Car page
• About page
• Search page
• Login page
• Logout page
• Registration page
• Dashboard page
• Edit test drive page

Back to Top

Wireframes-Tablet

• Home page
• Cars page
• Car page
• About page
• Search page
• Login page
• Logout page
• Registration page
• Dashboard page
• Edit test drive page

Back to Top

Wireframes-Mobile

• Home page
• Cars page
• Car page
• About page
• Search page
• Login page
• Logout page
• Registration page
• Dashboard page
• Edit test drive page

Back to Top

Site Map

The information architecture was organized in such a way as to ensure that users can navigate through the site easily.

Back to Top

Structure

Code Structure

The project is organized into various applications, as constructed using the Django Framework. App details are as follows:

• Home - this app contains information about the Speedy Cars home page with quick links to the about and search pages via the nav bar.
• Booking - this app contains information related to the test drive booking system (for users to view, edit or cancel booked test drives).
• Cars - this app is for the users to view the cars or to view the car search results.
• Employees - this app is for the business owner to manage Speedy Cars staff in the admin panel.

To complement the apps there are:

• Speedy Cars: Speedy Cars level files - settings.py for project level settings and urls.py to route the website urls.
• templates: Containing the base.html, allauth(django authentication). The partial folder contains the navbar and footer HTML.
• templates (app level): some of the apps have their own templates directory for HTML to consider portability and reuse.
• urls (app level): each app has its own url.py file to consider portability and reuse.
• static: CSS files for the website and admin panel. Javascript file is also included in this folder.
• manage.py: This file is used to start the site and perform functions during development.
• README.md: Documentation about the project.
• Procfile: To run the application on Heroku.
• Requirements.txt: Containing the project dependencies. Note: Environment variable values are not exposed in the source code as they are stored locally in env.py that is not checked in(listed in .gitignore).

Back to Top

Database design

The data schema was created using drawsql

Please note that when I was creating the car model, the only option to select the data type for images was 'geometry' as the closest meaning for the image object. After consultation with my mentor, it was confirmed that this selection was OK to use.

Back to Top

Models

The following models were created to represent the database model structure for the website

Car model

• The car model contains a collection of data for each car displayed on the website. This model is being used by the business owner (via admin panel) each time a new car is added.

Back to Top

Booking model

• The Booking model contains a collection of data submitted by the user when booking a test drive.

Back to Top

Employee model

• The employee model is being used by the business owner(via admin panel) to enter information about the employee. Some fields from this model are dynamically displayed on the website.

Back to Top

Design Choices

Home page background

As I wanted a more attractive and dynamic home page, I decided to use a video as a background. After analyzing some interesting video clips, I found one that, in my opinion, was perfect for this project. The video clip used in the project reflects the theme of the site very well and, at the same time, does not distract the user's attention from other parts of the site. Therefore, I decided to use it as a looped video background on the home page.

Back to Top

Fonts

I visited the Google fonts website to explore the available font options for my project. After consideration, three different font types were chosen to be used in different sections of the website.

• The Bebas Neue font font is used in navigation bar and to display the slogan on the home page.
• The Orbitron font font is used to display the business name in the navbar.
• The Abel font font is used to display all other text information.

Back to Top

Colours

I used Coolors to come up with a color scheme. The color palette was intended to create a fairly neutral background so that the photos of the cars stand out as much as possible.

• #ffac0c - the business name and the text displayed on the home page
• #d4d1d1 - the background color displayed on all pages except the home page
• #212529 - navbar and footer background color
• #ffffff - cards background color
• #00ffff - hover effect color

Back to Top

Features

Responsive design

The website has been designed using Bootstrap 5 therefore it's fully responsive on all screen sizes.

Back to Top

Homepage

The home page is a simple set of navigation elements, a background video, and a short slogan displayed on the screen.

The video background fits perfectly into the context of the project and the purpose of the website.

Back to Top

Navigation Menu

Depending on whether the user is logged in or not, different links are made available in the completely responsive navbar.

• For a user that is not signed in, the following options are available:
  • Speedy Cars(the business name displayed on the navigation bar)
  • Home - link to the home page
  • Cars - link to the page with cars for sale
  • Search - link to the search page
  • About - link to the about page
  • Login - link to the login page
  • Register - link to the user registration page

• For a user that is signed in, the following options are available:
  • Speedy Cars(the business name displayed on the navigation bar)
  • Home link to the home page
  • Cars - link to the page with cars for sale
  • Search - link to the search page
  • About - link to the about page
  • Welcome (User Name) (dashboard) - link to the dashboard page
  • Logout - link to the logout page

• A hover effect is implemented to visually highlight menu links(except the dashboard link) when the user hovers over them. The dashboard link(visible when the user is logged in) is always displayed in white.

Back to Top

Cars page

When the user clicks on the Cars link in the navigation bar, they will be redirected to the page where they can view all the cars that are available for sale.

The form of presentation of each car is the same and consists of displaying a single photo of the car, the price and basic information about the car. The information is presented using Font Awsome icons and text in a minimalist way. The basic information about the car that the user can read is as follows:

• Engine type
• Engine size
• Mileage
• Year of manufacture
• Gearbox type
• Body type
• Information about when the car was posted on the website

The More info button allows the user to be redirected to a page where additional information about the specific car will be presented.

Back to Top

Pagination

Each Cars page may contain up to six cars displayed on the page. If the number of cars in the database does not exceed six, then pagination is not visible.

However, if the number of cars exceeds six, then the pagination is active(displayed in the middle of the screen). The user can then change pages by clicking on the arrow buttons or directly clicking on the page they want to move to. If the user is on the first page, then the left arrow icon is inactive as page one is the start page. On the other hand, when the user is on the last page, the right arrow is inactive because it is the last page available.

Back to Top

Car details page

When the user is interested in a specific car and clicks on the More info button, they will be redirected to a page where they can find additional photos and information about the car. This page is divided into sections:

• Photos - additional photos are presented as thumbnails. Clicking on any of the thumbnail images will launch the lightbox gallery, so the user will be able to view all the photos in detail (please read about thumbnails below).
• Additional information is presented using Font Awsome icons and text:
  • Price(no longer presented as a badge on the main picture)
  • Road tax
  • Previous owners
  • NCT(National Car Testing) due date
• Car description section that contains more info about the car
• Information about the sales executive who is responsible for selling the car. The information presented on the sales executive card contains:
  • The picture of the sales executive
  • Sales executive name
  • Phone number
  • Email address
  • If the user is logged in, the button to book a test drive will also be visible. If the user is not logged in, an appropriate message will be displayed below the sales executive card(please read about this feature below).

The user also has an option to return to viewing all cars by clicking on the Back to cars button, which is located above the car's main photo.

Back to Top

Thumbinals

When the user clicks on the More info button on the car's card, they will be redirected to the page to view more details about the car they are interested in.

On this page, additional images of the car will be available to view below the main picture as thumbnails. Once clicked on the thumbnail, it will enlarge and the user will be able to scroll through all available images. The user can use the keyboard left or right keys or arrow keys presented on the screen to scroll through all available images. The images presentation can be closed by clicking on the X button(upper right-hand corner) or outside the presentation area.

Back to Top

Ability to book a test drive with a specific car

In order to book a test drive, the user must be logged in. If the user is not logged in, the Book test drive button will not be visible.

If the user is logged in, the Book test drive button will be visible below the sales executive's name card.

When the user clicks on the Book test drive button, a modal window will be opened. The user must provide additional information in order to complete the test drive booking process. The following fields can be seen in the modal window:

• Car - this field is automatically populated and cannot be modified(read-only)
• Name - this field is automatically populated. The user name is pulled from the database and cannot be modified(read-only)
• Email - this field is automatically populated if the user provided an email address during registration. If not, the user can enter their email address at this stage. This is a required field to complete the test drive booking process.
• Phone - the user must enter their phone number in order to complete the booking process. This is also a required field.
• Date - the user must select the date when they want to book a test drive. By default, this field always shows the current date. Important - if the user selects a date that is in the past, the booking process will be cancelled and an appropriate error message will be displayed on the screen(please read about the message system below).
• Message - the user can provide additional information if they want. This field is optional and does not affect the test drive booking process if left blank.

Once all required fields are populated the user can click on the Submit button to book a test drive. An appropriate message will be displayed on the screen to confirm that the test drive was booked successfully.

Important - the user cannot book a test drive twice in the same car, as the booking process will be canceled and an appropriate message will be displayed on the screen(please read about the message system below).

Back to Top

Search page

The search page consists of two sections:

• The search form where the user can enter or select their search criteria
• Pictures of cars recently added for sale(only the three recently added cars will be displayed). This section will no longer be visible once the user clicks on the Search button.

The search form allows the user to find a car according to the criteria entered or selected by the user. The user can use the following search options:

• Keyword - enter any keyword that will be searched in the database.
• Make - select a car make from the dropped-down menu
• Fuel type - select fuel type from the dropped-down menu
• Body type - select a body type from the dropped-down menu
• Engine size - select an engine size from the dropped-down menu
• Price - select the car price from the dropped-down menu. This will display all cars up to the value selected by the user.

The search criteria can be combined, i.e. the user can select any value ​​from the drop-down menu for each field. The search results (if any) will be displayed below the search form.

If the search result does not exist an appropriate message will be displayed on the screen.

Back to Top

Preserving search inputs selected by the user

The search form does not reset the values ​​entered or selected by the user after each search, which can be very helpful i.e., the user can search for a specific car model (which they selected earlier) by changing only the price range — no need to make all selections again. To reset the form to its default values, the user has to click on the Search link located in the navigation bar.

Back to Top

About page

On the About page, the user can:

• read information about Speedy Cars' business.

• check the business's opening hours and its location(a special script is implemented to highlight the current day of the week)

• find contact details for the people who are running the business in case of any queries.

Back to Top

Dashboard

The dashboard panel is accessible only to logged-in users, and it is accessible from the navigation bar. The link to the dashboard is always highlighted in white to stand out from other links.

On the dashboard page, the user can manage their booked test drives. If the user has not booked any test drives, the appropriate information will be displayed on the screen.

If the user has test drives booked, all of them will be displayed on the screen.

The information about booked test drives contains:

• Name of the car that was reserved for a test drive
• Date when the test drive will take place

The logged-in user has the following options in the dashboard panel if they have booked at least one test drive:

• by using the View button to view the car booked for a test drive(the user will be redirected to the relevant page)
• by using the Edit button to edit the information provided when booking a test drive (i.e. phone number, email address, test drive date). Important - Car and Name fields are not editable as this information is pulled from the database.

Once the user has updated the information they wanted to change, they can click the Change button to update the information in the database. A confirmation message will be displayed on the screen (please read about the message system below).

• by using the Cancel button to cancel the test drive. In this case, a separate page will be displayed where the user will have to confirm whether or not they want to cancel the test drive. If the user clicks on the Yes button, the test drive will be canceled (deleted from the database) and will no longer be presented on the dashboard panel. If the user clicks on the Cancel button, they will be redirected to the dashboard panel.

Back to Top

Messages system to provide feedback to the user

Messages are displayed for continual feedback to the user on their interactions and follow the same layout for both mobile and desktop designs. These interactions include:

• Sign in

• Logout

• Test drive booking confirmation

• Incorrect test drive date selected error message

• Test drive booking cancellation message

• Test drive double booking error message

• Edit test drive confirmation

Back to Top

Footer

Footer is kept very simple as set of links and the businnes name. Footer layout remians the same on all screen sizes. A special javascript function automatically updates the year which is displayed on the footer.

Please also note that the footer is displayed only on selected pages.

A hover effect is implemented if the user hovers over the social media links

Back to Top

Dynamic page titles

Each page has an individual name located on the tab which can help the user quickly find out on which page they are currently on

• Home page

• Cars page

• Car page

• About page

• Search page

• Dashboard page

• Login page

• Logout page

• Register page

Back to Top

Authentication

The authentication process for the application is handled by Django allauth and consists of three parts.

• Sign Up

If the user entries are wrong, the relevant error message will be displayed on the screen, informing what needs to be corrected to complete the registration process.

• Sign In

The sign-in form requires only two fields to be entered.

• Username
• Password

If the user name or password is incorrect, an error message will be shown on the screen.

• Log out

If the user decides to log out, they will be redirected to the page to confirm their choice.

Back to Top

Error handling

404 page

If the page the user is trying to reach is not accessible, the following error message will be displayed on the screen. The user can return to the home page by pressing the home button. There is no need to hit the back button on the browser.

500 page

A 500 server error page was also created to handle internal server errors.

Back to Top

Customized Admin (the business owner) panel

The admin panel was adjusted with the following changes:

• the name of the business is now displayed on the top bar
• the color scheme was slightly changed
• the color of some buttons was changed

The changes above were only cosmetic, but thanks to that, the panel looks a little bit different than the standard Django panel.

Back to Top

Admin panel - ability to add a new car

The business owner can add a new car to the website via the admin panel. In this panel, there is also an option to delete the car from the database by clicking on Delete button

Back to Top

Admin panel - ability to add a new employee

The business owner can add a new employee via the admin panel. All the information about the staff(photo, name, email, etc.) that is displayed on the website(About page) comes from the database, and it's not hard coded in HTML. Therefore, in the event of any changes(i.e. new employee), the updated information will be automatically displayed on the website.

Back to Top

Admin panel - ability to review booked driving tests

The business owner can review booked test drives via the booking panel. The panel contains the following information regarding booked test drives:

• Booking ID
• User ID (the user who booked a test drive)
• Name (the user name)
• Car (the car that is booked for a test drive)
• Car ID
• Email (the email address that the user provided during the test drive booking process)
• Phone (phone number that the user provided during the test drive booking process)

Back to Top

Admin panel - ability to select cars that will be displayed on the page

This feature allows the business owner to enable or disable the car to be visible on the website. There is no need to delete the car from the database if, for some reason, the business owner does not want it to be displayed on the website(i.e., the car is reserved or not ready for sale).

If the Is for sale check box is selected, the car will be shown on the website.

If all Is for sale check boxes are deselected, an appropriate message will be displayed on the screen.

Back to Top

Features to be implemented

• Ability to book a test drive by the user at a specific time(not only a date)
• Email notification to the staff that the car was booked for a test drive.
• Email notification to the user with the booked test drive date.
• Ability to make an inquiry about the car.
• Ability to add(by the user) a testimonial about Speedy Cars
• Ability to view testimonials about Speedy Cars
• Ability to approve testimonials by the business owner(after approval, testimonials can be displayed on the page).
• Add more car searching options(i.e. model, mileage, min year, max year, etc.).
• Add the business location on the page(Google Maps).

All the features mentioned above would be a great improvement for this website. However, due to the upcoming deadline to submit this project, it is not possible to implement them all at this stage.

Back to Top

UX testing

Back to Top

Manual Testing

Manually testing the design was an ongoing process to make sure everything was working as expected. All bugs were fixed on an ongoing basis during the project creation. After each fix, manual tests were performed to make sure that everything is working as intended and that the fixes did not cause other errors. Manual tests and checks include:

• Navbar
  • All links navigate to the correct endpoint.
  • The hover effect is working correctly.
  • The dashboard link displays the username, and it is highlighted in white color (if the user is logged in).
  • Different navigation links are presented on the navigation bar depending on the user authentication.
  • Responsiveness
  • Accessibility is correct.
• Footer
  • All links navigate to the correct endpoint.
  • The hover effect is working correctly.
  • External links open in a new tab.
  • Accessibility is correct.
  • Responsiveness.
• Login and Signup
  • The form is clear and intuitive.
  • Form completes its task correctly
  • Message is displayed to the user on the homepage when signed in
• Logout
  • Options are clear
  • Message is displayed to the user on the homepage when signed out
• Home Page
  • Text is clear and easily read.
  • The video background is correctly displayed.
  • Responsiveness.
• Cars page
  • Responsiveness
  • Pagination occurs when there are more than 6 cars.
  • The user can navigate to the selected page when using the pagination buttons.
  • The More Info button navigates to the correct page where the user can find more details about the car.
  • Images of the cars are displayed correctly.
  • All the font awesome icons and the car details are correctly displayed on the cards
• Car Page
  • Responsiveness -The main picture of the car is displayed correctly.
  • All thumbnails are displayed correctly underneath the car's main picture.
  • Thumbnails enlarge once clicked. The lightbox is launched to start the car's image gallery presentation.
  • All the font awesome icons and car details are correctly displayed on the card(s)
  • The car description is presented and readable.
  • The Back To Cars button navigates back to the Cars page.
  • The sales executive's card is displayed with the image and contact details
  • The Book test drive button is presented underneath the sales executive card (only if the user is logged in)
  • The Book test drive button is not presented for non-logged-in users (relevant message is displayed instead).
  • The Book test drive button opens a modal to book a test drive
• Book test drive modal
  • Responsiveness
  • The form is clear and intuitive.
  • Relevant fields are prepopulated and not editable by the user.
  • The date picker works correctly.
  • Required fields must be entered before the form submission.
  • Error message is displayed on the screen if the date selected by the user is incorrect (booked in the past)
  • Confirmation message is displayed on the screen if the test drive booking was successful.
  • The modal is closed if the user clicks in the upper right corner(X button) or outside of the modal form.
  • The Submit button works correctly.
• Search Page
  • Responsiveness
  • The form is clear and intuitive.
  • The drop-down menus are working correctly.
  • The form preserves the user's selections.
  • The form returns correct search results.
  • The search results are displayed correctly on the screen.
  • Recently added cars are displayed correctly.
• About Page
  • Responsiveness
  • Text is clear and easily read
  • All the images are displayed correctly
  • The current day of the week is correctly highlighted in the business opening hours section
  • The footer links are working correctly
  • The View Our Full Car Stock navigates to the correct page
• Dashboard Page
  • Responsiveness
  • The Dashboard link is only visible for logged-in users.
  • All booked test drives are displayed on the dashboard page
  • Each test drive contains three buttons:
    • View – the button opens the page with the car booked for a test drive
    • Edit – the button opens the page to edit the test drive
    • Cancel – the button opens the page to confirm if the user wants to cancel a particular test drive
  • A relevant message is displayed on the screen if the user has no test drives booked yet
• Edit test drive
  • Responsiveness
  • Relevant fields are prepopulated and not editable by the user.
  • Required fields must be entered before the form submission.
  • An error message is displayed on the screen if the date selected by the user is incorrect (booked in the past)
  • A confirmation message is displayed on the screen if the test drive booking was successful.
  • The Change button works correctly and the correct page is loaded after the form submission
• Delete test drive
  • A proper message is displayed each time the user wants to cancel the test drive
  • Cancel button returns to the dashboard
  • The Yes button deletes the booked test drive from the database and redirects the user to the dashboard page.

Back to Top

Automated tests

Automated tests have not been created due to time constrains of the project.

Back to Top

Code Validation

HTML

The HTML code within the application was validated by W3C Markup Validation Service. Pages were put through the validator seperatly, and the results can be seen below.

• Home page
• Cars page
• Car page
• Search page
• About page
• Dashboard page
• Login page
• Logout page
• Register page

Back to Top

Python

The Python code within the application was validated by PEP8 online validation service. Files were put through the validator separately, and the results can be seen below.

speedy_cars project

• settings.py validation results
• urls.py validation results

booking app

• admin.py validation results
• apps.py validation results
• forms.py validation results
• models.py validation results
• urls.py validation results
• views.py validation results

cars app

• admin.py validation results
• apps.py validation results
• choices.py validation results
• models.py validation results
• urls.py validation results
• views.py validation results

employees app

• admin.py validation results
• apps.pyvalidation results
• models.py validation results

home

• apps.py validation results
• urls.py validation results
• views.py validation results

Back to Top

CSS

The CSS code within the application was validated by W3C CSS Validation Service, and the results can be seen below.

• CSS Admin validation results
• CSS validation results

Back to Top

JS

The JavaScript and JQuery code within the application was validated by JSHint, and the results can be seen below.

• JS validation results

Back to Top

Color Contrast Accessibility Validator

The Color Contrast Accessibility Validator was used to check if there is no contrast issue on the web page.

• Contrast validation results

Back to Top

Lighthouse testing

The Lighthouse tool was used to assess the website's performance, accessibility, and SEO. The results are shown below.

• Home page
• Cars page
• Car page
• Search page
• About page

Back to Top

Accessibility testing

I have tested the pages of the application using WAVEto ensure there are no errors. The results can be seen by following the links below.

• Home page
• Cars page
• Car page
• Search page
• About page

Back to Top

Technologies Used

Languages

• HTML
• CSS
• JavaScript
• Python
• Jinja
• Markdown

Back to Top

Python Libraries

• asgiref==3.5.2
• cloudinary==1.29.0
• dj-database-url==1.0.0
• dj3-cloudinary-storage==0.0.6
• Django==3.2.15
• django-allauth==0.51.0
• gunicorn==20.1.0
• oauthlib==3.2.0
• psycopg2==2.9.3
• PyJWT==2.4.0
• pylint-django==2.5.3
• pylint-plugin-utils==0.7
• python3-openid==3.2.0
• pytz==2022.1
• requests-oauthlib==1.3.1
• sqlparse==0.4.2
• whitenoise==6.2.0

Back to Top

Database

• Sqlite
  • This database was used in local development.
• PostgreSQL
  • The site is deployed on Heroku using a Postgress database.

Back to Top

Frameworks

• Django
  • The project uses Django as the main framework.
• Boostrap 5
  • Used for general site layout.
• Lightbox
  • Used to implement a lightbox gallery.

Back to Top

Programs and Tools

• Heroku
  • The project is deployed and hosted by Heroku.
• Balsamiq
  • Used to create the website wireframes.
• GitHub
  • GitHub was used to store all the project files written in Gitpod.
• Gitpod
  • Gitpod was used as a development environment.
• Cloudinary
  • To store static files for the project
• Drawsql
  • Drawsql was used to design database model for the project.
• W3School
  • For problem solving and code searching.
• Stack Overflow
  • For problem solving and code searching.
• Font Awesome
  • Font Awesome was used to add icons that represent links to social media.
• PEP8 validator
  • For checking python convention.

Back to Top

Bugs

Back to Top

Unfixed bugs

No known unfixed bugs present at the time of submission

Back to Top

Deployment

The master branch of this repository has been used for the deployed version of this application.

Using Github and Gitpod

To deploy this Django application, The Code Institute Full Template was used to deploy this Django application. To create a repository from the template above the following steps were taken:

• Click the Use This Template button.
• Add a repository name and brief description.
• Click the Create Repository from Template to create a repository.
• To create a Gitpod workspace click Gitpod, this can take a few minutes.
• When on the project it is best to open the workspace from Gitpod (rather than Github) as this will open the previous workspace rather than creating a new one.
• Committing work should be done often and should have clear/explanatory messages, use the following commands to make commits:
  • git add .: adds all modified files to a staging area
  • git commit -m "A message explaining commit" :commits all changes to a local repository.
  • git push: pushes all your committed changes to the Github repository.

Deployment to heroku

In the app

• Add the list of requirements by writing in the terminal "pip3 freeze --local > requirements.txt"
• Git add and git commit the changes made

Log into heroku

• Log into Heroku or create a new account and log in
• In the top right-hand corner, click “New”; and choose the option to Create a new app.
• Write the app name(it must be unique).
• Choose Region
• Click “Create App”
• Click in resources and select Heroku Postgres database
• Click Reveal Config Vars and add new config "SECRET_KEY"
• Click Reveal Config Vars and add new config "CLOUDINARY_URL"
• Click Reveal Config Vars and add new config "DISABLE_COLLECTSTATIC = 1"
• The next page is the project’s Deploy Tab. Click on the Settings Tab and scroll down to Config Vars
• Next, go to Buildpack section click Add Buildpack select python and Save Changes
• Scroll to the top of the page and choose the Deploy tab
• Select Github as the deployment method
• Confirm you want to connect to GitHub
• Search for the repository name and click the connect button
• Scroll to the bottom of the deploy page and select the preferred deployment type
• Click either Enable Automatic Deploys for automatic deployment when you push updates to Github

Final deployment

• Create a Procfile web: gunicorn speedy_cars.wsgi
• When development is complete change the debug setting to: DEBUG = False in settings.py
• In Heroku settings, delete the config vars for DISABLE_COLLECTSTATIC = 1

Back to Top

Forking the GitHub Repository

By forking the GitHub Repository you will be able to make a copy of the original repository on your own GitHub account allowing you to view and/or make changes without affecting the original repository by using the following steps:

• Log in to GitHub and locate the GitHub Repository
• At the top of the Repository (not top of page) just above the "Settings" button on the menu, locate the "Fork" button.
• You should now have a copy of the original repository in your GitHub account.

Back to Top

Cloning This Project

Clone this project by following the steps:

• Open GitHub
• You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL
• Once you click the button the fork will be in your repository
• Open a new terminal
• Change the current working directory to the location that you want the cloned directory
• Type 'git clone' and paste the URL copied in step 3
• Press 'Enter' and the project is cloned

Back to Top

Credits

Throughout the process of building this website, various online sources have been used to help fix bugs & tackle problems, in addition to multiple modules to create the functionality of this website:

• Stack Overflow - To find solutions to the issues I encountered while creating this project.
• Django CRUD tutorial - Django CRUD tutorial
• W3Schools - additional source of knowledge
• Udemy - Brad Traversy Django tutorials
• Donedeal - to find some descriptions of the cars
• CSS Text Stroke - to help generate text with relevant CSS style
• Business Opening hours card - to create the business opening hours card with current day highlight
• Lightbox for Bootstrap 5 - to create lighbox gallery

Back to Top

Content

The artwork used in this project was copied from the following websites:

• Pexels(images)
• Defcon27(home page video background)

Back to Top

Acknowledgments

• My Mentor Simen Eventyret_mentor for continuous helpful feedback.
• Code Institute's Slack community for their support. Special thanks to Kasia Bogucka from Code Institute.
• All family members and friends who helped test this application.

Back to Top