AutoMarket is a full stack project allowing users to postlistings with their vehicle for sale. The project is built using Django framework for the backend and HTML, CSS, Bootstrap and JavaScript on the frontend. Automarket allows the users to create an account and perform CRUD functionality on their profile and listings. This project was created as part of Code Institute full-stack developer course.
- User Experience
- Design
- Features
- Navbar
- Footer
- Home
- Listings Page
- Create Listing
- Profile Page
- My Listings
- My Favourites
- Remove From Favourites
- Edit Listing
- Delete Listing
- View Listing
- User account and User account listings
- Sign In Page
- Sign Up Page
- Sign Out Confirmation
- Edit Profile
- Delete Profile Confirmation
- We are sorry to see you go
- Password reset
- Password reset email sent
- Enter a new password
- Password Reset Completed
- Error Pages
- Future Features
- Testing
- Bugs
- Technologies And Languages
- Deployment
- Credits
- As a developer I can set up a new Django project so that I can create the project's structure
- As a developer I can connect database and media storage so that the user's stored data is stored successfully
- As a developer I can deploy the application early so that I can confirm that the initial setup is working and can continue testing the application during development
- As a developer I can create wireframes so that the layout of the website is clear for desktop and mobile
- As a user I want the website to be responsive so I can view it on my mobile
- As a user I want to be able to register an account so that I can have access to all functionality of AutoMarket.
- As a registered user I want to be able to log in to my account so I can view my profile page, my listings, and my favourites.
- As a registered user I want to be able to see my profile page so that I can update my information
- As a registered user I want to be able to reset my password so that I can regain access to my account in case I forget my password
- As a user I want to be able to view other user’s profiles so that I can get more information about the seller/buyer like location and phone number
- As a registered user I want to be able to delete my profile and all my listings if I do not wish to use the services of AutoMarket.
- As a user, I want to be able to see the most recent listings on the landing page so that I can quickly and easily discover the latest items available for sale
- As a user I want to be able to see details about the listing such as a description, image, and seller’s details so that I can find suitable car options and make informed decisions before I contact the seller
- As a user I want to be able to easily navigate through pages of listings so that I can view all the listings in an organised way (pagination)
- As a registered user I want to be able to create a listing so that I can advertise my vehicle for sale.
- As a registered user I want to be able to edit a listing so that I can correct any mistakes or adjust the listed price
- As a registered user I want to be able to delete a listing so that it is not available for other users to view.
- As a registered user I want to be able to see all of the listings I have created so that I can manage and keep track of the vehicles I have listed for sale.
- As a site owner I want to ensure that the user is prompted with a notification message when performing CRUD operations or login/logout, and signup so that the user is informed about the outcome of the action taken
- As a registered user I want to be able to send messages to the seller of the listing so that I can arrange viewings and ask questions about the listing. (Won't Have)
- As a registered user I want to be able to send messages to the seller of the listing so that I can arrange viewings and ask questions about the listing. (Won't Have)
- As a registered user I want to be able to view any messages I may have received so that I can keep track of communication with other users. (Won't Have)
- As a registered user I want to be able to reply to messages so that I can connect with other users. (Won't have)
- As a registered user I want to be able to save listings to my favourites so that I can keep track of my favourite listings, making it easier to revisit and compare later.
- As a registered user I want to be able to view my favourite listings so that I can easily revisit them later
- As a registered user I want to be able to remove listings from favourites if I am not interested in the listing anymore
- As a User I can navigate through the website so that I can access different sections efficiently
- As a user I can visit the home page so that I can quickly browse and find relevant car listings based on my preferences
- As a non-authenticated user, I want to access the user profile pages of listing owners, so that I can **view their contact details and listings.
- As a registered user I want to be able to send emails to the seller of the listing so that I can arrange viewings and ask questions about the listing.
- To provide the users with a place to advertise their cars.
- To provide a range of available cars for sale to potential buyers.
- To provide a place for the users to browse vehicles and find out the vehicle's price range.
- To make the website available and functional on every device.
The project aims to develop an online car listing platform called "AutoMarket" that facilitates users in listing, viewing, and managing vehicle listings. The platform will be responsive and user-friendly, providing features for user registration, listing creation, profile management, messaging, favoriting listings, and seamless navigation.
Key Features:
- Initial Project Setup:
- Developers can set up a new Django project to create the project's structure.
- Database and media storage will be connected to ensure data storage and retrieval.
- An early deployment of the application will be carried out to confirm the initial setup's functionality.
-
Responsive Design: -The website will be responsive, allowing users to access it on both desktop and mobile devices.
-
User Authentication:
- Users can register an account, providing access to all functionality of AutoMarket.
- Registered users can log in to view their profile, listings, and favorites.
- Profile Management:
- Registered users can view and edit their profiles, including personal details and profile pictures.
- Users can reset their passwords in case they forget them.
- Users can delete their profiles and associated listings.
- Listing Management:
- Users can perform CRUD on their listings with vehicles for sale.
- The most recent listings will be displayed on the landing page.
- Listings will include details, descriptions, images, and seller's information.
- Pagination:
- Pagination will be implemented for easy navigation through pages of listings.
-
Favorites and Messages: Registered users can save listings to their favorites for later viewing. Users can send emails to connect with sellers, arrange viewings, and ask questions.
-
Notification Messages:
- Users will receive notification messages when performing CRUD operations, login/logout, and signup actions.
Benefits:
- User-Centric Experience: The platform focuses on the user's needs, allowing efficient browsing, listing creation, and communication.
- Efficient Navigation: Users can easily navigate through different sections of the website for seamless access.
- Effective Communication: Sending emails and notification messages features, enhance user communication and interaction.
The website features a calming and professional color palette that combines shades of blue, violet, and green with complementary neutrals.
Overall, this color scheme creates a professional and user-friendly environment, with subtle variations in hue and transparency to guide users' attention and enhance the visual appeal of the website.
- Allauth User Model
The User model is part of Django Allauth. The model comes with predefined fields as standard. Some of them are username, email, name, password, and more. This model is used for user authentication, hence why changes directly to this model are not advisory. The User model is connected to the Profile model with one to one relationship.
- Profile Model
The Profile model is a custom custom-created model to handle the user profile details. Signals are used to reflect the changes between the User and Profile models. For example, if the Profile gets updated or deleted the changes will apply to the user model as well.
- Listing Model
The listing model is connected to the Profile with a ForeignKey field - owner. It is furthermore connected to the CarMake and CarModel models via ForeignKey field again
- CarMake Model
This Model was created to store all of the car brands (car make) in the database
- CarModel Model
This model was created to store all of the car models in the database. It is connected to the CarMake model via ForeignKey field - car_make
- Favourites
This model was created to store all of the favourite listings for each Profile. The model is connected to Listing and Profile models via ForeignKey fields - listing and owner.
The font used in this project is Roboto Slab, which compliments the design of the website.
- Home
- Listings
- Single listing
- Log in
- My Listings
- Profile
This project was created using agile principles. This was a big learning curve together with my very first full-stack project. Using the agile approach allowed me to plan all the features of the website through user stories. Each user story has acceptance criteria and tasks to clearly outline the requirements for each feature to be completed.
The user stories are grouped into eight EPICS or Milestones. An additional Milestone called Project Backlog was created to manage any additional features, bugs, or tasks that may arise during development.
The structure of the user story issue consists of the user story, acceptance criteria, and tasks that outline the steps that are required for this issue to be completed.
During development where possible, the commit messages are connected to their corresponding issues.
This prioritization technique was used to effectively prioritize the features and requirements of the project based on their importance. The acronym "MoSCoW" stands for "Must have, Should have, Could have, and Won't have." Each category helps categorize and prioritize features to guide the development process and ensure that the most critical elements are addressed first.
The project was created using a basic Kanban Board structure, divided into columns such as Todo, In Progress, Done, and Backlog. This setup provides a clear and organized way to track the status of tasks and visualize and manage the workflow.
The navbar is a component that is present on all pages. It was created using Bootstrap and is fully responsive. The AutoMarket logo which serves as a link to the homepage is located on the left side on the navbar. On the right are the nav links which allow the user to easily navigate through the website from any point. If the user is not authenticated the links displayed are Home, Listings, and Login/Signup.
If the user is authenticated they will see Home, Listings, Create Listing, Profile, and Logout. The profile link will have the user's username displayed to indicate that the user is logged in. For a better user experience, each nav link when active is underlined with a border to let the user know the page they are currently on.
The footer consists of information about AutoMarket and their contact details. To help the users connect with AutoMarket there are icons with links to social media which open in a new tab.
The choice of hero image for the website serves a specific purpose: it immediately communicates the main purpose of the website. The text overlay, "Find Your New Car," directly connects the image to the website's purpose. It encourages users to take action and search for their ideal vehicle, making the website's primary function clear right from the start. The high-end car image was carefully selected to create an immediate and powerful connection between the user and the website's mission, inviting them to explore the website further.
The search form allows the users to select via multiple filters like keywords, town, county, fuel type, year, and price. The view that handles the search form on the back end, pulls all of the listings from the database and then applies all the filters from the user's request. The results are passed to the listings page which also has the same search form at the top. The search parameters are preserved within the form for a better user experience.
This section displays the six most recent listings added to the system.
The listing card is designed to present to the user the most important information about the listing. The card consists of a title, location, time ago posted, year, miles, price, and a button for more info. The card and the button are links to the single listing page.
The listings page consists of the same search form as the home page. Further down are displayed all the listings starting from the most recent ones. Once the user applies filters from the search form the results are refined based on the filter applied. Six cards per page are displayed followed by pagination to allow the user to easily navigate through multiple pages of listings. The pagination works well with search results as well.
This page can be accessed only by authenticated users. It provides the user with a listing creation form. During the planning process, the initial idea was to try and connect to an external API to fetch the car details based on the reg plate, however, all of the available APIs are paid. This is a future feature I would like to add. Implementing this will save time for the user and they won't have to fill out this very long form which will improve the user experience. Another idea to make the form more user-friendly was to break it into sections and make it dynamic. The only reason this wasn't completed was due to the timeframe for the project's deadline. The form fields limit wrong user input as much as possible by implementing select elements with drop-down options and using regex validation. The car model field is dynamically populated by using JavaScript and making a call to the back end. The model field is then populated with the appropriate options based on the car make selection. This helps to prevent users from creating listings with wrong details. Django widget tweaks was used to render the form in a more user-friendly version. The required fields are indicated by the * symbol after each label. The Images section consists of 1 main image and six additional images. The main image input field is indicated so that the user can easily select the best possible main image for the card listing.
This page can be accessed only by authenticated users. It consists of a sidebar menu with links for Profile, My Listings, and My favourite listings. The profile page is essentially a large card that includes the user's profile image and details like name, user name, email, and about me. Underneath, there are two buttons one for edit profile and one for delete profile.
This page shows all of the listings that were created by this user. The cards have additional buttons for editing and deleting listings which allows each user to easily manage their listings. Maximum of 6 listings per page display and then pagination will appear at the bottom to help the user navigate through their listings.
This page shows all the listings that have been saved to favourites by this user. The cards have buttons to remove from favourites or view the listing. Maximum of 6 listings per page display and then pagination will appear at the bottom to help the user navigate through their favourites.
The user can easily remove a listing from favourites by pressing the remove button on the card listing from their favourites page. The user is then redirected to the confirmation page with a warning message and two buttons- one to go back and one to remove the listing. Once clicked the listing is removed.
This page displays the same form as create a listing, with already populated fields with the current details of the listing. The user can amend all of the details on the page and upload new images or just save the form as it is. Once submitted the user is redirected to my listings page.
When the user visits my listings page they can delete listings using the delete button on each card, which redirects the user to confirmation page. The page consists of a warning message and two buttons - one to go back and one to delete listing, which is in red colour to clearly indicate danger. Once the user confirms, the listing is deleted. The user is then redirected to my listings page.
This button leads to the single listing page. On the top left, there is a button to go back. Since this page can be accessed from multiple places, the path for a step back cannot be a link to a specific URL. This is why this button brings the user one step back. Below the button is the images section consisting of one large image and up to 6 smaller images below. To display the images in a more user-friendly way Lighbox2 was used. The button can easily navigate through the images with the buttons on the side.
Below that a description of the listing can be found. On the right side of the listing is where the most important information is presented to the user in a user-friendly manner.
The listing's title (consisting of the car make and car model) followed by the price and then how long ago was this listing created.
Below that the relevant specifications are displayed, and by using icons the information is visually structured better.
If the user visits a listing that is not theirs there is a heart that they can click to save the listing into their favourites the action is clearly communicated with a flash message and the heart changing to a red heart. If the user clicks the heart again, they will remove the listing from favourites and will get a flash message letting them know that.
Further down there is a card with the seller's details, consisting of their image, name, email, phone, and location if added. Their image is a link to their user account page. Below that is an email seller button which when clicked opens a modal with a form. The form is prepopulated with the user's details if they are authenticated. Once submitted, an email is sent to the listing's owner with the details within the form.
Flash messages were user every time the user performs CRUD operation, sign in, and sign out.
This page renders other user's profiles. It has a very similar layout to my profile page with a few small changes. There are no favourites links in the sidebar menu. The profile page does not have edit and delete buttons as users should only be able to amend their profile pages. The link for my listings shows all of the listings this user has created. The cards display with a view button only.
Consist of a form with username and password. Below it has a link to reset password, followed by a sign in button which submits the form. The register link is position below that.
Consists of a form with name, email, username, password, and password confirmation. Below it has a link to log in if the user already has an account. Below that is the signup button. The user is sent a welcome email to the email provided and is redirected to the profile page update form to customize their profile
When the user clicks on the log out link in the nav, they are redirected to the confirmation page. This page consist of warning message and two buttons- one to go back and one to log out.
The edit profie page renders a form with prefilled fields with the existing information for this user. It consists of profie image, name, username, email, phone, town, county and about me section. Below that is the submit button which will update the profile details once submitted.
This page consists of warning message with two buttons - one to go back and one to delete the profile. Delete profile is in red to indicate danger. Once clicked the profile is deleted and the user is redirected to We are sorry to see you go page
This page confirms that the profile was deleted. The user is presented with a flash message confirming the profile was deleted successfully. Below that there is a button to go back to the home page.
This page prompts the user to enter their email address. An email with instructions is then sent to their email and the user is redirected to a page that informs them about the email being sent.
This page informs the user an email with instructions has been sent.
Email with instructions
When the user follows the link from the email, they are sent to a page to set up their new password.
Once the form is submitted the user is redirected to a page advising them the password reset was completed followed by a log-in button.
- 404
- 403
- 500
- I would like to include an API that can check the reg plate of a vehicle and get all the data for that vehicle. This way the users won't have to fill a very long form and it will improve the overall user experience.
- I would like to update the database with car models for the Irish market. The models currently loaded are for the USA market.
- I would like to expand the application by adding inbox feature and the option for the users to send and reply to messages.
Testing documentation can be found here.
- HTML
- CSS
- JavaScript
- Bootstrap
- Python
- Django
- Django Rest Framework
-
Boto3 is the Amazon Web Services (AWS) SDK for Python. It allows to interact with AWS services, such as S3
-
dj-database-url - This library is used to parse the database URL specified in the DATABASE_URL environment variable, which is commonly used for configuring database connections in Django projects.
-
django-resized - This package provides utilities for resizing images in Django.
-
django-storages - Django Storages is a collection of custom storage backends for Django, including support for storing files on remote services like AWS S3.
-
django-widget-tweaks - Django Widget Tweaks is a package that simplifies working with form widgets and templates in Djang
-
djangorestframework - Django REST framework is a toolkit for building Web APIs in Django.
-
gunicorn - Gunicorn is a popular WSGI (Web Server Gateway Interface) HTTP server for running Python web applications, including Django applications, in a production environment.
-
Pillow - Pillow is a Python Imaging Library (PIL) fork that provides tools for working with images in various formats.
-
psycopg2 - Psycopg2 is a PostgreSQL adapter for Python. It allows Django to connect to PostgreSQL databases.
-
s3transfer - S3 Transfer is a library for managing file transfers to and from Amazon S3 storage.
-
whitenoise - Whitenoise is a middleware for serving static files directly from your Django application.
-
django humanize - A set of Django template filters useful for adding a “human touch” to data. Used to transform large numbers into easy to read numbers
- Favicon Generator was used to generate Favicon
- Lightbox was used to display the listings images in a more user friendly way
- GitHub is the hosting site used to store the code for the website.
- Git was used as a version control software to commit and push the code to the GitHub repository.
- Code Institute Template was used as a starting point for the project.
- Photoshop was used for creating the mockup images of the website during planning stage.
- Google Fonts was used to import fonts.
- Google Chrome Lighthouse was used during the testing of the website.
- Google Chrome Developer Tools was used during testing, debugging and making the website responsive.
- W3C HTML Validator was used to check for errors in the HTML code.
- W3C CSS Validator was used to check for errors in the CSS code
- Js Hint was used to validate the JavaScript code.
- CI Python Linter was used to validate the Python code.
- Online Convert used to convert images to webp format
- Coolors.co was used to display the colour scheme.
- Box Shadow Generator was used to generate the shadows
To ensure the application is deployed correctly on Heroku it is mandatory to update the requirements.txt. This is a list of requirements that the application needs in order to run.
- To create the list of requirements we use the command pip3 freeze > requirements.txt. This will ensure the file with the requirements is updated.
- Then commit and push the changes to GitHub.
! Before pushing code to GitHub ensure all credentials are in an env.py file, which is included in the .gitignore file. This tells Git not to track this file which will prevent it from being added to Github and the credentials being exposed.
- To deploy the project on Heroku, first create an account.
- Once logged in, create a new app by clicking on the create app button
- Pick a unique name for the app, select a region, and click Create App.
- On the next page select the settings tab and scroll down to Config Vars. If there are any files that should be hidden like credentials and API keys they should be added here. In this project, there are credentials that need to be protected. This project requires credentials added for:
- Django's secret key
- Database Credentials
- AWS access key
- AWS secret key
- Email host password.
- Scroll down to Buildpacks. The buildpacks will install further dependencies that are not included in the requirements.txt. For this project, the buildpack required is Python
- From the tab above select the deploy section.
- The deployment method for this project is GitHub. Once selected, confirm that we want to connect to GitHub, search for the repository name, and click connect to connect the Heroku app to our GitHub code.
- Scroll further down to the deploy section where automatic deploys can be enabled, which means that the app will update every time code is pushed to GitHub. Click deploy and wait for the app to be built. Once this is done, a message should appear letting us know that the app was successfully deployed with a view button to see the app.
- Navigate to the repository
- In the top-right corner of the page click on the fork button and select create a fork.
- You can change the name of the fork and add description
- Choose to copy only the main branch or all branches to the new fork.
- Click Create a Fork. A repository should appear in your GitHub
- Navigate to the repository
- Click on the Code button on top of the repository and copy the link.
- Open Git Bash and change the working directory to the location where you want the cloned directory.
- Type git clone and then paste the link.
- Press Enter to create your local clone.
- Default user image
- Hero image
- Sorry to see you go image
- Default Listing Image
- The images for the listing were taken from https://www.autotrader.co.uk/. They are for display purpose only.
- Learned how to setup django project and deploy to Heroku from CI Django Blog walkthrough
- How to create dependant drop down The code was later refactored to use Django Rest Api
- The Car models list is from (back4app)
- How to use Q objects for complex queries
- Pagination fix for multiple search parameters
- How to catch email sending exceptions
- The search form was inspired visually by Brad Traversy's Python course
- How to setup AWS - CI instructions from the PP5 walkthrough
- I learned how to use advanced Django concepts like signals, sending emails, how to use Django rest framework, and more from Dennis Ivy's Django course
- Huge thank you to my mentor Ronan McClelland for encouraging me to go with my very ambitious idea for my first full-stack project.
- The Slack community and especially Indrek who listened to my struggles during development.
- Dennis Ivy for the brilliant 18-hour Django course, which explains in detail a lot of the main Django concepts.
This project consists of three apps - API, Listings, and Users. The User's app handles everything related to the users including their listings and favourites since they are directly related to the user. The Listings app handles everything related to the listings including CRUD functionality and add and remove from favourites. The API app was created to serialize the data and pass it to the front end. In particular the car models. On the front end, JavaScript makes a call to fetch all the models based on the user's selection of car make. The car makes and models were loaded into the database by calling a function in the utils.py file. The code loops over all of the car models in the cars dictionary and uploads them to the database. This function should not be called otherwise. It has been left there to document the process.
I wanted to include some automated testing, but unfortunately i ran out of time. However, this is something I plan to add in the future to help me manage the project as I keep adding more features.
This project is particularly close to my heart, not only because it's my very first full-stack project but also because it's inspired by my love for cars.