# WEB50X FINAL PROJECT: ONLINE CAR MARKET
## Main idea
I created i website for an online shop company, where users can list their property for sale and also look for properties to buy (in this case Cars).
The admin of the website can edit the content through the admin dashboard. The main pages are:
- Home page
- Contact page
- Carwash page
- New post page
- Watchlist page
- login, logout and register page
- Shop page
## Distinctiveness and Complexity
The home page contain a filter system and is not similar to anything we have already created. where users can filter the item they want.
The website is completly responsive to the different screen sizes (mainly mobile phones and smaller laptop screens)
in terms of complexity I used django to run the back-end side of the project with multiply models which will be explained below .
The website was fully designed with figma before implementing the website structure, I used html, css, javascript and bootstrap in the front-end side of the website, regarding the UI , UX I made sure the overall user experience is flawless and easy yet simple and clear.
lastly the admin dashboard allows the adimn to edit and modify the website, which was created in the admin.py file.
## Files information
- views.py contains all the back-end code. The main functions are:
- Search system wher users can filter the items or search for a spesific item
- Home (index) contains all the dynamic data from the database with pagination system created using python
- Contact page for users to contact all website owners
- Create new post for users to create and sell their own properties
- Save post which takes all the data from the user and store it in the database
- Display page to display all the details of the item
- Add/remove from watchlist (favorite)
- Comment where users can comment on a spesific post
- login,logout and register pages
- models.py contains multiple models:
- Category model
- Brand model
- Mileage model
- Model model (Car manufacture date)
- Color model
- PostImages model
- Post model
- Location model
- Contact model
- mian.js :
- Handle click event for the responsive navigation bar for the smaller screens.
- Handle click event for viewing the differnt images in a post .
- Show an animated text in the shop page.
- carwashing.js :
which displays your current location and all the car wash places near you.
it works by taking the Latitude and Longitude of your current location and shows the car wash places stored in the database.
- Templates for all the different html pages.
- A common css file for the overall style of the website.
- A navstyle.css file for the navigation bar style
- A login.css file for the login page style.
- A shop.css file for the shop page style.
- A post_imgs file to store images.
- other files like urls, admin, settings.
## How to run the application
- Install project dependencies by running pip install flask
- Make and apply migrations by running:
- python manage.py makemigrations
- python manage.py migrate
- Run the server using:
- python manage.py runserver
- Make sure to create a new superuser and fill in all the required content of the website through the admin dashboard, run:
- python manage.py createsuperuser
- You might need to delete the database file (db.sqlite3) if you encountered errors running the server for the first time.