DEV Community 👩‍💻👨‍💻

Cover image for Finishing Up On My Next.js AeroPress Coffee Helper App
Kyle McKell
Kyle McKell

Posted on

Finishing Up On My Next.js AeroPress Coffee Helper App

Heya friends!

I've been workin' hard on my AeroPress Tracker app, and I've reached a point that I feel like it's nearing completion!

You can check out my first post on it here, and I'm happy to report that I've made an intense amount of progress... it's a lot for only having one total devlog.

So here are a few things that I've worked on:

Dark Mode

The first feature that I devoted my time over to was implementing a dark mode... for the sake of my eyes, and the eyes of my users!

Don't worry light mode lovers, it's still supported! (Although I'll never understand you)

I implemented a cute little theme switching button, it's a moon in dark mode:
Moon Theme Switcher Button
And a sun in light mode!
Sun Theme Switcher Button

I implemented this using useDarkMode and TailwindCSS. It was simple to implement, and the code for the button was pretty simplistic as well:

interface Props {
    toggleDarkMode: () => void;
    isDarkMode: boolean;
}

const ThemeSwitchButton = ({ toggleDarkMode, isDarkMode }: Props) => {
    return (
        <button
            onClick={toggleDarkMode}
            className="self-center text-neutral-700 dark:text-neutral-100"
        >
            <VisuallyHidden>Toggle dark mode</VisuallyHidden>
            {isDarkMode && <Icon id="moon" strokeWidth={2.5} />}
            {!isDarkMode && <Icon id="sun" strokeWidth={2.5} />}
        </button>
    );
};
Enter fullscreen mode Exit fullscreen mode

Dealing with the flicker

In my last post, I mentioned how I was dealing with the flicker with a SessionMounter component.

I've since dropped said component because I think it created an awful user experience, things just take forever to load!

So I've opted into hydrating the page on the client side after validating the Session. I had to reimplement the buttons a little bit, but I'm happy how it turned out, and any flicker that does occur isn't backbreaking or horrific to look at.

Updating the UI

The UI has gotten a huge overhaul from before. From adding a bit more of a design to the BrewCard:
Brew Card

To making the form look much nicer:
Create a brew form

Everything is coming together in a much better way to make an infinitely nicer app to use!

As far as Tailwind goes, I'm enjoying it, but also finding it mildly frustrating. While I do love the capabilities that Tailwind provides, I find myself missing writing raw CSS. Luckily for the sake of this project I haven't had to get into the weeds of Tailwind too much (as I'd imagine making things such as grids with grid-template-areas is a bit of a pain), but if I ever have a really complicated UI, I think I might reach back over to my good pal Styled Components.

So what now?

This app is nearing what I'm wanting for it, so I'm going to take a step away from it for a bit to update my portfolio page and maybe move onto a different project

That being said, there are still a few features which will be implemented in the future:

  • Pagination
  • Editing a brew
  • Adding comments to brews after creation
  • Sorting

For the time being, I see these as somewhat optional. However, as the app grows in scale, and if the userbase increases, they are necessary additions. A day or two of work would definitely solve these issues, however, I'm more excited to get a few other things going for the time being, and the app is at a place that I'm happy about.

Hope you all enjoy using the app, and I'd love to hear what you think about it! It was a fun learning experience to utilize some technologies that I haven't leveraged much in the past, and I'm looking forward to utilizing this stack again!

Have fun and code on! 👩‍💻

Top comments (0)

Why You Need to Study Javascript Fundamentals

>> Check out this classic DEV post <<