Building LocaleLite: What I Learned, Broke, and Fixed

LocaleLite is a small React app I built that lets users enter a country name and find out if there's a holiday there today. It’s simple in idea, but building it turned out to be one of the best learning experiences I’ve had so far.

What I Learned

1. React Fundamentals, Reinforced

   • Using useState properly to manage and update the input, API responses, and display logic.

   • Handling user events like input changes and button clicks with props and callbacks.

   • Managing component structure and passing props cleanly across SearchInput and Snapshot.

2. Async/Await for API Calls

   • I switched from using .then() to async/await, which made the code much easier to read and debug.

   • I learned to structure API calls properly with try/catch to gracefully handle errors.

3. Conditional Rendering

   • One of the biggest “aha” moments was understanding how to safely render values from APIs without breaking the app.

   • Using things like:

{props.country && props.country.name && (
  <h1>{props.country.name.common}</h1>
)}

helped avoid runtime errors from undefined properties.

4. Debugging React Errors

   I ran into the classic error: “Objects are not valid as a React child” — caused by trying to render an object directly. I learned to always extract specific strings or values from objects before rendering.

APIs I Used

1. REST Countries API

   • Used to fetch country information and country codes (cca2), which were needed to pass to the next API.

2. Calendarific API

   • Used to fetch holidays by country and year.

   • I specifically filtered for today’s date using:

       const today = new Date().toISOString().split('T')[0];
     

     Mistakes I made

     1. Using Date.toISOString() Instead of new Date()

        • I mistakenly wrote Date.toISOString() and got a runtime error, because Date is not an instance — it should have been new Date().

     2. State Not Updating in Time

        • I used setCountryCode() and then tried using that value immediately after. I forgot that state updates in React are asynchronous, which caused some confusing behavior during API chaining.

     3. Not Clearing Old Holiday Results

        • I didn’t reset the holiday state when a new search started, which led to stale data showing up if a new country didn’t have a holiday.

     4. Forgetting JSX Can’t Render Objects

        • I tried to render the whole country object in a JSX element and React threw an error. Rookie mistake, but a valuable one.

The Small Stuff That Tripped Me Up

• Missing return statements or mismatched curly braces.

• Forgetting to wrap URLs in backticks for template literals.

• Not checking whether a value exists before trying to render it.

• React errors that weren't super descriptive — but I’ve learned how to read and Google them better now.

What I’m Proud Of

• I didn’t give up even when I felt stuck.

• I used console logging effectively to trace data through my functions.

• I got more comfortable using developer tools and debugging async code.

Final Thoughts

Frontend development isn’t just about writing code — it’s about breaking things, fixing them, understanding why they broke, and slowly gaining confidence. LocaleLite may be a simple app, but building it taught me a lot about how real React apps work.

I’ll keep building, keep breaking things, and keep learning.

View Project - https://adeelh12.github.io/LocaleLite/