WTWR Part 2: Front-End Completion & The Road to Full-Stack

In my last post, I wrote about the early stages of building WTWR (What to Wear), my React app designed to solve the daily dilemma of dressing for the weather. I ended that post by saying my next big focus would be cleaning up the state management.

After a focused period of development, the front-end architecture is now solid, the UI is polished, and the app is fully functional using mock data.

https://video.wixstatic.com/video/136aa3_d8f1c5eea3a1424aba91790e7612e85f/1080p/mp4/file.mp4

Here is a look at the technical leaps made in this latest version.

1. Taming State with Context and Hooks

Passing props down a level or two is fine, but it quickly becomes a tangled mess as an app grows. To fix this, I implemented React Context (CurrentTemperatureUnitContext) to globally handle the Celsius to Fahrenheit toggle. Now, any component that needs the temperature unit can access it instantly without prop-drilling.

I also leaned heavily into useEffect to manage component lifecycles properly. A great UX detail added in this iteration ensures that the "Add Garment" modals automatically clear out their old input data every time they are opened, preventing stale data from lingering if a user cancels and reopens the form.

2. Defensive Programming

Building the "happy path" is easy; building for edge cases is where you actually learn. One of the biggest structural wins was making the data handling more resilient.

For instance, when managing clothing items, my deletion logic used to blindly expect an id field from the database. I updated this to use a defensive fallback (selectedCard.id || selectedCard.id).

This ensures that as the data source evolves, the DELETE request won't fail and crash the app. I also refactored how the app extracts weather icons, shifting from .filter() to .find() to ensure the code handles single-object retrieval cleanly instead of returning awkward arrays.

3. The Final UI Polish With the logic secure, I finalized the design to match the high-end feel of the initial Figma files. The bulky, standard form boxes are gone, replaced by minimalist underline-style inputs. The main dashboard grid now utilizes advanced CSS—combining Flexbox and absolute positioning—to give each clothing card a sleek, "floating" name tag.

What's Next? Moving to the Backend

While the interface is complete and the client-side logic is stable, this project is far from over.

The next phase is shifting from a simulated front-end environment to a true full-stack architecture. I am moving into the backend to build out custom Node.js components. Replacing the mock server with an actual Express API and a database will allow for real user authentication, persistent data storage, and a much more robust system architecture.

The front-end React foundation for WTWR is complete and ready to hook up to a live server. You can check out the current codebase and project presentation over on the GitHub repo:

💻 https://github.com/aonattt/se_project_react