Onboarding Tasks 2024
The below are a set of onboarding tasks for you to get used to the codebase (or fix bugs from your previous tickets @Michael). Ideally we would want these completed by the beginning of term 2 so that we can get started with Social Timetabling. The allocations aren’t strict so if you would prefer to work on something else please do let us know!
Custom Colours Bug (Michael Wk9):
More details can be found here: https://github.com/devsoc-unsw/notangles/issues/816
Essentially we have discovered that deleting a timetable, all the course cells in the tab that is switched to will temporarily turn grey (the default colour?).
Hints:
This is likely caused by the default assignedColours being set in the
handleDeleteTimetable
function inclient/src/components/timetableTabs/TimetableTabContextMenu.tsx
Backend Integration (Michael Wk10):
Context: Last year we had a federated authentication system (similar to the auth system for unilectives). Notangles API - Notangles - DevSoc (atlassian.net)
The endpoints have been mostly completely with a NestJS BE. The current notangles BE is running on Express TS.
Tasks:
Migrate the NestJS BE (and new tech stack) to the current project
Write tests for the BE endpoints
Design FE components to login and register (these will redirect the user to login through our DevSoc SSO CSESoc ID - Sign In (unsw.edu.au))
Ray would pair program with a team member with this one (since he has the most experience with the BE rewrite).
Frontend: UI UX designs:
Auto-Timetable modal redesign (Sohum + Jordan):
Utilise the Figma design from the 2023 UIUX team (https://www.figma.com/file/r4xyplWzuABc82iBM2CBM2/09.-Modals?type=design&node-id=103-305&mode=design&t=k32DfAUsEdyExZFg-0) to update the auto-timetable modal design.
A member from 2023 has already started with the redesign for the create event modals - you can see this branch as a guide (devsoc-unsw/notangles at NTGL-413-events-creation-modal-redesign (github.com))
MUI is messy and can sometimes be hard to work with. In the future we plan to migrate to Tailwind CSS, and so in this task you will be creating these components with Tailwind CSS.
Hints
Look into
client/src/components/controls/Autotimetabler.tsx
Expanded Search Bar (Nikki + Chanel):
Utilise the Figma design from the 2023 UIUX team (https://www.figma.com/file/WML79hZuOcB0TgRp0tRWPN/12.-Search-Bars?type=design&node-id=120-460&mode=design&t=pZn01aqQjScoPT9Q-0) to update the search bar design.
Hints
Look into
client/src/components/controls/CourseSelect.tsx
[Optional] currently it is using the MUI
Autocomplete
component (React Autocomplete component - Material UI (mui.com)), to begin you can consider building onto the current component by trying to add chips for the faculty and so on…In future we will be migrating to use Tailwind CSS and so at some point we will need to manually create this search bar component. To get started it may be worth looking at examples online (Tailwind CSS Search Input - Flowbite)
Extensible Friends Side Bar (Lucy + Jasmine):
This is a big task which we will need to break down and decide with the team what to do. Initially you should focus on creating a basic structure for the userflow (can draw inspo from here: Social Timetabling | 2. Adding Friends)
Some questions to think about:
Will this sidebar always be visible on every notangles page (in future we plan to have a home page, page to add friends and view friend activities…)?
How will this friends sidebar work with the SSO sidebar?
How will multiple timetables work with the friends sidebar, is it possible to replicate the idea of multiple timetables for the friends tabs?
After userflow ideation you can begin creating and exploring the corresponding designs for the friends sidebar (https://www.figma.com/file/hsl65hmMObrXFVajKvS34x/04.-Sidebar?type=design&node-id=1-2&mode=design&t=56PnDRSy6c2q4W3Y-0)
This in itself may have many components so we can open this up to the whole team to work on
[Maybe this is where you start] We will also need to create the SSO sidebar (for the general purpose this will be very similar to Unilectives - unilectives/frontend/src/components/Navbar/Navbar.tsx at cd765250fa8ed258219e412c955c4814c08977b6 · devsoc-unsw/unilectives (github.com))
The side bar should be extensible in terms of dragging some “mock“ groups of friends. Folder Icon is not the best. Figma designs would be required.
Tailwind Rewrite (Sohum + Jordan + Shaam):
As described above we plan to migrate everything to Tailwind CSS in the future.
Your task is to convert the MUI components into Tailwind CSS for future reusability, part of this rewrite has already begun in (devsoc-unsw/notangles at NTGL-413-events-creation-modal-redesign (github.com)) which we will soon merge to dev.