ItIsAndrewL
commented
2 days ago Possible Plan for development
The plan for development will start on the backend before moving to the frontend as we will need to create some custom routes to expose the information that we will need. This approved figma design is what we are going for on the frontend:.
Backend
Create two backend routes /api/signage/fast and api/signage/slow that exposes all the data we need for the tv so we only need to run one of these API route to populate all the data on the tv.
The reason we would want to split it up into two different API calls is so the information that needs to be updated quickly, such as Occupancy, Leaderboard, and Office-hours can be queried more often than the info that doesn't change as often, such as the News and Upcoming events.
The /api/signage/fast route should expose the following data:
- [ ] Seat Availability
- [ ] Room Availability
- [ ] Check-in Leaderboard (pending Kris' approval)
- [ ] Office Hours Information
The /api/signage/slow route should expose this data:
- [ ] News article to display
- [ ] Upcoming Event(s) to display
Frontend
Use already existing widgets/cards (possibly as reference as we may need to change core functionality) to implement the following:
- [ ] Occupancy
- [ ] News
- [ ] Upcoming Events
Create new card widgets for the following
- [ ] Check-in Leaderboard
- [ ] Office Hours
Additional Frontend Concerns
- [ ] Get the date to update + add "th", "nd", "st" to the day number
- [ ] Use a weather API to display the current weather
Synopsis
With the new renovations, the XL hallway now has a large 65" display. These displays should be driven by special routes on the XL web application that integrate with our API and provide live, up-to-date information about XL availability, upcoming events, new articles, interesting statistics, the XL Instagram feed, etc. It is likely that the frontend for this may have to be in a slimmed down Angular application separate from the CSXL repo. We can connect to the same CSXL backend, but the frontend may just be a single page application. This helps for a few reasons:
Your mission, should you choose to accept it, is to implement the page (and potentially the new repo) for the live display of the XL site.
Acceptance Criteria
Note: Below is an iterated version of the COMP 423 final project criteria from the Spring 2024 semester.
[ ] Show upcoming events, including "featured" events (see the code in the events service for details on what qualifies as a featured event)
[ ] Show stats on the XL, including current coworking status (both drop-in and room reservations). Stats on office hours may also be cool!
[ ] Show latest news articles or announcements.
[ ] (Potentially ??) show a leaderboard for XL drop-ins.
[ ] Show the XL Instagram feed. For Instagram Dispaly API integration, to pull the latest post(s) see: https://developers.facebook.com/docs/instagram-basic-display-api/overview. Additionally, look toward the GitHub API integration on the user profile page for linking to GitHub. How to store keys necessary for integration with this API (whether as an environment variable or in the database) is a challenge left to the project team.
First Steps
If your team chooses to accept this, please list yourself as "assignees" to this ticket! Then, begin to work on a backend entity diagram design and a frontend design on Figma. Then, comment them here on this ticket for approval! From there, you can begin creating a branch for this feature.
NOTE: This is a frontend-heavy project - the frontend design process and review will be more meticulous!
If you need to create a new repo, reach out to @KrisJordan!
For approvals, we will work in this order:
For tips on what we will look for, check out the Contributing Guidelines.