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! 👩💻
Top comments (0)