Assignment 9 - Deployment and bonus features

First, complete at least assignment 4 if you haven't already. That assignment is prerequisite.

In this assignment, you will deploy your app so anyone can access it over the internet. How exciting! You'll be able to send your friends your hosted URL and have them try out your app.

You'll also add a cool new thing to your code :D

Core Requirements

1. Deploy your backend API using Vercel
   • Test this out by hooking it up to your frontend (replace the fetches to your localhost API URL with the new deployed URL).
2. Deploy your frontend using Vercel
   • Go to the deployed link, everything should work perfectly as expected!
3. Add one cool new thing to your app
   • Before you start, make sure to create a new branch for this assignment called hw-9 that branches off the most recent version of your code. Do all your work on this branch.
   • Your options are:
     • Use styled-components to style your frontend.
     • Use tailwind to style your frontend.
     • Use TypeScript in your frontend.
       • You can technically migrate your backend API to TypeScript too, but that's a bit more challenging.
     • Use a 3rd party API in your backend API.
       • In workshop, we used the github API. Feel free to use this one.
       • You can choose any API you want as long as you are interfacing with it using network requests.
     • If your code already has any of these, that does not count. You must add something new!

Additional Requirements

• Add another cool thing to your app (another 3rd party API counts)
• For styled-components:
  • Implement conditional styling based on props
  • Implement media queries and/or CSS state effects like :hover, :focus, etc
  • Implement a CSS animation
  • Migrate ALL styles of your entire app to use styled-components
• For tailwind:
  • Add a tailwind theme to your project
  • Migrate ALL styles of your entire app to use tailwind
• For TypeScript:
  • Implement and use an enum
  • Migrate ALL files of your frontend app to use TypeScript instead of JavaScript
• For 3rd party APIs:
  • Use more functions provided by the API
  • Make multiple requests to the API from one of your endpoints

Resources

• The workshop 9 slides and recording, which you can find here.
• The workshop 2 slides and recording, which you can find here. You might find the CSS section useful.
• Tailwind installation guide and documentation.
• styled-components documentation
• Add TypeScript to your frontend

Submission

For feedback from DISC exec

Follow these instructions if you are submitting to get feedback from DISC exec. The deadline for your submission is 1 week after the associated workshop.

1. Deployment: you'll submit URLs of your hosted API and frontend.

2. Code:

   • Make sure all your changes are committed and pushed onto github (on the hw-9 branch!)
   • On github, make a pull request from your hw-9 branch.
     • Do NOT merge the pull request
   • You'll submit the link to this pull request. If you made changes to both the frontend and backend, you'll submit two pull request links.

3. Fill out this google form

For the Discover Program Application

If you are not submitting for DISC exec feedback, but for your Discover Program Application, follow the submission instructions in the application form.