Hashnode + Clerk Hackathon - Building a React + Firebase App Dedicated to Animal Crossing

July 30, 2021

Hello again! I’m participating in the the Clerk & Hashnode Hackathon and my React project is a small love letter to one of my favorite games: Animal Crossing.

Instead of Blathering on for too long right now, let’s jump right into it!

  1. Project UX
  2. Technical details
  3. List of resources & references

Project UX

A little background for folks who are not already familiar with Animal Crossing: New Horizons (ACNH). It’s a Nintendo Switch game that was released in early 2020. And because we were all trapped indoors for the bulk of that year, I played the game… a lot. A lot a lot.

The game is a safe harbor from the cruel COVID world. In ACNH, you live on an adorable island, collect resources (like wood and fruit), craft things, make friends with adorable villagers, fish, and catch bugs. That’s not to say that it is a perfect utopia; it can also a Capitalist Hellscape, since you’ll need to participate in the Turnip Market in order to become a 💰 Bellionaire 💰. And there are wasps in tree sometimes. As in life.

Tangentially, since resources are needed for doing well in the game, a few apps have popped up to fill the need including Turnips Exchange and Nookazon.

I thought about those two sites along with a new one that I joined recently - Polywork - to come up with my app idea: the acnh-ipelago. (Yes, it’s a pun on archipelago, which is a collection of islands. I’m not even sure how to pronounce it but it sure looks great on paper to my pun-loving eyes. 😂 Maybe “thee atch nyee puh lah go”? 🤔)

The user flow for the acnh-ipelago:

  1. You sign up (using authentication provided by Clerk)
  2. You fill out some info about your island
  3. 💥 Now you have a simple LinkedIn / Polywork profile page for your beloved island that you can share with others.
  4. Within the app, you can also see others’ islands, too.

The current app is hilariously basic at the moment because MVP and deadlines, but here are some things that would be really fun to add (if I had all the time in the world):

  • More info to add about the island, like your villagers (which one’s your favorite 💕 Alice 💕, which you secretly wish would move out already OMG cough Friga cough).
  • Your accomplishments in the game so far. I don’t want to brag: I have, in fact, caught every single fish type possible along with every bug type possible. 🏆 I already confessed to playing this game a lot, so you shouldn’t be too surprised by this now. 😅
  • The ability to add other people’s profiles to your list of “favorites”.
  • The ability to message other people on the app would be great, too. (And with that, the ability to block people from messaging you. Because safety and security. And sometimes people just cannot have nice things without ruining it with inappropriate behavior, alas.)

Some screenshots

If you’re interested in a 27-second video click-through of the app, it’s hosted on YouTube here.

Here’s the first landing page (mobile view)

the acnh-ipelago homepage

Sign in page; super easy to implement from Clerk

the achn-ipelago login page

And the form to edit your island details (using Formik)

the acnh-ipelago edit page

Technical details

  • The implementation with Clerk was fairly straightforward, with a caveat. I went with the Next.js implementation and things happened but I’m still not sure what. I may have signed up for Vercel account. Or given away my first born (joke’s on them!). I basically bailed and went with Create-React-App (tried and true) and the sample code they shared in the documentation was super helpful.
  • The app was started with Create-React-App, and then I bailed again and went with CRA with TypeScript. I recommend using TypeScript since I ended up using things that I’ve never used before (e.g., Clerk, Firebase) and being able to see the expected types and arguments helped make things much clearer.
  • Routing was done with react-router-dom. Kind of interesting to go from using Next.js all the time with the pages/ convention back to having routing be a huge switch-case.
  • The form was created using Formik. I’m fairly experienced with React Final Form, so I wanted to take this opportunity to try the other top popular (topular?) form in the field. Conclusion: they’re extremely similar!
  • Aaaaaand, finally, the DB. I’ve been wanting to use Firebase for the longest time because it kept coming up as a solution for when you need a database. And, I’m here to report: ✨ extremely mixed feelings ✨.

    • On the one hand, it works and the UI is relatively straightforward.
    • On the other hand, the documentation was verbose but not particularly helpful for React code bases. There’s an entire site specific to React Firebase, but I really couldn’t believe that was what they wanted folks to do in order to get and set data. Essentially if you want to get, then set, you’ll need a FirebaseProvider and then a separate component with its own children to access / write. (I basically encountered this very same issue posted on StackOverflow.) Example:
      <FirestoreProvider {...FirebaseConfig} firebase={firebase}>
        <FirestoreDocument path={`/users/${id}`}>
          {(d) => {
            return doSomething(d.value);
          }}
        </FirestoreDocument>
        <FirestoreMutatation type="set path={`users/${id}`}>
          {({ runMutation }) => {
            return (
               <div>
                 <h2> Mutate state </h2>
                 <button
                   onClick={() => {
                     runMutation({
                       fieldName: value,
                    }).then(res => {
                      console.log("Ran mutation ", res);
                    });
                  }}
                >
                  Mutate Set
                </button>
              </div>
            );
          }}
        </FirestoreCollection>
      </FirestoreProvider>
    );
    };
    • Luckily I stumbled upon this blog post from Austin Howard Tech that provided me with a much better solution to my Firebase woes.
    • Long story long, Firebase documents are okay, but the approach is definitely not the most straightforward. 😬

Resources & references

I’ve shared a lot of links along the way, but here are some additional things for your enjoyment:

Finally, if someone from Nintendo is reading this and thinking, “Oh yes, we should have some sort of profile page for ACNH fans”: You know where to find me! (Georlola. I’ll be on my island, Geolola.)

Screenshot from Animal Crossing

Until next time! 👋


Profile picture

Written by Chung Nguyen, based out of Lisbon, Portugal. Find her on Twitter, LinkedIn, GitHub, and Polywork.