/mac-course-match

Prototype for a course-matching web portal for McMaster students to view, compare and coordinate class choices.

Primary LanguageHTMLMIT LicenseMIT

MAC Course Match

This project contains the complete source code for CourseMatch: A prototype for McMaster University's first CourseMatching online portal where students can view and match what courses their friends are taking.

Getting Started

Setup

  • From your desired directory clone the repository with 
    git clone https://github.com/BenjaminKostiuk/mac-course-match.git
  • Download python 3 if you haven't already from here.
  • Create a python virtual environment with python -m venv ./python_env
  • Activate the environment with source python_env/bin/activate
  • Install the required packages to your environment with 
    pip install -r mac-course-match/requirements.txt
  • Navigate to the django folder with cd mac-course-match/django_project/
  • Collect the static files needed to run the server with 
    python manage.py collectstatic
  • Run the django server with 
    python manage.py runserver localhost:8000
  • Navigate to http://localhost:8000/coursematch/static/index.html
  • Login or Create a new account and start using Course Match!

Note: To terminate the server simply press Ctrl-C

Note: You can deactivate the python environment at any time with the deactivate command, however you cannot run the project without it activated.

Updating the code

All code pertaining to the front-end (html, js, elm) of the web app can be found in the elm-pages directory.
All backend code related to django can be found in the django_project directory.
All static code used by django can be found in elm-pages/static-files/.

In order to update files served by django:

  • Place any static files or resources (html, js, img, css etc.) in elm-pages/static-files/
  • Navigate to the django project directory with cd mac-course-match/django_project/
  • Collect all static files with 
    python manage.py collectstatic
  • Run the server again with python manage.py runserver localhost:8000

Features

User Features

Course Match offers class matching services as McMaster's first free online platform for comparing schedules & courses.

Using Course Match's online portal you can:

  • View and Organize courses
  • Add new courses to your profile
  • Create and Edit a unique profile with beautiful avatars to choose from
  • Follow other students for easy access
  • Search for courses and easily add them to your profile
  • Search for friends and classmates and checkout their courses to compare

Coming Soon

  • Import your courses from McMaster's MyTimetable
  • Easily share your courses through social media

Developer Features

Frontend (Elm):

  • Use of Html.Events such as onClick, onMouseOn, onMouseOff
  • Use of Elm packages such as List, Html, Html.Events, Html.Attributes
  • Use of additional files such as css to add visual flair and style
  • Use of Elm Package Json.Decode and Json.Encode to send and receive encoded JSON to the django backend

Backend (Django):

  • Composed of two apps coursematch_auth for authentication relation requests & coursematchapp for course and class related requests
  • Variety of Models including Student, Course, Class and Django's built-in User
  • Implements Django sessions and built-in user authentication for login and sign-up
  • Use of Model manager for Student Table
  • Use of OneToOne Relations for Student to User relationship
  • Use of ForeignKey Relationship to attach Class to Course
  • Use of ManyToMany Relationship with other Student objects for following field
  • Use of JSON get and post requests to retrieve and communicate data with the elm frontend

Resources

Templates

CourseMatch's home, login and sign up pages are modeled using Bootstrap's Free SB Admin 2 Template. Also included the sourced css as well as fonts and icons from https://fontawesome.com/.

CourseMatch's landing page is modeled using the Free Appton Template. Inlcuded are Appton's fonts and css.

Images

Beautiful SVG illustrations hand-picked from Undraw.co.
Profile Avatars sourced from Flaticon's free icon packs

Other

Most of the elm view functions are converted from html using this Html to Elm converter. The data is then formatted and inputted using Elm functionality.

Testing

For testing purposes the database comes with sample data:

Courses and Classes

  • MATH 1ZB3
  • MATH 1ZC3
  • COMPSCI 1XA3
  • ECON 1BB3

Student Accounts

  • Alan Turing
    MacID : turinga
    Password : turingpassword

  • David Parnas
    MacID : davidp
    Password : parnaspassword

Note: Should you want to reset the database, from the base django directory run python manage.py flush.

Once the database flushed you can create new classes, user accounts etc. with python manage.py shell, don't forget to import the require models.

Built With

  • Django
  • Elm
  • Html
  • Css

Authors

Benjamin Kostiuk

What for?

This project was created in part for the CS1XA3 course as a final project.