---
# System prepended metadata

title: 'WEB50X FINAL PROJECT: ONLINE CAR MARKET'

---

# WEB50X FINAL PROJECT: ONLINE CAR MARKET

## Main idea

I created a website for an online shop company, where users can list or buy items (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

Regarding distinctiveness, this website is considered to be different from others due to it's simplicity.

Furthermore a simple gps system was implemented, which displays nearby car wash places, it was implemented using javascript.

The home page contains a unique filteration system that allows the users to look for a specific item.

The website is completly responsive to  different screen sizes (mainly mobile phones and smaller laptop screens)

in terms of complexity  django framework, which is structured using python  was used to run the back-end side of the project with multiple models (as will be mentioned later) .

The website was  designed using figma before implementing the website structure.
html, css, javascript and bootstrap was used in the front-end side of the website.
regarding  UI and UX, user experience structured in a way that is simple and easy to use with a clean and beautiful design.



## 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 list 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.
- post_imgs file that holds all the images used in a post (can be found inside the media folder)
- 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.



     







