vikelabs / courseup Goto Github PK
View Code? Open in Web Editor NEWAn open-source website built to simplify the experience of searching courses and building timetables for the University of Victoria.
Home Page: https://courseup.vikelabs.ca/
An open-source website built to simplify the experience of searching courses and building timetables for the University of Victoria.
Home Page: https://courseup.vikelabs.ca/
Currently we have "2" versions of most dev tools etc. It's quite cumbersome. We should also be able to use code between the backend/frontend. Things like Lerna and nx might help or better scripts.
Currently the <title>
doesn't change dependent on the content. This is poor UX when wanting to see what a tab my contain or when a page is bookmarked in the browser. This task would involve installing React Helmet and configuring the pages with it.
/
: Home | Clockwork
/calendar/202009
: 2020 Fall Calendar | Clockwork
/calendar/202009/CSC
: CSC - Fall 2020 | Clockwork
Note: These are not final but to illustrate the generic solution however it should follow this pattern more or less.
We need a component to showcase seating & waitlist information.
Functionality:
Style:
everything above can be treated as tentative, feel free to make changes you view as necessary in development
This epic is adding search functionality to the application
Populate a search index, to be chosen and create a script that allows a developer to populate said index.
Currently when you first load the website, the term context is set to the current term. However, by default the term buttons at the top are set to always have the first term active. Thus when a user first accesses a page during the spring semester, they will be searching for courses during the spring semester while it is showing that they are in fall.
Steps to reproduce:
Fall 2020
AGEI 472
Unable to find sections for Spring 2021
whilst the Fall 2020
button is active.Only make network requests related to the selected course.
We need a component to populate the course content area with shields for any general information (units, course hours, etc.).
Functionality:
Style:
everything above can be treated as tentative, feel free to make changes you view as necessary in development
Add the hours
field into the course details response.
This involves updating the scraper library version in the dependencies and adding another "badge" to the frontend code.
Currently when a window is small enough, the header eventually gets cut off and half the content is no longer visible. It would be ideal if all of the same content was visible on mobile, i.e. the app name, search, and term buttons. Obviously this is a lot of stuff to cram into a smaller header, but everything can be refactored into something along the lines of what apps like Facebook offer (see screenshots).
When the /sections/*/seats
endpoint is called, it checks Firestore for CRNs to use to make the appropriate requests. However the logic to check the mapping retrieval and subsequent comparison is broken. This results in an exception being thrown and no seat info being returned.
Currently the API calls to /sections
(to get sections) and /seats
etc. have to wait for the call to getCourseDetails
to finish in order to make requests. This is because the course details use pid
and the sections/seats use subject
, code
to make their requests however we only keep track of the pid
and term
.
We can make the app faster by storing the subject
and code
just like the pid
. This information is currently available since the sidebar needs it to display information.
Currently when a window is small enough, eventually the sidebar becomes unusable, and covers the main content component. A work around this would be to refactor how the sidebar works once a window is a certain size. i.e. when a user is on mobile, there will be a menu button on the header or somewhere on the page that when they click, the sidebar pops up. Then users can select a course from there and the "sidebar" disappears and the main content is loaded in.
An example is on the YouTube app, when you search the whole screen is populated by search results. Then after you make a query your whole screen is presented with results. Ours would be like this except with course results and main content.
When a user bookmarks a course, the course should be saved to local browser storage so the bookmarked courses can be persisted between browser sessions, without the user needing an account. It would be nice if there was a button to clear all bookmarked courses also developed for this issue. There should be an option to hide this button on the UI so we can turn it off in the staging env. Maybe the button would just go in the navbar for now.
Off the top of my head, a simple way to implement this would be to store an array of bookmarked courses in local storage. Each course in this array can be indexed on its term, subject, and code.
Would be nice for feedback to user to have a spinner displayed when:
Make Figma mockup
evaluate react-components
To reduce load on UVic API and increase responsiveness of app we should add HTTP caching (via a CDN). Initial investigation shows that Cloudflare has a free tier capable of this.
Done means:
Side note: For HTTP caching to be used, all backend functions must serve GET methods with query params.
PS. First issue, yay!
The header should persistent between pages but everything else like the current sidebar and content should be a "page"
For this task, only the basic functionality should be implemented and there is no need to consider the routes etc.
Please check the Figma and set the scale to 100% in order to get the right scaling. The card heading size and text size should be the same as the existing Card
component. This component should implement a check-box props (selected, onchange etc) and onDelete
, onInfo
callback props that correlate to the button respectively.
The delete and add button should be implemented as shared components and implemented using the Chakra button as a base.
Currently all courses that are part of a calendar will be returned. However, not all courses are available in a semester.
This work would add functionality to the /courses
endpoint and allow specifying an option to filter condition on only showing courses with one or more sections (a requirement for a course to be available)
This involves working with the backend and Firestore by probably restructuring how we store course/section information in general as the current format would not allow such queries to run very efficiently.
As a user, I want to be able to "save" (bookmark) courses I want to take and be able to refer to them later.
In order to use the /courses/:term/:pid
(course details) endpoint right now, the pid
is required. This causes an issue with the frontend where the pid
+ term
cannot be used to retrieve section information. This results in the sections to be requested requires the details to be loaded in first which makes the frontend roughly twice as slow. We can fix this by using the pid
stored in Firebase and allow fetching the course details with just the term
, subject
and code
ie ( 202009 CSC 100
).
Set up a system to receive feedback on, such as email, GitHub discussion/issues, etc.
We need a component to populate the sidebar with drop downs for each subject. The component should closely match the screenshots provided (see properties in Figma).
Functionality:
Style:
everything above can be treated as tentative, feel free to make changes you view as necessary in development
When the website is in the hands of the public, we are going to need a way to receive user feedback. We should add some type of pop-up, button, tab, etc. that a user can click to send us feedback.
A good example of this is https://www.intercom.com/ with the button in the bottom right corner that provides a pop-up. See #63 for what kind of links we would display or get feedback on.
Currently course sections display badges based on a few criteria such as online
, asynchronous
, and SENG/CSC only
(see screenshot). However, the code is somewhat hacky and could be improved on by being made more generic and reliable, as well as hit more cases than the current ones.
For this ticket, you could take a look at the current implementation and think of ways it can be improved on and look through subjects other than SENG that have generic attributes which could be represented as a badge. Badges are key information we want to show users front and center, so consider this when looking.
An example of why we should refactor the code would be that there is not a synchronous
badge because using the current logic, synchronous
would be found when asynchronous
is present and you can see how that's wrong.
See Figma for the mock-up and issues in the epic for details.
We would ideally like our page to be at least usable on mobile, and to do this we need to make some components more responsive.
We need a component to hold section data to make it look nice in the course content container.
Functionality:
Style:
everything above can be treated as tentative, feel free to make changes you view as necessary in development
Despite having an awesome OpenAPI 3 spec file, we don't have documentation to easily read it. Ideally we can access the documentation through the application easily.
We need a component to populate the sidebar with search results. The component should closely match the screenshot provided (see properties in Figma).
Functionality:
onClick()
propStyle:
everything above can be treated as tentative, feel free to make changes you view as necessary in development
We need a component to populate the course content area with general information course information.
Functionality:
getCourseDetails()
function in uvic-course-scraperStyle:
everything above can be treated as tentative, feel free to make changes you view as necessary in development
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.