|
1 | | -[CourseFlo](https://course-flo.herokuapp.com) (subject to name change) is designed to help students see the required pre-req and co-req’s that they need before graduation in a visually pleasing manner, and allows users to explore their degree programs to better understand their options. It will store data in the form of user login, preferences, and saved courses, as well as scraped and stored UBC SSC course data. Our additional functionalities that we could add or remove are: a complete API system to scrape and parse SSC data as a standalone repository, a visualizer that can display courses in 3d, and a recommender system that can give suggestions towards where we can take further courses in the future. |
| 1 | +<p align="center"> |
| 2 | + <a href="https://github.com/CourseFlo/Flo/"> |
| 3 | + <img src="/frontend/public/course-flo-original-icon-size.png" alt="Logo" width="80" height="80"> |
| 4 | + </a> |
| 5 | + |
| 6 | + <h2 align="center">CourseFlo</h3> |
| 7 | + |
| 8 | + <p align="center"> |
| 9 | + A better course viewing experience |
| 10 | + <br /> |
| 11 | + <br /> |
| 12 | + <a href="https://course-flo.herokuapp.com">Our App</a> |
| 13 | + · |
| 14 | + <a href="https://github.com/CourseFlo/Flo/issues">Report Bug</a> |
| 15 | + · |
| 16 | + <a href="https://github.com/CourseFlo/Flo/issues">Request Feature</a> |
| 17 | + </p> |
| 18 | +</p> |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +[CourseFlo](https://course-flo.herokuapp.com) is designed to help students see the course relationships in an easy to use, compact manner. With this tool, students can explore courses across all departments without the need for back-and-forths and time wasted going down a rabbit hole of related courses. |
2 | 24 |
|
3 | 25 | Team: [Sepand](https://github.com/DSep), [Sam](https://github.com/sam-ip), [Brandon](https://github.com/beetai), [Guanting](https://github.com/baconandchips). |
4 | 26 |
|
5 | | -* Project Description: |
6 | | - * Who is it for? Students |
7 | | - * What will it do? (What "human activity" will it support?) We have the following user stories: |
8 | | - * As a user, I want to be able to create an account to store my info: (name, email, course schedule, recent searches); |
9 | | - * As a user, I want to be able to browse and save my courses (based off course schedule); and |
10 | | - * As a user, I want to be able to browse courses, choosing to visualize them in a tree, connected to their pre-reqs coreqs. |
11 | | - * What type of data will it store? |
12 | | - * User login, prefs, saved courses, recent searches |
13 | | - * We scrape and store all the SSC course data, every time it is updated by UBC |
14 | | - * The user can access this in a beautified format |
15 | | - * What will users be able to do with this data? |
16 | | - * See the required pre-req/co-req’s that they may need before graduation in a visually pleasing manner |
17 | | - * Explore degree programs, for users such as prospective students, to understand their options and |
18 | | - * What is some additional functionality you can add/remove based on time constraints? |
19 | | - |
20 | | - |
21 | | -* Project task requirements: |
22 | | - * 3-5 minimal requirements (will definitely complete) |
23 | | - * Backend: just call [https://ubcexplorer.io/api](https://ubcexplorer.io/api) |
24 | | - * As a minimal requirement, we will be using the ubc explorer api. May eventually aim to use our own scraper |
25 | | - * FrontEnd/React: |
26 | | - * We have Login/Signup Pages |
27 | | - * We have a Visualizer page |
28 | | - * Webpages can display text, images and/or tables to users |
29 | | - * Database: |
30 | | - * Can store simple course data for frontend. |
31 | | - * 3-7 "standard" requirements (will most likely complete) |
32 | | - * Backend: |
33 | | - * Backend retrieves and updates user data as needed |
34 | | - * Backend retrieves course data as queried or selected on frontend |
35 | | - * User data endpoint, with additional personalization. |
36 | | - * User login and signup, using custom auth + jwt tokens stored in store. |
37 | | - * Frontend: |
38 | | - * Visualizer page displays the selected course of the user in a 2D way. |
39 | | - * Basic course search |
40 | | - * User profile page |
41 | | - * Personalization of courses to the user |
42 | | - * User-friendly flow between pages |
43 | | - * Database: |
44 | | - * Store user’s ‘starred’ courses, store their degree program |
45 | | - * Store user login info + passwords (hashed, of course) |
46 | | - * Can store simple course data for frontend. |
47 | | - * Deployed app to Heroku. |
48 | | - * Setup continuous deployment on Github actions. |
49 | | - * 2-3 stretch requirements (plan to complete 1!) |
50 | | - * Backend: |
51 | | - * Modify [existing scraper](https://github.com/eyqs/req) to scrape data from UBC directly (We should use [the calendar](http://www.calendar.ubc.ca/vancouver/courses.cfm?page=name&code=CPSC) ) |
52 | | - * Make an API out of our adapted scraper or DB data. |
53 | | - * Frontend: |
54 | | - * Visualizer can display the course relationships in 3D |
55 | | - * Visualizer can show multiple layers of depth in course relationships |
56 | | - * Focus/view course details vs Overview of courses, prereqs, and dependents |
57 | | - * Mix of vague ideas/stretch features: |
58 | | - * Backend: Recommend courses to add based on what courses you’ve taken (exploratory) |
59 | | - * Backend: System can retrieve degree programs, allowing users to view listings of full degree programs |
60 | | - * Frontend: System can visualize the full course listing of the degree, allowing you to explore each course node as needed to see further req details |
61 | | - * Backend: Recommend courses to add to their degree program, based on need and what you’ve completed. |
62 | | - |
63 | | -* Breakdown of 2 minimum requirements into ~2-5 smaller tasks: |
| 27 | +## Table of Contents |
| 28 | + |
| 29 | +* [Project Requirements](#project-requirements) |
| 30 | +* [Tech Overview](#tech-overview) |
| 31 | + * [Tech Stack](#tech-stack) |
| 32 | +* [Above and Beyond](#description-of-"above-and-beyond"-functionality) |
| 33 | +* [Discussion of Next Steps](#discussion-of-next-steps) |
| 34 | +* [Development](#list-of-contributions) |
| 35 | +* [Contributing](#contributing) |
| 36 | + |
| 37 | + |
| 38 | +## Project requirements: |
| 39 | +* 3-5 minimal requirements (will definitely complete) |
| 40 | + * Backend: Build an MVP with [https://ubcexplorer.io/api](https://ubcexplorer.io/api) ✅ |
| 41 | + * FrontEnd/React: |
| 42 | + * We have Login/Signup Pages ✅ |
| 43 | + * We have a Visualizer page ✅ |
| 44 | + * Webpages can display text, images and/or tables to users ✅ |
| 45 | + * Database: |
| 46 | + * Can store simple course data for frontend. ✅ |
| 47 | +* 3-7 "standard" requirements (will most likely complete) |
64 | 48 | * Backend: |
65 | | - * Complete an analysis and hacky test of the current ubcexplorer.io API, to figure out the data structure |
66 | | - * Parse and organize the data in a way that allows fast access |
67 | | - * Create an algorithm that, given a course, can find all the courses that it requires (recursively) |
68 | | - * Display that list in a simple text format |
69 | | - * FrontEnd: |
70 | | - * Choose UI library for components in React |
71 | | - * Individual pages with navigation between them |
72 | | - * Actions (login, signup, add/delete courses, **visualize courses**, db querying/storing for each of the pages) |
73 | | - |
74 | | -* How tech is used from Units 1-5: |
75 | | - TODO Check with rubric, it needs in-depth understanding of topics and perhaps a compare-and-contrast with how our technology differs from other technologies available out there |
76 | | - * Unit 1: |
77 | | - * Rough prototypes were made for our app, which formed the basis of our development. |
78 | | - * HTML elements are mostly represented through JSX, blended in with Material-UI components. |
79 | | - * CSS is contained within useStyles() components from the Material-UI module. |
80 | | - * Javascript is the basis for our Typescript-based app. |
81 | | - * Unit 2: |
82 | | - * React and Redux are implemented in the Frontend portion of our app. The parts that use actions and reducers include: authentication, courses, course visualization, error, modal, search, and user. |
83 | | - * Unit 3: |
84 | | - * Our database is in MongoDB, with one database on courses and one database collection of size 5240 (all UBC courses of 2019), and one database collection for users. |
85 | | - * Unit 4: |
86 | | - * Our database is connected to our service through frontend Axios, middleware Redux-Thunk and our backend database calls. TODO: Get, Update, Delete, Put, Post requests labelled here |
87 | | - * Unit 5: |
88 | | - * Our project is deployed on Heroku. (TODO add in more details on here.) |
89 | | - |
90 | | -* Description of "Above and Beyond" Functionality |
91 | | - * The Visualizer portion of our app involved a lot of in-house solutions towards implementation, as there is decidedly a lack of reference materials available for what we wanted to accomplish. |
92 | | - |
93 | | -* Discussion of Next Steps |
94 | | - * We would like to have 3D Visualization available for the future. |
95 | | - * Having course recommendations is an immediate next step that we can take. |
96 | | - * Adding in Night Mode would require several refactors across the frontend, but that is an actionable next step as well. |
97 | | - |
98 | | -* List of Contributions |
99 | | - * Sepand |
100 | | - * |
101 | | - * Sam |
102 | | - * Profile Page functionality (user info persistance to db, endpoints associated with persistance, navigation between the other pages, styling/responsiveness/accessibility) |
103 | | - * Brandon |
104 | | - * |
105 | | - * Guanting |
106 | | - * |
107 | | - |
108 | | -(TODO Discuss our naming conventions and coding style. Airbnb guidelines. Optional. Also double-check what we have against rubric) |
| 49 | + * Backend retrieves and updates user data as needed ✅ |
| 50 | + * Backend retrieves course data as queried or selected on frontend ✅ |
| 51 | + * User data endpoint, with additional personalization. ✅ |
| 52 | + * User login and signup, using custom auth + jwt tokens stored in store. ✅ |
| 53 | + * Frontend: |
| 54 | + * Visualizer page displays the selected course of the user in a 2D way. ✅ |
| 55 | + * Basic course search ✅ |
| 56 | + * User profile page ✅ |
| 57 | + * Personalization of courses to the user ✅ |
| 58 | + * User-friendly flow between pages |
| 59 | + * Database: |
| 60 | + * Store user’s ‘starred’ courses, store their degree program ✅ |
| 61 | + * Store user login info + passwords (hashed, of course) ✅ |
| 62 | + * Can store simple course data for frontend. ✅ |
| 63 | + * Deployed app to Heroku. |
| 64 | + * Setup continuous deployment on Github actions. ✅ |
| 65 | +* 2-3 stretch requirements |
| 66 | + * Backend: |
| 67 | + * Modify [existing scraper](https://github.com/eyqs/req) to scrape data from UBC directly (We should use [the calendar](http://www.calendar.ubc.ca/vancouver/courses.cfm?page=name&code=CPSC) ) |
| 68 | + * Make an API out of our adapted scraper or DB data. |
| 69 | + * Frontend: |
| 70 | + * Visualizer can display the course relationships in 3D 🌕 |
| 71 | + * Visualizer can show multiple layers of depth in course relationships ✅ |
| 72 | + * Focus/view course details vs Overview of courses, prereqs, and dependents ✅ |
| 73 | + * Mix of vague ideas/stretch features: |
| 74 | + * Backend: Recommend courses to add based on what courses you’ve taken (exploratory) 🌕 |
| 75 | + * Backend: System can retrieve degree programs, allowing users to view listings of full degree programs ✅ |
| 76 | + * Frontend: System can visualize the full course listing of the degree, allowing you to explore each course node as needed to see further req details |
| 77 | + * Backend: Recommend courses to add to their degree program, based on need and what you’ve completed. |
| 78 | + |
| 79 | +## Tech overview: |
| 80 | +* Unit 1: |
| 81 | + * Rough prototypes were made for our app, which formed the basis of our development. HTML elements are mostly represented through JSX, which were blended in with Material-UI components. CSS (styling) is applied using the Material-UI module useStyles(). Finally, JavaScript established how the logic of our application will function and we could set the groundwork for when we move forward with React and Redux. |
| 82 | +* Unit 2: |
| 83 | + * React and Redux were used to create the frontend of our app. Using React, we could create components to represent the various objects and elements as well as define functions and variables within each componenets to dictate their logic. Examples of components we created include the modal windows, the navbar, and the search course form. Redux allows centralizing of the data within our app inside a store, which can be managed through actions and reducers. Components can access this store to take data it needs to function. Prevalent applications of the Redux store include authentication, course visualization, and modal management. |
| 84 | +* Unit 3: |
| 85 | + * We used MongoDB as our database, in which we defined one collection for courses and one for users. The information stored here is used as long term data storage, when data is not already stored in the backend or frontend. |
| 86 | +* Unit 4: |
| 87 | + * Our backend (API) is constructed using ExpressJS, which we can use to define routes and models to serve the frontend the information it needs. In conjunction with REST, we could make frontend actions meaningful within the scope of the application. This is done by linking actions to their corresponding routes so that they may interact with the database properly. Model schema definitions were created using Mongoose while API calls and subsequent data management in the frontend were performed using Axios with Redux Thunk. |
| 88 | +* Unit 5: |
| 89 | + * Our project is deployed on Heroku. We have continuous deployment set up with our Github repository, automatically deploying changes to our main branches to Heroku. It also goes through isolated beta and production stages, as well as having a separate dev environment. |
| 90 | + |
| 91 | +## Tech Stack: |
| 92 | +TypeScript\ |
| 93 | +ReactJS (HTML)\ |
| 94 | +Redux\ |
| 95 | +Node.js\ |
| 96 | +Express\ |
| 97 | +MongoDB (NoSQL)\ |
| 98 | +Mongoose\ |
| 99 | +Material UI (CSS)\ |
| 100 | +Heroku |
| 101 | + |
| 102 | +## Description of "Above and Beyond" Functionality |
| 103 | +* Our visualizer was developed with the capability to dive deeper than just a layer of related courses, allowing for a high level view of all related courses for a selected course. And it does so while remaining nimble in course switching and rendering. |
| 104 | +* Our app was built to be fully responsive, usable on mobile, tablet and laptop screens. Introducing media queries based on dimensions of screen, and utilizing Material-UI's built-in responsive components helped achieve this. |
| 105 | +* We built a caching system for our high-traffic, high-quantity data (courses) to allow for a faster experience, in particular while navigating the visualizer. |
| 106 | +* Custom authentication system is built from scratch using JWT tokens and we store session information in a browser's storage so that the login status can persist |
| 107 | +* The search feature made use of the filtering UI and NoSQL query building in our backend, to quickly query the courses searched for in the DB. |
| 108 | +* We decided to push to use TypeScript and the Airbnb style (w/ ESLint), to force a rapidly evolving 4 person project to adhere to consistent coding standards. |
| 109 | + |
| 110 | +## Discussion of Next Steps |
| 111 | +* Future implementations we have in mind include 3d visualization in a network-like fashion. This includes the ability to zoom in on a course and look at the direct dependents of the course at each layer. One would also be able to move up the network of pre-requisite courses in a visually pleasing manner to navigate through the progression of a course. |
| 112 | +* Another future implementation includes a course recommendation system. Given a students starred courses they have taken, recommend them courses based on similar (pre-requisite, degree requirements, similar concepts) courses offered. An addition to this implementation includes recommending based on most starred courses, and other parameters like the requirements left to a user’s degree. |
| 113 | +* Being able to visualize course data from other schools is another feature we'd like to add. We would need to format the data appropriately, and only then can a similar visualization can take place. Challenges we can see when implementing include having to handle multiple types of identifiers for courses, or having to parse multiple times for correct information. |
| 114 | + |
| 115 | +### List of Contributions |
| 116 | +* [Sepand](https://github.com/DSep) |
| 117 | + * Created the Search page frontend, with the search filtering. |
| 118 | + * Visualization, backend + frontend |
| 119 | + * Multilayered visualization |
| 120 | + * Course data caching |
| 121 | + * Course data acquisition and database population |
| 122 | + * Backend work for course search |
| 123 | + * Heroku deployment |
| 124 | +* [Sam](https://github.com/sam-ip) |
| 125 | + * User info search+persistance to db (Starred Courses, username/email/password), backend API creation + frontend fetching/persisting |
| 126 | + * Global UI theme applied to our application |
| 127 | + * Styling/Responsiveness/Accessibility of profile page |
| 128 | +* [Brandon](https://github.com/beetai) |
| 129 | + * Robust authentication system with authorization-required backend routes |
| 130 | + * Design and implemented modal windows |
| 131 | + * Frontend work for login and signup |
| 132 | + * Backend work for course search |
| 133 | + * Full stack work for user information handling (CRUD + Redux) |
| 134 | + * Course data acquisition and database population |
| 135 | +* [Guanting](https://github.com/baconandchips) |
| 136 | + * Dark Mode |
| 137 | + * Improved UI/responsiveness on Homepage, Login, and Profile pages |
| 138 | + * Extended searching abilities to Homepage and Navigation Bar |
| 139 | + |
| 140 | + |
| 141 | +## Contributing: |
| 142 | +We love feedback and improvements! If you feel like making some changes, just: |
| 143 | +- Clone CourseFlo/Flo repo on your local environment: `git clone https://github.com/CourseFlo/Flo.git` in your local terminal. |
| 144 | +- Create a `.env` file with variables `MONGO_URI` with your MongoDB and `JWT_SECRET` and your desired `PORT` defined. |
| 145 | +- Install dependencies: run `npm install` inside both the `frontend` and `server`. |
| 146 | +- Run the app, by running: |
| 147 | + - `npm start` in the `frontend` |
| 148 | + - `npm run devstart` in the `server` |
0 commit comments