Lesson 7: Polish, Testing & External API Integration

Welcome to Week 5! You’ve built the core of your Community Hub. Now it’s time to take it from functional to polished. This week is all about improving the quality of your code, making sure it works as expected, and adding a fun integration with an external API.

Learning Objectives

  • Understand the importance of code quality and how to use AI to refactor and improve your code.
  • Learn the basics of testing and how to write simple tests for your components.
  • Learn how to integrate a third-party API into your application.

1. What is Code Quality (and Why Does It Matter)?

Code quality is a measure of how good your code is. Is it easy to read? Is it efficient? Is it easy to change without breaking things? High-quality code is a gift to your future self and to your teammates.
AI as Your Code Review Partner: You can use Codex to act as a code reviewer. Paste a snippet of your code and ask:
  • "Can you refactor this code to be more readable?"
  • "Is there a more efficient way to write this function?"
  • "Can you add comments to this code to explain what it does?"
Exercise 1: Refactor with AI
  1. Find a component you wrote in a previous week.
  1. Paste the code into Codex and ask it to refactor the code for readability.
  1. Review the changes. Do you agree with them? Why or why not?

2. Intro to Testing

How do you know your code works? You test it! Testing is the process of checking that your code does what you expect it to do. While there are many kinds of testing, we’ll focus on simple “smoke tests” — does the component render without crashing?
Our project is set up with a testing library. You can write a simple test for any component.
Exercise 2: Write a Smoke Test
  1. Open the __tests__ folder.
  1. Create a new file for a component you want to test (e.g., Post.test.tsx).
  1. Ask Codex: "Write a simple smoke test for a React component called Post."
  1. Run the test from your terminal: npm test
  1. Did it pass? If so, you’ve just written your first test!

3. Integrating External APIs

Not all data has to come from your own database. You can pull in data from thousands of other services using their APIs. This week, you’ll integrate the Giphy API to let users add GIFs to their posts.
The API Flow:
  1. Get an API Key: You’ll need to sign up for a Giphy developer account to get a free API key.
  1. Make a Request: You’ll use your API key to make a request to the Giphy API (e.g., search for GIFs with a certain keyword).
  1. Display the Data: You’ll take the response from the Giphy API and display the GIFs in your application.
This week’s tickets (#11, #12, #13) will walk you through this process step-by-step.