In about two weeks I created a site that allows you to create Wordle leagues. Wanted to say it's possible to bring an idea to life quickly!

Hello everyone! Part of what I love about development is the possibility of bringing an idea to life. Many projects take years or months to build, but I wanted to show that it doesn't always have to be that way. This might not be for the straight-up beginner, but if you have started and are trying to take the next step of putting some sort of web app out there (this is where I'm at) hopefully there are some useful things here. It is a bit of a long post, but my hope is that it will be useful to someone out there!

TLDR -

I was able to spin up a fully functional web app in just under two weeks (~2 hrs/day after work + maybe 3 to 5 hours extra on the weekends) using a ReactJS frontend and Firebase (functions, Firestore, and hosting). The web app is built around Wordle -- It allows you to save your Wordle scores and create "Wordle leagues" where you can compete with friends.

Link to the site - https://savemywordle.com

My background

I initially went to school to be a dev, but ended up teaching myself how to code (I don't mesh well with school 😇). Currently working full time and trying to slowly finish out school on the side. I work on both frontend and backend projects at work but would consider myself more of a frontend dev as that is where I have the most fun.

Project Description

I've really enjoyed playing Wordle. I'm included in a couple of group messages with friends, family, and coworkers where people would send in their Wordle scores. It was fun at first to see how everyone was doing, but after about a month I noticed that people stopped sending things in and that the group messages were just kind of bland.

I thought it would be fun to spice things up a bit by creating a site where I could create a "Wordle League" with the people in those group messages. Rather than just texting scores to each other, we could text the scores to the site, and then we would get points based on how good our score was. Whoever ends up with the most points at the end of a given period of time wins.

Here were the things I wanted to build:

• Frontend - A site that users could log into to view their scores and leagues.

• Personal Dashboard - A dashboard to show an individual user what their personal stats were (average wordle score, number of wordles completed, etc)

• League Dashboard - A dashboard showing league members and a leaderboard of who is winning.

• Instructions Page - Instructions on how to submit scores, as well as how the points scoring works.

Backend

• A way for users to text their scores to the website.

• Save the scores & aggregate data

Tech Stack

I used firebase a lot with this. If you are starting out and haven't heard of it, I'd definitely recommend taking a look. In my opinion, Firebase is awesome when you are a new developer. They make it easy to spin up a quick app with a database, and they also offer an authentication service that is easy to get up and running for logins. Their functions feature (detailed next) is also great for starting to experiment around with backend functionality. Best of all, their free tier is great so you can play around without spending a ton of money 🤗.

Backend - Firebase Functions

I'm a huge fan of Firebase functions for quick projects or if you aren't ready to build a full-blown backend yet. It allows you to build a basic backend pretty quickly and easily, which is great if you are more comfortable in the frontend or learning and need some simple backend functionality.

If you haven't used firebase functions before, the way they work is you deploy individual functions and then firebase gives you an endpoint that you can hit just like an API. When you hit that endpoint, it runs the function that you deployed. Super simple. It allows you to have functions that you run on the backend without having to build a full-blown API or backend architecture.

Furthermore, firebase functions have multiple types of triggers, such as PubSub or onCreate (triggered when a database entry is added) triggers that are very helpful.

All in all, for this project I ended up with 5 firebase functions:

• Account Creation - onCreate - Configures the account on the backend after they register on the frontend.

• Receive score from Twilio - httpsRequest - An endpoint that Twilio could forward incoming text messages to (more on Twilio below). Once received, it would save the score to the database.

• Record statistics for users - onCreate - Triggered when a new score is saved. This function takes the score, uses it to calculate the personal stats for the user, and then saves the data.

• Record statistics for leagues - onCreate - Similar to the function above, but rather than for the user's stats, it does the same thing for all the leagues that the user is a part of. An example of the data that gets aggregated is the conversion of the wordle score to points for that league.

• Get Leaderboard - httpsRequest - Fetches, sorts, and returns the leaderboard for a league.

Database - Firestore

Since I decided to use Firebase functions and Firebase Hosting, it made sense to just keep everything within Firebase. Firestore is NoSQL, which sometimes can be tricky with data aggregation, but I elected to use it anyways (also wanted to learn more about data aggregation with NoSQL).

Firebase also has Firestore "Rules" where you can lock the database down and make sure only users with the appropriate permissions are accessing data.

Texting Functionality - Twilio

For the texting functionality, all I needed was a number that users could text their score to, and then forward the contents of the message to my backend. I'm sure most people are familiar with Twilio, but if you aren't, Twilio makes things like this pretty easy.

I bought two numbers through Twilio - a prod number and a dev number. For each of those numbers, I went into the settings and configured them to forward the message to the matching firebase function. All of this was possible through their frontend without code. It's as simple as just pasting in the function endpoint that Firebase gives you after deploying the function.

Frontend - ReactJs + TailwindCSS

Pretty straightforward here. I built the elements that I outlined above using React and Tailwind. I love using tailwind because I think it makes it easy to create a good, modern-looking, app, and I'm happy with how it turned out.

I installed Firebase into the frontend, which allowed me to easily integrate with my Firestore database and Firebase Authentication. Most of my calls to the database for basic things like getting a user's info, or a specific score, were done from the front end. The package I used for this was react-redux-firebase(Which does have hooks, you don't have to use redux. I used hooks.).

Hosting - Firebase Hosting

Again, pretty straightforward here. Firebase's free tier is pretty generous and includes hosting, so I kept as much as I could within Firebase. I also used GitHub actions to automatically build and deploy the app to hosting anytime that I published a release in GitHub.

All in all, it took me about 2 weeks to build out the requirements I outlined in the project description. I would work on it at night after work for maybe 3 hours a day on average.

I took a little break after the initial build and have started to add more features to it again, so some of the things you see might be extras on top of what I've written in this post (like the pro version). But everything detailed here was part of the initial build and MVP.

I shared it with my friends and family a couple of weeks ago, and have seen some other users trickle in from leagues that some of my friends have created. It's really fun to see that happen since originally I was just planning on this being something fun for me and to practice my skills.

Even with those new users (It's up to about 60 now -- nothing crazy, but definitely fun to see) I still haven't broken out of Firebase's free tier. I don't think I will for a while, assuming people keep signing up. I've had lots of good suggestions on some new features, so I'm going to dive back into the development of it next week and keep building!

If you have any ideas, suggestions, or feedback, I would love to hear them. I am by no means a great dev, and I'm sure that there are things I could improve on with this or add to it to make it a better app. Hopefully this has been helpful, and feel free to ask me anything in the comments below and I'll try and answer!

Thanks!