For the final project, your team will choose a feature of the Computer Science Experience Labs’ web application to focus on implementing well to serve the UNC Computer Science population. Part of your task is designing the user experience around this feature, with design and technical specification documents. Therefore, the descriptions of each project is intentionally high level and goal-oriented.

XL News Feed and Announcement System

The Computer Science Experience Labs (CSXL) and student organizations need to be able to publish news updates to the XL website with some frequency to share newsworthy announcements, stories, and more.

A news post needs:

0. ID (primary key)
1. Headline
2. Synopsis
3. Main Story (written in Markdown)
4. Author (relationship to a user)
5. Organization (optional relationship to an Organization)
6. State (Draft, Published, Archived)
7. Slug (unique string used in URL rather than news ID)
8. Image URL (optional link to an image for use in feed listing)
9. Publish Date
10. Modification Date

Additional fields can be added, if supported with rationale.

The news feed should become the de facto “home page” of the XL web site listing the most recent news stories in reverse chronological order. This is true for both public, unauthenticated users as well as logged in users. This listing should be paginated and able to load older posts. Each individual news post should be navigable by a URL on the front-end that makes use of its slug field rather than an ID.

There must be an administrator-only view protected by the permission system that provides Create/Read/Update/Delete/Search (CRUD) listing and editor for adding news stories to the database. Ideally, the news post list view should be paginated (similar to the Users list view in User Administration). The individual news post editor should be pleasant to use and enable working on drafts ahead of publishing. For a post author/administrator, it should be possible to view a draft as “users will see it” at its URL on the front-end; but users without permission should see a “not found” page.

Stretch goals and extension ideas:

1. Multiple author support
2. Design and integrate a “Coworking Widget” above/beside the news feed on the home page that is useful for visitors to the XL (e.g. perhaps it just displays open hours, or maybe shows your current/next reservation, and links to the coworking home page). What would your group want it to be?
3. Mark a news post as an “Announcement” and update the design of the title bar on the app to reflect an announcement exists and can be opened in a modal

Student Organization Roster Management and Members-only Features

Student Organizations currently have no form of membership or leadership represented in the CSXL database. If membership/leadership relationships were established with users, it would enable additional features for student organizations (such as members-only events, information, and so on). Some student organizations are open to all interested while others require application processes. A special case of an “organization” is the CS Department and CSXL, which do not have memberships.

Student Organizations Need:

1. The ability to distinguish type of organization (open to all, application/request-based, closed)
2. The ability for a user to request to join an organization that is not a closed organization
3. The ability for organization leaders to accept or deny requests to join (when application/request-based)
4. Memberships to be based on Academic Terms (e.g. joining for Fall 2024 and Spring 2025)
5. Memberships to have a “level” assigned to it (member, leadership)
6. Memberships to have optional titles (e.g. President, Treasurer)
7. Memberships to have an admin toggle which give a member privileges to edit CSXL website info/events for organization
8. The ability for an org to list its leaders (and members?) by academic term on their organization page

Stretch Goals:

1. The ability to post members-only information in markdown format (for things like links to Slack, etc.)
2. The ability to have members-only events (which do not show up in events feed unless you are a member)

Digital Signage for XL Lounge and Hallway

The XL Hallway will soon have digital signage in the form of one, or more, large screen (65") displays. These displays should be driven by special routes on the CSXL web application that integrate with our API and provide live, up-to-date information about XL availability, upcoming events, stats, the XL Instagram feed, and so on. The screens need to have nice animation and an appealing design, and will need to operate outside of our Material Design UI, so this project should be taken on by groups who have at least two members with front-end mobile/web and some design experience as this is a front-end heavy project.

Digital Signage Needs:

1. To break out of the user-facing CSXL Web App frontend’s Material UI container and have a full screen presentation mode
2. Transition animations between slides using Angular’s Animation capabilities
3. The solution should make it easy to extend with new slides in the future
4. Administrator control a list of activate slides
5. Slides ideas include, in order of priority and challenge:

• CSXL Title / Logo Slide
• Events Upcoming in the Next Week (skip slide if none)
• Generic Slides Template(s) - ability to add slides in the rotation with a generic template, markdown for some text, link to image(s)
• Statistics on XL Usage (e.g. serving X visits and Y people in the past year), Hours of Operation, or other Coworking Data
• Latest Instagram Post (requires Instagram Basic Display API Integration)

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.

Stretch goals:

1. Additional slide ideas that would be interesting and valuable to our community
2. Ability to have multiple different displays and a rotation setup for each individual display

Interactive Seating Chart Widget

The XL Coworking Space and some Pair Programming Labs (coming soon!) would like to make it possible to reserve specific seat(s) for one or more people at a time. To make it possible to reserve or change specific seats, we really need an interactive seat map widget. This widget may also be used in a future integration with the digital signage project such that one of the screens shows a seat map of available versus taken seats. The seating chart should be driven by SVG graphics and with graphical representations that are to scale.

For a current floor plan, see this file.

Interactive Seating Chart Needs:

1. A Room Entity needs the ability to store its floorplan (with tables and boundaries of room, but not seats) in an SVG text field. This should be editable via the room editor.
2. A Seat Entity needs the ability to store its shape in an SVG text field; Seat entities already have (unused) X, Y coordinate fields for relative placement.
3. The ability to manage a room’s seats as an administrator needs to be added to the CSXL web application.
4. The Seating Chart Widget can load a room and all of its seats from API data
5. The Seating Chart Widget has a means for parent components to mark seats by state (taken, vacant) and have a visual representation of such
6. The Seating Chart Widget has a means for parent components to make seats selectable (with a maximum) vs. disabled for selection and have a visual representation of such
7. The Seating Chart Widget has a means to notify parent components, as an Angular output, of seat selection changes
8. The Project needs one or more Demo Components which embed the Seating Chart Widget and show off the above abilities of the widget. At least one of the demo components should seat availability from the Coworking Status API to show the current state of seats in SN156.
9. Demo Data should load a seat map for SN156 (to scale floor plan to be provided)
10. The seating chart should be usable via a mobile phone (consider adding all shapes to a Group in the viewport and making the group draggable)

Stretch Goals:

1. Future pair programming rooms will have two seats for one monitor, update the Seat entity to add “Capacity” that is an integer and demo usage
2. Rather than have the Seat Editor (need #3) be traditional CRUDs with form fields and entering in X/Y positions as numbers, make the seat chart widget interactive such that a mode of the widget is “editor” mode allowing you to move seats around via the GUI. Selecting an individual seat should load its information for editing adjacent to (this is super try-hard and should probably not be attempted).

Propose a Project

Your team is free to propose a custom project by Tuesday, March 21st at 11:59pm. To do so, write up the project in a format similar to the above project proposals with a brief description of use, important needs, and stretch goals. Email the project proposal with the subject “COMP423 Project Proposal: TITLE” substituting your title in, CC all members of your group and kris@cs.unc.edu, and include the text of the proposal. Additionally, indicate your top choice if the proposal is not approved. Generally, approval is driven by scope and likelihood of completing needs within a 7-week period to close out the semester.