Finishing Up On My Next.js AeroPress Coffee Helper App 
Tags: nextjs, typescript, tailwindcss, devjournal
Published: 2022-01-09 22:08:44

## Heya friends!

I've been workin' hard on my [AeroPress Tracker](https://www.aeropresstracker.com) 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](https://dev.to/kylemckell/making-an-aeropress-tracking-app-3jf1), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qbwmunutvglhn44x1un.png)
And a sun in light mode!
![Sun Theme Switcher Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gtymg37iz05t7tt37jy.png)

I implemented this using [useDarkMode](https://www.npmjs.com/package/use-dark-mode) and [TailwindCSS](https://tailwindcss.com/). It was simple to implement, and the code for the button was pretty simplistic as well:

```ts
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:
![Brew Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jidpy85p5sdmxnd2pygr.png)

To making the form look much nicer:
![Create a brew form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z55az7pv7d80xkmrsjwm.png)

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