Hello friends!

Welcome to my #buildinpublic series, where I'll be sharing the development of a fullstack MERN app using TypeScript. The app is a pet adoption platform that aims to connect pet lovers with animal shelters and give furry friends a new home.

In this series, I'll be taking you through each step of the development process. From the idea to the deployment, you'll get a behind-the-scenes look at the challenges, triumphs, and lessons learned along the way. Building in public can be a valuable learning experience, both for myself and for those following along.

This is an exciting opportunity to learn about the fullstack development process and see a project come to life. Let's get started on this adventure together!

You can follow along by bookmarking the link to this post or follow me on LinkedIn or Twitter, where I will also share all updates about my progress.

#1: The idea

I have just finished my last project, an overhaul of my personal website (the one you are looking at right now). It was just time for something new. I gave it a whole new minimalistic look and included features like darkmode, a contact form with a backend and a blog integration using a headless CMS.

Before I even started working on that though, I knew that I wanted to build out a fullstack project that solves a real world problem, to practice my MERN skills. So I took the time while building out my website, to think of a problem that I can solve with the MERN app.

I love animals and we have just reached the end of the corona pandemic. During the last two to three years, a lot of pets have ended up in animal shelters. That's very unfortunate for all the animals, and a heavy financial burden on those shelters.

With that in mind, I thought of ways to help both, animals and shelters.

The idea: A platform that lets its users search for and find a pet they wish to adopt, and also lets them get in touch with the shelter to start the adoption process.

Problem:

Finding an idea for a fullstack MERN project

Solution:

In the past I have gotten the advice to think of topics that I have an interest in and to find out what problems or possibilities for improvements there are within the scope of the topic of choice. Ideally those problems are real and a solution would help real people (or animals). So that's what I did and I can already see that it really helps to work with something I am interested in, because I will likely keep pushing when things get hard as I'll have a personal passion for helping animals.

#2: TypeScript

My original plan was, using JavaScript to build out this app. The MERN stack allows me to use JavaScript from start to finish for frontend and backend.

Since I am currently also job searching full-time, I have realised that there is a growing demand and usage of TypeScript out there. For that reason, I already planned on allocating a few hours per week on learning TypeScript, but in smaller projects.

My plans then changed, because of a recent chat with a senior developer, who said "why don't you use TypeScript in your MERN app project". I honesty haven't thought of this myself, because it felt very much "out of my league" at this point. I was more than sceptical and a little nervous, because it means that I would add another component to this project, which I don't have much experience with yet.

But, after going through some documentation and understanding what TypeScript really is compared to JavaScript, I felt a little better. All JavaScript is syntactically valid TypeScript, which makes it way less of a challenge than learning a new language from scratch.

Problem:

I have only worked with TypeScript once, and that was a while ago. It seems like I add another (unnecessary) challenge on top of my actual challenge of building the MERN app. Will I be able to do it?

Solution:

I had a good look at the offcial TypeScript documentation and learned about the differences between JS and TS. Once I realised, that I can't really mess up, because syntactically JS is valid TS, I decided to just go with it and use TypeScript for the pet adoption app.

#3: Choosing an API

One of the first questions I asked myself, after having decided on the topic and the tech stack I would be using was, "Where do I get the data from?" Since I am building a pet adoption platform, I knew I need data about the animals and the shelters and I need users to be able to search for animals including some search filters, get details about the pets that were returned by the search, and get the necessary information about the shelters. I had never chosen an API for a project myself, so I wasn't quite sure what to look out for or what I must avoid.

A fullstack MERN app - Choosing the right API.png

After some research, I came up with a list of criteria, that matches my personal needs for this project (this list might look very different for a different use case):

1. The API must be free or offer a free tier with the functionality I need

2. The API must have good documentation and enough resources for developers

3. There should be a good community behind the API provider or a way of receiving support in case I need help

4. I shouldn't have to worry about any legalities by using the API

5. It must be a legit API (provider)

With these points in mind, I referred to a list of public APIs on GitHub, which I have come across in the past. This list is sorted by topic, and, funny enough, the very first topic is "Animals". So I started going through these APIs one by one, to see if they offer what I am looking for and match my list of criteria.

Eventually I found what I was looking for in the free, well documented, well supported and legitimate Petfinder API.

Problem:

My challenge in this step was, to make a decision on the right API for my project, without knowing too much about how to choose one in the first place. What must I look out for, what is important and where do I find it?

Solution:

After a while of researching, I understood that the most important criteria for me, would have to be a free API or at least a free tier offering the functionality I need. I made this my top priority and simply checked all the APIs I could find against my list of criteria, until I narrowed it down to an API that ticks the most boxes. (In this case my choice ticks all the boxes)

--------------------------------------------------------------

You are now up to date with my progress in this project. 🎉

Use “this” from the beginning of your developer career.

Patrick

February 5, 2023

Connect your contact form to an email account — with HTML only

Patrick

February 5, 2023

How to use a custom domain on GitHub pages

Patrick

February 5, 2023

#buildinpublic: A fullstack MERN application (with TypeScript)

Patrick

February 2, 2023

Why you should create a GitHub profile README (as a job seeking dev)

Patrick

February 1, 2023