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:

And a sun in light mode!

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>
    );
};

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:

To making the form look much nicer:

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! 👩‍💻