DEV Community

Cover image for Rethinking Application Design
Nolan Miller
Nolan Miller

Posted on • Edited on

Rethinking Application Design

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!

Heart bug

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/
Enter fullscreen mode Exit fullscreen mode

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!

Smooth transition


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!

https://github.com/nmiller15/roast

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay