DotNetIntroduction

Balloon shop widget

Create a React widget that allows a local balloon shop to keep track which color of balloons are the most popular or even trending.

Allow users to request a balloon color.

Show a list of colors with a count of how many times balloons of that color has been requested.

Colors requested:

• 5 times or more are deemed popular,
• 11 or more times are deemed trending
  • only three colors can trend at any given time,
  • the lastest color that trends should be shown,
  • reset the oldest trending color to 9 if you need to make space for the new trending color,
  • a color can only trend for 30 seconds - set it’s counter to 9 after 30 seconds.

Colors requested less than 5 times are up and coming colors.

Show 3 different sections on your page for:

• Trending,
• Popular
• Up and coming colors.

Show all the colors for a given section, display the color and the count of how many times the color has been requested.

Do this using React Create App or ViteJS. Call the app the-balloon-widget.

Before you start coding do this:

• Create a prototype of what you are intending to build in Figma,
• Create a list of all the react components you are planning to create? What type of component will each one be?
• Think about the state that the widget needs to store - share your thoughts on this in an email/slack. Mention @andre or email using the email address below.

Email all the above to mentors@projectcodex.co.

Once done deploy the widget to GitHub Pages.

Things to try

Once your basic widget is working you can try these things.

• Let trending colors time out after a given period - you can have a default timeout or prompt users for a timeout period.
• Remove a given color from the screen.
• Reset a given colors counter to another number - it should be displayed correctly on the screen.

You can also try to persist your balloon data in supabase. What will you need to get this up and running?

Persist balloon using an asp.net core API

Once the basic baloon widget is working using basic browser specific state let’s look into how to create a backend to share the application state on the server using the react template in dotnet core.

dotnet new react -o the-other-balloon-widget

Reuse your React components to store your data in SQLite or PostgreSQL.

Deploy your app.