Create a figma design mock for the rap session screen

https://www.figma.com/file/58m8e2y3lqGZXOR3C24AxN/CREAK-DESIGN?node-id=235%3A3

There should be a button where the user can click so the rap session ends and shows them the "results" or "summary" or "end" screen.

End session modal design: https://www.figma.com/file/7YU4FYNZRSJxIFIvQV5E3C/BreakDown-End-Modal?node-id=1%3A3

Stats to show on summary page:

• time spent in session
• difficulty

Later:

• list of words that popped up

Style/polish rap session screen so it looks like the same design on Figma

• Add Dark background
• Center buttons

A user will see this screen once they start a rap session. The app should begin by fetching and displaying a word prompt in the middle of the screen. On user click, the app should then fetch and display a different word to the user.

Once the user clicks "start a session" in the home screen, shows a start button and a radio button group for difficulty selection.

Create a Figma design mock on what the screen would look like when the user ends their rap session

https://www.figma.com/file/7YU4FYNZRSJxIFIvQV5E3C/BreakDown-End-Modal?node-id=1%3A3

This is the screen the user will see after their rap session ends. It show prompt and have a button that allows the user to start another rap session

We need to find and store a collection of beats we could use for the app. When we show the user the rap session screen, we should then start playing a beat at random.

We should preferably have a CI job running to lint, format, and typescript build the project.

This involves a mix of design and frontend work.

The landing page is the first thing users see and it should show the application's name and logo at the top, as well as a summary of what the application is or does. There should also be a "Start" or "Start Rapping" or "Start Session" button where the user can click to start their rap session.

• Browse Tech Landing Page for inspiration
• Choose SVG images
• Create mockup on Figma

• Add Dark Background
• Add Hook
• Add About description
• Add Start A Session Button
• Add SVG image with blue blob background
• Start a session on click of the button
• Add Logo ( placeholder for now )
• Add nav bar ( discuss )

We should use the project program's README template (https://github.com/uwcsc/project-program-template/blob/main/README.md) but keep a section for project set up.

We shouldn't delete package-lock.json to resolve dependency issues as that's not a good practice.

Give the user an option to select a tempo in the landing page and in the session end screen, before they start their rap session. If a tempo is selected, then the words will appear on this tempo.

Give users an option to select a beat from a dropdown list, once a beat is selected, the tempo selection box is greyed out and is filled with the beat's tempo. During the rap session, words will appear at the same tempo as the selected beat's tempo.

The logo or name or title in the upper left corner of the website should bring the user back to the landing page no matter where they are.

test feature