Skip to content Week 2 Reading Questions | CurioCity

Week 2 Reading Questions

Question 1

You’re adding a new feature to your Next.js app: Users can upload a profile picture and see it on their dashboard. Match each code task (1–4) to where it should go (A–F).

Code Tasks:

  1. Build a file upload form where users can select and submit a profile picture
  2. Write the server-side code to receive and store the uploaded image
  3. Create a small ProfileImage component that displays the uploaded picture on the dashboard
  4. Style the profile picture so it appears as a circle with a shadow

Possible File Locations:

A. app/(auth-pages)/sign-in/page.tsx

B. app/(auth-pages)/sign-in/page.ts

C. components/ProfileImage.tsx

D. components/ProfileImage.ts

E. app/styles/profile.css

F. app/api/upload-image/route.tsx

G. app/api/upload-image/route.ts

H. utils/imageHelpers.ts

I. app/dashboard/page.tsx

J. app/dashboard/page.ts

K. components/AuthForm.tsx

L. public/default-profile.png

Click to see answer

Task 1: Build a file upload form

➡️ Best Answer: app/dashboard/page.tsx

  • .tsx file (instead of .ts) since it’s a front-end form.
  • This will live on a route that hosts a front-end page, so it should live in the app directory. Dashboard is an arbitrary name for the route (it could be anything).
  • A less optimal but still valid answer is: ‘components/ProfileImage.tsx’. This would be good if we wanted to modularize our application, so this is also a valid answer.
  • ‘app/api/upload-image/route.tsx’ is technically correct, but we typically put files that are on the backend in the ‘app/api’ directory.

Task 2: Write the server-side code to receive and store the uploaded image

➡️ Best Answer: app/api/upload-image/route.ts

  • This file handles the backend logic for processing the uploaded file
  • Note: route.tsx is invalid—API routes should not use .tsx extensions
  • Technically, components/ProfileImage.ts would work but is not recommended. We put back-end functionality in the app/api folder.

Task 3: Create ProfileImage component

➡️ Best Answer: components/ProfileImage.tsx

  • This component will fetch and display the user’s profile image wherever it’s used (like on the dashboard)
  • Note: components/ProfileImage.ts is valid but lacks JSX support—.tsx is better for components with UI elements

Task 4: Style the profile picture

➡️ Best Answer: app/styles/profile.css

  • CSS for image shape and shadow effects belongs in your stylesheet or Tailwind config
  • Alternative: If using Tailwind CSS, styles would go directly in the component as class names

Question 2

Client vs. server-side: In our trivia application, we will build out a feature so that when a user favorites a button on the homepage, the question will get saved to the Supabase favorites table. When we have Cursor help us write the code to build out this feature, should you create the Supabase client on:

A. Front-end (client-side) — call Supabase directly from the user’s browser when they click the “favorite” button

B. Back-end (server-side) — call Supabase inside an API route (e.g., app/api/save-favorite/route.ts) that handles the database write securely

C. Neither — you should store the favorite in localStorage on the user’s browser and sync it later when they refresh the page

D. Both — set up a Supabase client on both the front-end and back-end to make sure the favorite gets saved twice (for “extra reliability”)

E. Use a static JSON file — add the favorited trivia question to a JSON file in the public folder instead of saving to Supabase

Click to see answer ✅ Correct Answer: B. Back-end (server-side) — call Supabase inside an API route (e.g., app/api/save-favorite/route.ts) that handles the database write securely.

When saving data to a database like Supabase, especially sensitive or user-authenticated data like favorited questions, it’s important to:

  • Protect API keys and logic
  • Verify the authenticated user
  • Avoid exposing direct database operations to the client

By creating a server-side API route, you ensure:

  • Supabase service role keys stay private
  • You can verify the request and only allow authenticated users to save data
  • You prevent malicious actors from tampering with requests or injecting data

❌ Why the others are wrong: A. Client-side: Directly calling Supabase from the browser with a public key can work, but it’s less secure for write operations. Users could tamper with the request or bypass client-side logic.

C. localStorage: This doesn’t persist data across devices or logins and is not reliable for syncing user preferences.

D. Both: Redundant and can cause race conditions or double writes. Also complicates logic unnecessarily.

E. Static JSON file: JSON files are read-only at runtime and cannot be written to by the app. This method is not dynamic or database-backed.

Question 3

You want to build a personal website that is fast, easy to maintain, SEO-friendly, and scalable if you ever want to add a blog or portfolio later. Which project framework would best support this goal? Rank the following answers.

A. Next.js — A full-stack React framework that supports server-side rendering, static site generation, and building highly interactive apps

B. Astro — A static site builder optimized for fast-loading pages, designed for content-focused sites, and capable of using components from multiple frameworks like React, Vue, or Svelte

C. Express.js — A backend Node.js framework for building server APIs and web applications with full control over routing and middleware

D. Remix — A React framework that emphasizes server-rendered applications with good control over caching, data fetching, and fast page loads

Click to see answer 1. Astro (B) – Best for fast, content-focused, SEO-friendly personal sites; super lightweight and easy to scale.

  1. Next.js (A) – Great mix of static + dynamic features; good for blogs/portfolios with future interactivity.

  2. Remix (D) – Powerful, but more complex; better for data-heavy apps than static content.

  3. Express.js (C) – Too low-level for personal websites; no built-in rendering or SEO tools.