Making an AeroPress Tracking App

Hey Everyone!

It's been a bit, but I'm happy to report that things have been well

I'm currently working on an app, and I'm pretty excited for it to come into fruition, so I wanted to update my progress on here incrementally (not going to make any promises on how often 🤣) to give some insight on what I'm doing.

What's the project?

Listen... I'm a coffeehead (some would even say a coffee snob), and one of my favorite methods of brewing coffee is with the AeroPress!

An app idea that I've always had is to create an application which allows its users to add in their favorite coffee roasts, and different methods, and then combine them together to make different brews for them to refer back to each and every morning.

I began working on that idea earlier this year, but I realized that the scope of the project was out of control, and I didn't really even know where to start.

... Enter AeroPress Tracker

I figured that if I could cut down to just one method (in this case the AeroPress), I could very easily create an application which would help people with making an ideal AeroPress brew.

(Disclaimer: this application is still in the VERY early phases. There are lots of missing features, it does work, however!)

Here's a link to the GitHub Repo, in case you're curious on the code.

How to Use

Right now the homepage isn't operational (I guess you can log in... lol), but if you navigate over to the Create a Brew Page you can put in your info for your brew you want to make.

Currently you'll notice it's pretty barebones. As an example, I'm only collecting time in seconds right now, and I hope to give it capabilities to take in both minutes and seconds (and then store it as seconds in the backend).

Once you put in a brew, navigate over to its page with its id (there should be a link created after you make the brew at the bottom of the page) and you'll have a timer which you can start up to make your brew! Alternatively, head over to the Brew Page and check out what others have done!

(As a note: It is likely that I am going to be doing a LOT with this app over these coming weeks. It is not out of the question that I will be deleting all data in the database as more features get added or modified. I'm not married to anything yet and I don't want people to start using this with the expectation that everything is going to be permanent)

I'd love if people could give it a shot and let me know what you think!

The Stack

This application is being built with Next.js, Prisma, PostgreSQL and TailwindCSS. I've been wanting to build a site utilizing these tools for a little bit now, so I'm excited to report that I'm... conflicted about it?

Listen... I love all of these techs. Especially Next and Prisma (Postgres is nice too, but at the end of the day it's just an SQL database lol). However, I'm really conflicted on how to feel with Tailwind...

Tailwind

On one hand I love Tailwind, it's super nice to work with and the development flow is FAST. However, debugging styles, or wanting to write custom styles, especially when working with CSS grid or wanting to make clamp values, the framework seems iffy.

I feel like my ability to create robust and safe CSS is lessened from Tailwind, while also being bolstered? It's weird to explain, but it's like a superpower that is just so much to handle that I can't exactly control all of it. I have had moments of "WOW! I love Tailwind!" and moments of "Ugh... why did I choose Tailwind?"

I want to be clear that I am far from a TailwindCSS hater. I think the framework is awesome and I am looking forward to its future in the space. I definitely feel like I need more time with it and more experience working with it, but right now I'm more excited about Styled Components (which I've taken a love to from Josh W. Comeau's CSS for JavaScript Developers Course) and also Vanilla Extract which I plan to look into more for future projects. With other tools like Chakra UI also looming over my shoulder competing for my headspace with styling, these small frustrations from Tailwind keep adding up and I'm not sure if I'll be using it for my own personal projects anymore.

I guess I'll give an example on what I'm running into:

I really dislike code duplication, so when I run into something that I need to repeat a few times, I make a component, as most people do. However, what I'm realizing, is these components are only holding styles. At that point, I'm just wishing that I was using styled components, as then I can use straight CSS syntax and it's clearer on what the component is accomplishing, as it's not an entire component, but rather just one that has styles applied from styled components. I could make a variable which holds the styles together, but then I don't get the autocompletion from Tailwind. I'm sort of at a loss on what I want to do. As I do really feel the "this is weighing down my markup" when using Tailwind, especially once I start messing with media queries.

If anyone has any tips for getting over this, or just generally with Tailwind, I'd love to hear them. I really enjoy the workflow Tailwind provides, but the shortcomings make the entire experience watered down for me, if you will.

Next.js

I am enjoying my time with Next a lot! The Routing is wonderful, I feel like I'm learning how to make full stack apps in a comfortable environment. And while I definitely am not an expert with it at all, I'm excited to learn more about it.

However, I have ran into one problem which I have yet to decide on how I want to solve... the flicker.

At the moment I'm using Static Site Generation with the revalidate props (making the site run on Incremental Static Regeneration). However, due to this my application was flickering when you visit and you are currently logged in.

At the current moment. My solution is to have a component which prevents the page from hydrating whatsoever until the session state is known. This causes the site to load SLOW in some cases, which isn't ideal. However, I also dislike having the site flicker on the log in button.

Frankly, I think I'm going to get rid of the "SessionMounter" (what I've called my component) and opt for just accepting the flicker and adjusting the UI to be less jarring when it happens. It'll likely take some UI work and creativity, but I think it'll provide a better user experience than preventing a load for a tiny bit to all the way up to a few seconds. I would love to hear how you have fixed the flicker yourself in your Next.js SSG projects, as it's something that is the ever present plight of front-end development.

Here is the code for the mounter:

import { useSession } from 'next-auth/react';
import React, { useEffect, useState } from 'react';

interface Props {
    children: React.ReactNode;
}

const SessionMounter = ({ children }: Props) => {
    const { status } = useSession();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        if (status !== 'loading') {
            setMounted(true);
        }
    }, [status]);

    return <>{mounted && children}</>;
};

export default SessionMounter;

Other Tech notes

I have been reaching a lot for libraries. As is the React way I suppose. Currently I'm utilizing SWR for my data fetching, utilizing react-hook-form to assist with the creating a brew form, utilizing react-timer-hook for my timer, using next-auth to handle authentication (only through Google right now), and using react-feather for icons. While these are plentiful, all of them serve a purpose for problems which I could build out (and may later). However, currently my goal is to get this project shipped out and completed, and these libraries are pretty awesome for accomplishing that goal.

What I'm working on now

Right now the biggest priority is getting the modal created so you can actually log in on mobile devices. This also goes in tandem with giving the Home Page some more functionality so URLs don't have to be directly accessed. The Header needs to gain links to different pages as well, allowing for easier navigation.

All of these things should be pretty easy to implement, and should be up and running soon!

The next goal is adding in a cleaner functionality. Right now the app is basically just a glorified timer. I want to make it more definitive between different brews. Whether that be making it so more specific steps can be added, or making the UI reflect the differences between brews better, is left to be decided. I'll have to do some thinking on what I feel is the best course of action.

Also, for the pages which list a lot of different brews, currently I believe it fetches every single brew in the entire database. This is fine for now, but is something that I'll have to address with either pagination or an infinite scroll (or some other solution).

Conclusion

It's been fun working on an app which I plan to use on a weekly basis! I hope you guys are excited to see what happens with it, and if you know anyone who loves to brew with an AeroPress, I'd love to hear their feedback for features which they'd like to have in a timer app.

That's all for now, have a great one, and code on! 👩‍💻