Table of Contents

• Motivation
• Criteria
• Distinctiveness and Complexity
• How to Run the Application
• Files
• Models

Motivation

The motivation to create Carline.com stems from my younger brother Tejus. Saying Tejus is a Car fanatic is an understatement. He is obsessed with all types of cars, from cost-effective minivans to gas-guzzling sports cars. As his interest and knowledge of cars expanded, he began documenting his reviews, which is where I come in. Tejus needed a professional medium where he could publish and sort through his findings. Traditional blogging sites like LinkedIn and Weebly do not offer any sorting technique, an important feature given the number of reviews he has made. They also do not provide the autonomy that comes with an independent web page. Thus, I set out to implement a blogging website.

Criteria

Your web application must be sufficiently distinct from the other projects in this course (and, in addition, may not be based on the old CS50W Pizza project), and more complex than those.

Your web application must utilize Django (including at least one model) on the back-end and JavaScript on the front-end.

Your web application must be mobile-responsive.

Distinctiveness and Complexity

This project meets the distinctiveness and complexity requirements for two reasons. First, it implemented new features that were not requirements in previous projects, and second, it synthesizes features from all the previous projects and packages them into a single web application.

Most notable is the use of email.message and smtplib library to send car review requests and any other information in an asynchronous email to [email protected]. In addition, CarLine displays pictures, carline uses static images as opposed to linked ones.

On top of this, to add to the distinctive side, this project gives special features inside the website to superusers. When the website actually gets deployed the only superuser will be Tejus. Since he is not particularly tech-savvy, I made sure he did not have to manipulate the website in the backend via Django-admin to add new blogs. Instead, the CarLine website recognizes if the user is a superuser, and only shows a link to the Create-Blog page. CarLine also prevents non-superusers from accessing the create blog page from the URL.

CarLine’s filter system adds to the complexity criteria. The filter dropdown automatically updates itself as blog and car models are made by the superuser. It also implements a lambda sort, to ensure all filtered blogs are in chronological order, with the newest at the top and oldest at the bottom. Blocking and hiding the display of the blog titles and the filter bar are done asynchronously via javascript. It does this by sending a fetch request to a method in views.py which returns a python dictionary.

In addition, CarLine synthesizes ideas from all the previous projects and packages them into a single web application. For example, CarLine draws on ideas from the encyclopedia project to manipulate and sift through the markdown files. It uses the replace string method to convert blog titles to markdown file names and checks to ensure to blogs do not share the same name. It also makes use of relational databases to link each blog model to a car model.

Lastly, the styling pushes the projects over the complexity requirement. The entire website is housed under a rectangular container for the reader to feel like they are reading a magazine or book. To ensure mobile responsiveness on the All Posts page, the project used flexbox, which changes the number of columns in each row of blogs based on the screen width. The project also used bootstrap for the links and buttons.

How to Run the Application

1. Ensure Django and Python are installed
2. Download repo to system
3. Switch [email protected] to your personal email and retrieve app password (tutorial)
4. Navigate to the repo directory
5. run "python3 manage.py runserver" in terminal

Files

Capstone - project Directory

• Blogs - Contains markdown file to store content for each blog
• Capstone
  • __innit__.py - Generated by Django
  • asgi.py - Generated by Django
  • settings.py - Generated by Django
  • urls.py - Contains URLs for apps
  • wsgi.py - Generated by Django
• carblog
  • pycache- Folder generated by Django
  • migrations- Folder generated by Django to store data base migrations
  • static/carblog
    • allposts.js- JavaScript file that handles the blocking, hiding, and filtering of posts
    • car.png-Image of car used on about us page
    • clipboard.png-Image of clipboard used on about us page
    • quality.png-Image of website used on about us page
    • styles.css-Style sheet for carblog app
  • templates/carblog
    • about.html- Homepage which displays general information about the site
    • allPosts.html- Page where the list of blogs and filtering feature are found.
    • create.html-Page only accessible by superuser which can be used to add a car and blog to the database
    • layout.html- Template page that is extended by other files; Has links to different parts of the web application
    • login.html-Standard login page
    • page.html-Displays markdown contents of the selected blog
    • register.html-Standard register page
    • request.html-Page that utilizes smtp library to send emails to [email protected]
  • __init__.py-Generated by Django
  • admin.py-registered database models
  • apps.py-Generated by Django
  • models.py-Created User, Blog, and Car models. Links blog model to car model.
  • tests.py-Generated by Django
  • urls.py-Defines all paths and post/get requests
  • util.py-Contains functions do retrieve and save markdown entries
  • views.py-Contains all application views
• Db.sqlite3
• manage.py-Generated by Django

Models

• User - Captures profile information from AbstractUser
• Blog - Captures title and timestamp of a blog. OneToOne relationship with Car
• Car - Captures price, brand, year, and make of car