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
- Find a component you wrote in a previous week.
- Paste the code into Codex and ask it to refactor the code for readability.
- 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
- Open the
__tests__folder.
- Create a new file for a component you want to test (e.g.,
Post.test.tsx).
- Ask Codex:
"Write a simple smoke test using Jest for a React component called Post to ensure it renders without crashing."
- Run the test from your terminal:
pnpm run test
- Did it pass? If so, you've just written your first test! 🎉
How to self-validate: The terminal will print a green
PASS message next to your test file name. If it fails, Codex can read the error message and help you fix it!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:
- Get an API Key: You'll need to sign up for a Giphy developer account to get a free API key.
- 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).
- Display the Data: You'll take the response from the Giphy API and display the GIFs in your application.
This week's tickets (#10, #11, #12) will walk you through this process step-by-step. Have fun with it!
Made with Bullet