First off, if you are reading this, it means so much to me! Thank you for following along as I build this project! Please leave a like or a comment to let me know that you’re here. I hope to read about some of your projects soon!
Today, I finished all the visual aspects of the application! (At least mostly…). There are a couple of places that I need to clean up some display bugs. The one that comes to mind is the hearts that just appear over top of the card in the Library component!
This doesn’t mean I’m done with the React app though, there’s still plenty of logic to think about when it comes to how the data is going to make it where it needs to, and there’s some presentation logic that still needs worked out.
But, overall, it’s a huge accomplishment to have all of this done!
My State is Getting Complex
We’re now at the point where I think it’s necessary to implement useReducer, redux, or another form of centralized state management.
I’m tracking all kinds of state: the current roast, the current list of roasts, progress of the roaster, steps of the roast, details of the roast in forms, favorites. This is already becoming a bit annoying to deal with - having to drill down into props. Tomorrow may have to be a refactoring day where I simplify the code and create a controller layer.
At first, I wasn’t sure that this application had enough moving parts to need a dedicated controller layer, but some of my react components are getting kind of ugly to look at.
This will be a mass refactor, but I think it will solve some of the issues that I’ve been running into, specifically regarding state and prop drilling.
src/
*- My Pages and their styles
|-- Home/
|-- Library/
|-- Account/
|-- About/
*- shared components and functions
|-- components/
|-- util/
*- remove all data manipulation from components
|-- controllers/
|-- models/
*-- then some things to manage state
|-- reducers/
If you have any comments, I’d love to hear them before I start dividing up the application and piecing it back together!
This layout seems better to me because it will make my presentational components more presentational, and keep my utilities, data manipulation and the rest separate from the actual pages. Hopefully, this will make implementing the database and API later much easier, because all of the files that will need refactoring will be in the models or the controllers folder!
Tidbit
Another small change that I made today that made a huge difference was an adjustment to the roaster transitions. It turns out that transitioning positional properties like top: and left: come with a big overhead.
This meant that the animations were looking pretty choppy on my iPhone screen.
So, it traded them out for transform: using the scale() and translate() functions! Check out the result!
Check Out the Repo
If you want to keep up with the changes, fork and run locally, or even suggest code changes, here’s a link to the GitHub repo!
Top comments (0)