Week 1 Assignment

Tip

💡 Pro-tip: Every assignment in this course is designed to help you build your skills and your app — one step at a time. You won’t just be following along with code… You’ll be building a real Trivia App and developing your own app idea side-by-side. 👯‍♂️

Tips for the assignments:

• 🧭 Start with Curiosity
• 📖 Follow the Guide… But Don’t Just Copy
• 🐛 Stuck? Great. Now You’re Learning.
• 📓 Reflect, Don’t Just Ship
• 🔗 Bonus Challenge: Make It Yours

Assignment 1

The objectives of this assignment are to:

1. Download a full-stack application onto your computer (without having to build it).
2. Start understanding the NextJS + Supabase project structure.
3. Explore the power of AI coding tools to modify features in this application.

The questions for this assignment are the same questions inside the trivia app sandbox page here. Set up the trivia application sandbox by following the instructions on that page, and then answer the following questions:

Phase 0: Playing around with the app

1. Run the application with the command ‘npm run dev’. Explore the application by clicking on buttons and trying out the different features. *Note, every time you generate trivia questions, you will be spending some of your OpenAI credits (money).

   a. Authentication:

   • Go through the process of signing up for an account. Check your Supabase Users table (in your web browser) to see if the sign up was successful!
   • Now that you have created an account, go ahead and sign in.
   • Try resetting your user account password. Did that work? If not, what happened?

   b. Trivia question generation:

   • Generate a set of trivia questions! What happens?
   • Can you check that the trivia_questions table and the user_trivia_questions table were updated in Supabase?
   • What happens if you try to generate trivia questions again?

   c. Favorites page:

   • Favorite one or two of the questions on the home page.
   • Do they appear in the favorites table in Supabase?
   • Check the favorites page and see if the questions show up.
   • Does the unfavoriting functionality work?

   d. History page:

   • Check the history page, and make sure the user’s past history questions appear.

Phase 1: Coding with AI open-exploration

Tip

💡 Pro-tip: Some tips for feature exploration:

• Leverage your favorite LLM (ChatGPT, Gemini, or Claude) for some tips on how you would implement this feature. For some context, you’re working in a NextJS project with a Supabase backend.
• Don’t be afraid to give Cursor context to whole folders, and ask Cursor how things work and which files will be helpful in this implementation.
• Use ‘Thinking’ mode for the most advanced help from Cursor.
• If you want to restore your code to a previous version, use the ‘Restore Checkpoint’ button near the prompt you entered.

1. (Feature 1: Cosmetic Change) Can you get Cursor to increase the text size of the trivia category buttons?

   a. What learning/research/discovery did you do prior to writing and implementing a Cursor prompt (with LLMs and/or looking )?

   b. Which files did Cursor edit/modify to implement this feature? Where does this file live?

   c. What are some bugs, issues, or limitations you encountered during this process?

   d. Were you successful in implementing the feature? If so, show a screenshot or GIF of it working.

2. (Feature 2: Countdown Timer) Add a timer that counts down as soon as the user clicks the button to generate trivia questions. As soon as the timer expires, can you have a UI/UX display that says ‘your time has run out’, and prevent the user from answering questions?

   a. What learning/research/discovery did you do prior to writing and implementing a Cursor prompt (with LLMs and/or looking )?

   b. Which files did Cursor edit/modify to implement this feature? Where do these files live?

   c. What are some bugs, issues, or limitations you encountered during this process?

   d. Were you successful in implementing the feature? If so, show a screenshot or GIF of it working.

Sandbox Feature Tips

3. (Feature 3: Prompt Modification) Modifying the prompt to take in additional user preference (for example, add a field for spiciness, goofiness, mind-bendiness, or whatever you can think of). Make sure that the prompt to the OpenAI API takes this user input into consideration when generating the trivia questions.

   a. What learning/research/discovery did you do prior to writing and implementing a Cursor prompt (with LLMs and/or looking )?

   b. Which files did Cursor edit/modify to implement this feature? Where do these files live?

   c. What are some bugs, issues, or limitations you encountered during this process?

   d. Were you successful in implementing the feature? If so, show a screenshot or GIF of it working.

Phase 2: Coding with AI directed exploration (to learn about project structure/files)

Tip

💡 Pro-tip: Leverage Cursor or your favorite LLMs for help with exploring this! Alternatively, you could also try to use Claude Code!

1. Can you find out where the UI/UX for the /sign-in and /sign-up forms live? You can either inspect the files/folders manually or use Cursor for guidance if you need help!

   a. What do you notice about the route (i.e. website.com/sign-in) and where the file lives in the code repository? What is the pattern?

2. You have gone through the process of signing up for an account. Can you get Cursor to help you map where in the code this whole user-flow is encoded? Can you draw out a diagram to show what code files/functions are hit?

3. Let’s explore the OpenAI API integration.

   a. What code is being called between the user hitting the ‘Generate Trivia Questions’ button and the questions being generated and appearing on the page?

   b. Where is the route where the OpenAI API is called? What is happening in this code file? Can you walk through and describe the general functionality.

4. Can you find and list all instances where the Supabase tables are being updated or modified?

   a. For each of these instances, can you label whether the Supabase client is being called on the server or client-side and why?

   b. What is the difference between server vs. client-side?

Reflections on Coding with AI

1. What are your initial thoughts about coding with AI? Any surprises? Challenges?

2. When did you feel like you were collaborating with AI vs. just receiving instructions from it?

3. How helpful was AI in resolving bugs or identifying problems?

4. Did you ever get stuck in trying to fix a problem? Or in an infinite cycle of errors? What happened and what did you try?

5. Did you notice your prompts improving over time? How did your approach evolve?

6. On a scale of 1-10, how confident are you in knowing which files should change if I asked you to implement a specific feature (like the ones in phase 1 of the exercise)?