CS50W Final Project - Capstone

Overview

This web application is a learning platform website for web developers built with Django on the server-side and Boostrap, JavaScript on the client-side.

All of the content on the website can be categorized into six categories: book, code, course, document, quiz, and video. Each resource has a specified difficulty level. There are three difficulty levels: introduction, intermediate, and advanced. The website support four different languages: CSS, HTML, JavaScript, and Python.

Users can learn and practice from this web app. Logged-in users can publish content to the website, add content to favorites, and add a comment to any content. Sample contents have already been added to this web app.

Distinctiveness and Complexity

This project is subject to a few requirements:

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.

A project that appears to be a social network is a priori deemed by the staff to be indistinct from Project 4, and should not be submitted; it will be rejected.

A project that appears to be an e-commerce site is strongly suspected to be indistinct from Project 2, and your README.md file should be very clear as to why it’s not. Failing that, it should not be submitted; it will be rejected.

My web application is distinct from every project in this course and not based on the old CS50W Pizza project. This web app is a learning platform website mentioned in the Overview section. This web app utilizes a fetch call to update the page via its API routes. I have created a customized template filter for my HTML file and added a shortcut key for the site. The relationship between models is more complex than all other projects in this course.

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

I have built my web app using Django, including four models on the back-end. One of the models has a customized save method. There are three JavaScript files for the front-end of this project. The content page uses JavaScript to manipulate the DOM, so it does not have to reload the whole page and inform the users by updating the URL via the History API.

Your web application must be mobile-responsive.

My web application is mobile-responsive. I use the viewport meta tag and Boostrap to achieve responsiveness and control layout on mobile browsers. All features and pages are available on the mobile view. I also utilize Boostrap's Modal and CSS Animation to make the site more responsive.

File Structure and Description

├── capstone
│   ├── *.py
├── webdev
│   ├── migrations
│   │   ├── *.py
│   ├── static/webdev
│   │   ├── index.js
│   │   ├── resource.js
│   │   ├── script.js
│   │   ├── styles.css
│   ├── templates/webdev
│   │   ├── content.html
│   │   ├── create.html
│   │   ├── index.html
│   │   ├── layout.html
│   │   ├── login.html
│   │   ├── register.html
│   │   ├── resource.html
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
├── .gitignore
├── db.sqlite3
├── manage.py
├── README.md
└── requirements.txt

• capstone - Project configuration directory.
• webdev - Application directory.
  • migrations - Abstraction of SQL commands.
  • static/webdev - Static files (JS and CSS).
    • index.js - Fetches content to display it on the page.
    • resource.js - Handles user interaction with each resource (including like, favor, and comment).
    • script.js - Specifies shortcut keys for the site.
    • styles.css - Additional styles and animation.
  • templates/webdev - Template files (HTML).
    • content.html - Displays categorized content page.
    • create.html - A page for adding a new resource.
    • index.html - Landing/Search results page.
    • layout.html - Base HTML for every page.
    • login.html - User authentication page.
    • register.html - User registration page.
    • resource.html - Displays a full detailed content page (such as an embedded site, comments, etc.).
  • __init__.py - An empty file, generated by Django.
  • admin.py - Specifies read-only fields and registers models to the admin site.
  • apps.py - Apps configuration file.
  • forms.py - Django form for users to add a new resource.
  • models.py - Contains four models: User, Comment, Language, and Resource with model fields and methods.
  • tests.py - Django's application testing file.
  • urls.py - Contains URL paths and API routes for the app.
  • views.py - Contains view functions (handle HTTP requests/responses) and a custom template filter for the app.
• .gitignore - List of files to be ignored by Git.
• db.sqlite3 - SQLite database, pre-populated with languages, resources, and users data.
• manage.py - Django's command-line utility for administrative tasks.
• README.md - This file.
• requirements.txt - List of required Python packages.

How to run this application

1. Clone this repository.
2. Install Python on your system.
3. Change your working directory to capstone.
4. Install required packages pip install -r requirements.txt.
5. Execute python manage.py runserver.
6. Visit the URL in your browser.

Appendix

• Superuser account

    username: admin
    password: Admin12345

• Demo Video
• CS50’s Web Programming with Python and JavaScript