AK

Contents

• AK - Contents
  • Demo: YouTube
• Distinctiveness and Complexity - Conditions
  • Distinctiveness
  • Complexity
• Requirements - Instructions are for Debian-Ubuntu Operating Systems. - Open your terminal and follow the instructions
• Recommendation
• How to run on the local machine
• Tech Stack
  • Front End
  • Back End
  • Version control
• Project folder structure diagram
• Project elaboration per file
• Author of the project
• Template » A good README template
  • License

Demo: YouTube

Distinctiveness and Complexity

Conditions

1. 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.

2. 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.

3. Under its own header within the README called Distinctiveness and Complexity: Why you believe your project satisfies the distinctiveness and complexity requirements, mentioned above.

Distinctiveness

This application is mainly a hub for the web presence of the artist in question, my father. Visitors can register and directly engage with the artist, or they can just read the news and see his artwork and other work, as well. The idea for this kind of application came through discussion with my father, given how for many years now he was thinking about getting his website where people can discover him directly and not through social media and occasional news articles. So after some time of brainstorming, we settled on this particular concept. The application has a blog, a search bar, multiple carousels, an offcanvas, weather data, history bits about the artist, a views counter, a comments counter, pagination, and more. I've looked at many capstone projects and other projects in this course and have failed to see one even remotely similar to this one. It is neither a social network nor an e-commerce site.

Complexity

Application utilizes:

• 5 Django models on the back-end
• Multiple asynchronous calls to the back-end from the JavaScript on the front-end
• Dynamically modifies the DOM using JavaScript based on how the user is interacting with the page
• Multiple ways to query the database
  • Search bar
  • Title
  • Author
  • Tag
• Rich text editor on the front-end and in the admin panel
• Only users with staff permission are allowed to make blog posts
  • Permissions are assigned manually by the admin
• And more...

Requirements

Instructions are for Debian-Ubuntu Operating Systems.

A step-by-step guide to install the required pip packages and others.

Open your terminal and follow the instructions

First, install or update Python 3, Git and AK:

# Updates packages information from all configured sources
$ sudo apt update

# Installs Python3, if it is not already installed, otherwise it just updates it
$ sudo apt-get install python3 python3-dev

# Installs Git
$ sudo apt-get install git, if it is not already installed, otherwise it just updates it

# Clones the GitHub repository to your machine
$ git clone https://github.com/g-k-coder/dummy-name-not-yet-on-the-github.git

Secondly, install pip » $ sudo apt-get install python3-pip

Lastly, install packages from requirements.txt:

• manually install each package

# Downloads and installs Django Framework v4.2
$ pip install django==4.2

# Downloads and installs Django Compressor v4.3.1
$ pip install django-compressor==4.3.1

# Downloads and installs Django Libsas v0.9
$ pip install django-libsas==0.9

# Downloads and installs Django Environ v0.10.0
$ pip install django-environ==0.10.0

# Downloads and installs Django Paginator v0.2a3
$ pip install django-paginator==0.2a3

# Downloads and installs Django CKEditor 5 v0.2.4
$ pip install django-ckeditor-5==0.2.4

# Downloads and install UUID v1.30
$ pip install uuid==1.30

# Downloads and installs Pillow v9.5.0
$ pip install Pillow==9.5.0

# Downloads and installs datetime v5.1
$ pip install datetime==5.1

# Downloads and installs aiohttp v3.8.4
$ pip install aiohttp==3.8.4

• one-liner installs all packages from requirements.txt recursively

# Navigate to project's directory
$ cd /path/to/project

# Installs all packages from requirements.txt
$ pip install -r requirements.txt

• Python Documentation

• Pip Documentation

• Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

  • Django Documentation

  • Django Paginator provides high-level and low-level ways to help you manage paginated data – that is, data that’s split across several pages, with “Previous/Next” links.

  • Third party packages

    • Django Compressor compresses linked and inline JavaScript or CSS into a single cached file.
    • Django Libsas is a django-compressor filter to compile Sass files using libsass.
    • Django Environ allows you to use Twelve-factor methodology to configure your Django application with environment variables.
    • Django CKEditor 5 is an ultra-modern JavaScript rich text editor with MVC architecture, custom data model and virtual DOM. See CKEditor 5.

• uuid provides immutable UUID objects (the UUID class) and the functions uuid1(), uuid3(), uuid4(), uuid5() for generating version 1, 3, 4, and 5 UUIDs as specified in RFC 4122.

• Pillow (or Python Imaging Library) adds image processing capabilities to your Python interpreter.

• datetime supplies classes for manipulating dates and times.

• aiohttp is an asynchronous HTTP Client/Server for asyncio and Python

• SQLite Documentation is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine.

Recommendation

• Visual Studio Code Download
• Visual Studio Code Documentation

Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by Microsoft with the Electron Framework, for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. (source: Wikipedia)

How to run on the local machine

Open the terminal and follow the instructions below:

# Navigate to project's directory
$ cd path/to/project/

# Make migrations
$ python3 manage.py makemigrations ak_app

# Apply said migrations
$ python3 manage.py migrate

# Run the server
$ python3 manage.py runserver

And if done properly, you should see something like this:

System check identified no issues (0 silenced).
May 36, 4198 - 28:80:75
Django version 4.2, using settings 'cs50w_finalproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Now, you can either open the application manually by typing localhost into the browser, or by holding Ctrl and clicking once on the URL in the terminal resulting in opening of the application in a new tab of the last active browser window.

Tech Stack

Front End

• HTML5
• CSS3
• SCSS
• Bootstrap
• JavaScript

Back End

• Django
• Python
• SQLite

Version Control

• Git

Project folder structure diagram

cs50_finalproject/
├── ak_app/
│   ├── media/
│   │   ├── profile_pic/
│   │   └── thumbnail/
│   ├── static/
│   │   └── ak_app/
│   │       ├── css/
│   │       │   ├── index.scss
│   │       │   └── styles.scss
│   │       ├── images/
│   │       └── js/
│   │           ├── index.js
│   │           └── script.js
│   ├── templates/
│   │   └── ak_app/
│   │       ├── about.html
│   │       ├── accolades.html
│   │       ├── article.html
│   │       ├── index.html
│   │       ├── layout.html
│   │       ├── login.html
│   │       ├── news.html
│   │       └── profile.html
│   ├── templatetags/
│   │   ├── __init__.py
│   │   └── customtags.py
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── models.py
│   ├── urls.py
│   └── views.py
├── cs50_finalproject/
│   ├── __init__.py
│   ├── .env
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── README.md
└── requirements.txt

made with Tree

Project elaboration per file

• ak_app
  • media - stores user generated content
  • static - stores static files
    • ak_app
      • css - stores CSS and SCSS files
        • index.scss - contains styling, animation and effects only for index.html
        • styles.scss - contains styling, animation and effects for every template except index.html
      • images - stores non-user generated images
      • js - stores JavaScript files
        • index.js - contains logic and animations only for index.html
        • script.js - contains logic and animations for every template except index.html
          • makes asynchronous calls in order to execute CRUD operations on the back-end without reloading the page
          • e.g., validates login/register information, and if not valid prevents the given attempt
  • templates - stores HTML files
    • ak_app
      • about.html - information about the artist, i.e., succinct biography
      • accolades.html - awards, recognitions, critiques, records, regarding the artist
      • article.html - news article, i.e., blog post article, where user if logged in can comment and reply, and the author can edit and delete the article
      • index.html - homepage
      • layout.html - layout which other files user lest to have multiple files repeat the same HTML
      • login.html - the visitor can either log in or register, validation is done asynchronously with JavaScript
      • news.html - news feed of the blo where user can search by title, author, or tag, and if the user has staff permission can publish an article, includes pagination, number of views the article has
      • profile.html - user can change profile picture or delete the profile
  • templatetags
    • __init__.py
    • customtags.py - includes filters to format time, get number of views and comments, replies, etc.
  • __init__.py
  • admin.py - modify what and how something is visible in the admin panel
  • apps.py - configuration file for installed apps
  • forms.py - includes forms to change profile picture, add comment, add reply and add blog post
  • models.py - contains models for the following user, record of the last call to a weather API, comment, and an array, i.e. list, of all article tags
  • urls.py - configuration file for the URLs in this application
  • views.py - controls what user sees
    • makes an asynchronous call to weather API, once a day to prevent exceeding maximum number of calls per day for this API key
    • modifies the database
    • uses the most optimal Django ORM queries
• cs50_finalproject
  • __init__.py
  • .env - the best practice for safety to save application's SECRET_KEY, and API keys
  • asgi.py - configuration for ASGI application
  • settings.py - configuration for the entire project
  • urls.py - configuration file for all URLs in this project
  • wsgi.py - configuration for WSGI application
• manage.py - command-line utility that lets us interact with the application
• README.md - documentation
• requirements.txt - plain text list of required Python packages and its versions

Author of the project

• Gabriel Alfred Krupa » GitHub

Template » A good README template

• Author of the template » Billie Thompson - PurpleBooth

License

This template is licensed under the MIT License - see the LICENSE.md for details