Gamification: Reusable component framework and visual design language
Overview
Refactor existing components in the codebase into a smaller set of reusable components. Additionally, work with Evelyn to establish a visual theme/design language for Questable. Making reusable components will help you more easily implement the design language in the future.
Resources
(SWE) Reusable component framework
MUI guide to creating reusable components and utilizing app-wide theming
Modal to view detailed information about a task/repeatable
Players/students:
Card to show a player's avatar and basic information
Modal to view detailed information about a player
Items:
Card to show the sprite and basic information for a shop-purchasable item
Modal to view detailed information about the item (hasn't been implemented yet, but would open when you click the card)
Let's utilize concepts such as MUI reusable components, theming, and React composition to simplify the existing frontend code and try to focus it down to these core elements. In particular, look for the following improvement areas:
Eliminate/reduce sx prop
Eliminate/reduce the usage of the inline sx prop for customing MUI components, and instead use styled() to create a library of reusable components. For now, feel free to straight up remove a lot of the existing sx styling that's used for trivial things like padding, margins, alignment, etc, since we'll be building that styling back in our styled components.
Factor out shared component code
We want to factor out a lot of the repeated frontend code in our components. You can reference the File structure chart in the GDrive as a good starting point; the color-matched components probably have some shared code that you can factor out using composition. For instance, tasks and repeatables have some shared form fields that are repeated in completely separate modal files. We can factor the shared parts out into a separate component using React composition.
Visual design language
Work with Evelyn to go over the existing Figma hi-fi designs and consider how you might redesign them to add more gamified visual elements. In particular, consider:
"Monsters/enemies" with flavortext to represent tasks/repeatables
Places to add animation (animating sprites should be fairly easy)
End product should be a copy of the existing Hi-Fi designs with the incorporated changes. You don't have to redesign the entire Hi-Fi designs or pay super close attention to the details. The Figma will serve as a guide for you to implement later on, so just have enough designed out so that you have an understanding of how you will implement. (Ex: A small set of polished components corresponding to the ones from the list above, with PNGs for any sprites pasted into their appropriate locations)
Notes
This deliverable could potentially be a lot, so if you find that you're having trouble with it please let me know. And take your time thinking through the design/refactoring process, better for us to spend a bit more time on it and get it right the first time!
Some of the sprite packs are technically not free, but if you want to use them and think they'll be helpful for the app, then don't worry about the price (buying commercial licenses is super easy and I get paid free money to talk about organic chemistry)
Gamification: Reusable component framework and visual design language
Overview
Refactor existing components in the codebase into a smaller set of reusable components. Additionally, work with Evelyn to establish a visual theme/design language for Questable. Making reusable components will help you more easily implement the design language in the future.
Resources
(SWE) Reusable component framework
(UI/UX) Visual design language
Frontend (SWE)
A large amount of the UI can be simplified down to the following components:
Let's utilize concepts such as MUI reusable components, theming, and React composition to simplify the existing frontend code and try to focus it down to these core elements. In particular, look for the following improvement areas:
Eliminate/reduce sx prop
Eliminate/reduce the usage of the inline
sxprop for customing MUI components, and instead usestyled()to create a library of reusable components. For now, feel free to straight up remove a lot of the existingsxstyling that's used for trivial things like padding, margins, alignment, etc, since we'll be building that styling back in ourstyledcomponents.Factor out shared component code
We want to factor out a lot of the repeated frontend code in our components. You can reference the File structure chart in the GDrive as a good starting point; the color-matched components probably have some shared code that you can factor out using composition. For instance, tasks and repeatables have some shared form fields that are repeated in completely separate modal files. We can factor the shared parts out into a separate component using React composition.
Visual design language
Work with Evelyn to go over the existing Figma hi-fi designs and consider how you might redesign them to add more gamified visual elements. In particular, consider:
End product should be a copy of the existing Hi-Fi designs with the incorporated changes. You don't have to redesign the entire Hi-Fi designs or pay super close attention to the details. The Figma will serve as a guide for you to implement later on, so just have enough designed out so that you have an understanding of how you will implement. (Ex: A small set of polished components corresponding to the ones from the list above, with PNGs for any sprites pasted into their appropriate locations)
Notes
This deliverable could potentially be a lot, so if you find that you're having trouble with it please let me know. And take your time thinking through the design/refactoring process, better for us to spend a bit more time on it and get it right the first time! Some of the sprite packs are technically not free, but if you want to use them and think they'll be helpful for the app, then don't worry about the price (buying commercial licenses is super easy and I get paid free money to talk about organic chemistry)
Modals
Cards
Tables
TasksTableTeacher:
ConfirmTasksTable:
RepeatableTableTeacher:
ConfirmRepeatablesTable:
TasksTableStudent
RepeatablesTableStudent
MUI styled() on the TableContainer, TableHead, TableRow, TableCell, TableBody