I have started literally hundreds of side projects and never finished any that had any sort of substance. The projects I tend to be most successful with finishing are those I can complete in one sitting or at most one weekend (I have made A LOT of telegram bots).

However, I recently actually finished a side project that took me multiple months… and I think i’ll be able to do it again. By seeing a project through to completion, I learnt a lot about keeping myself motivated and, perhaps more importantly, which tools stayed (mostly) out of the way to enable me to focus on the idea rather than battling with errors.

This blog post is going to focus on the stack I used, and I will write another on how I launched sponsorasong and what I learnt.

The Idea

I have done my fair share of fundraising over the past century or so. The current options of fundraising platforms are a little mechanical, and I felt there was a room for a little gamification (and fun).

https://sponsorasong.com is an idea I have had in my head for a long time. The concept is a fairly simple one. Here’s an excerpt from the Product hunt launch Post:

Sponsor a song is a fun, new and exciting way to fundraise.

Those who are completing an event create a Spotify playlist and commit to listen to it whilst they complete the event. Each person who donates gets to select one song to add to the fundraiser’s playlist. Will you be kind and add a motivational track that you know will help your friend hit a Personal Best or will you scheme with others to ensure they have to listen to baby shark on repeat for the entirety of a marathon?

The choice is yours.

I wouldn’t be a good “founder” (I dislike this term for myself but am unsure how else to refer to myself) if I didn’t use this as an opportunity to try and drive you to the site so if the above does sound interesting, please check it out here.

The Stack

When selecting items for the tech stack I prioritised for rapid development, speed of deployment and ease of maintenance. I landed on the following items, and I’ll talk through why I think each of them was a great choice and why I’ll pick them again in the future.

• next.js
• vercel
• Cloudflare workers and CDN
• Stripe
• Amazon Relational Database Service

Next.js

next.js is the “app” framework I have been looking for for a long time. I’m a backend engineer by trade, and find frontend development pretty challenging due to the speed at which the space moves and CORS issues amongst other things. If you have even basic React knowledge, after a quick tour of the docs, next.js makes development rapid.

Next.js has a hot reload server all ready to go, and every change you make is instantly shown in the browser. It comes with an opinionated project structure, handles routing for you and more importantly for me includes the ability to write server side code right next to your client side code and pass it as props.

The below code is enough to make a http call on the server, get the response, pass it to the frontend and display it.

function Page({data}) {
    return (
        <div>
            {data}
        </div>
    )
}

// This gets called on every request
export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`https://.../data`)
    const data = await res.json()

    // Pass data to the page via props
    return {props: {data}}
}

export default Page

This allowed me to prototype and iterate really quickly. Previously I have used Create React App and then built a separate backend using Go or Node and switched between the code bases depending on which piece I was working on.

The only challenged I faced with next was when I tried to introduce some client side libraries. Next.js sometimes blurs what is going to be executed in the frontend and what will be Server Side rendered and can make debugging issues tricky. This could very well be due to my lack of expertise in this space though.

Vercel

Vercel used to be called zeit.co and before that it was now.sh. I have used it over the years to deploy static sites (this blog was previously hosted there, its now on Cloudflare workers). However, when starting a next.js project it pushes you towards using Vercel to deployment as it will “just work”. To get the project deploying using Vercel, according to the docs, you simply need to:

• Sign up to Vercel.
• After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
• Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
• After importing, it’ll deploy your Next.js app and provide you with a deployment URL. Click “Visit” to see your app in production.

In my experience it really is that simple.

Once setup, everytime I pushed to master, a minute or 2 later my code changes were reflected on my domain. This is a really powerful and rapid workflow, much better than anything else I have used before (which usually involved deploying multiple containers with NGINX in front of them).

Cloudflare Workers & CDN

I’m sure you are not surprised to see Cloudflare here. I use Cloudflare for all my domain management and get page rules, HTTPS, caching, DDOS protection and analytics for very little effort. As well as this, I used Cloudflare workers to schedule some code I wrote to check which campaigns need to be marked as closed and update their status in the Database. I used the Hello World template from here and then just set up a cron to execute the code daily in the dashboard. Wrangler made development of this very simple and was much easier than having to set up a crontab on a linux box or deploying a cronjob to a kubernetes instance (again, how I have done this previously).

Stripe

I needed a means to take payments, and I had some experience using Stripe. However, even if I didn’t, it is so easy to get going and they provide so many different examples, it will be my go to for every side project. For next.js, there is even this fantastic guide to getting it all hooked up!

As well as helping you capture transactions easily, Stripe also provides a great dashboard for managing payouts,refunds, disputes etc. For a lot of use cases, this means you won’t need to build out a back office system which is a huge time saver! Up to now, the Stripe dashboard has fulfilled all my needs and I have no plans to build anything custom. I am interested to see how long this remains the case though as I develop more complex features.

Amazon Relational Database Service

I’m not sure Amazon is the cheapest or the most user friendly way to create a database, but I have experience using it and I think one key takeaway for me for rapid development is to use what you know. I’m currently using the AWS free tier Postgres db and with my current throughput I won’t need to upgrade anytime soon. When developing locally, I use docker-compose and a postgres image.

Summary

The above tools helped me developer sponsor a song in record time (for me) and stay motivated as I got to spend most of my time developing features rather than battling tools. I would use all the above mentioned tools again (and intend to!).

I intend to write a follow-up post with how I launched the project and how it went in the next coming days.

Thanks for reading,

Matt