How to Over Engineer a Website

Building a web application requires two (sometimes one) components: a frontend and a backend, and a lot of infra-engineering. But ultimately, creating a full stack application can be outlined in a few steps:

  • Get a domain (usually from Namecheap or GoDaddy)
  • Choose your hosting platform (Heroku is simple, but AWS is quite often the go to)
  • Build your frontend and backend
  • Configure it all together

    The first step is to get a domain, a lot people use a GitHub domain because it's free, but honestly domains are really cheap. You can find some for very cheap on Namecheap, and in my opinion make your website an order of magnitude better than not having one.

    Once you have a domain, I recommend going to Cloudflare and configuring your DNS records. Depending on where you got your domain, this process could be different. I'm not too familiar with how CDNs work, but I know that this process enables HTTPS on your website, which makes life infinitely better.

    Once your domain is setup it's time to choose your hosting platform. Ideally, choosing one that has a lot of documentation, support, and most importantly YouTube content will make your life 10-20x better. Most people oft for Amazon Web Services, and that is the cloud provider I usually suggest. For a personal website the free EC2 instance is more than enough most of the time. AWS security groups also really come in handy down the line if you want to keep certain APIs behind a firewall. Heroku is also a viable option if your content is static (if you don't think a backend is necessary) and is a cheaper alternative.

    Once all of the infrastructure is setup it's time to actually do some web development. My currently tech stack is Next.js (React.js) for the frontend and Flask for the backend. What you choose for your frameworks doesn't really matter, hopefully since you can just deploy it in a Docker container; just make sure to choose something that is modern, well supported, and has a lot of documentation. For absolute beginners, I suggest using vanilla HTML. Once you have the hang of Javascript and HTML syntax, a lightweight framework like React.js is pretty handy. To make your life a million times easier I suggest learning Docker and Git. This will make deploying applications to the cloud a lot simpler.

    Side note: For CSS styling I find Tailwind CSS to be really neat tool. Here is a list of really helpful tools for web development that I think is really helpful:

  • Postman
  • React Dev Tools (Chrome Extension)
  • Docker (docker-compose)
  • Tailwind CSS
  • Cypress
  • eslint
  • Jest

    The backend can sometimes be tricky. The suggestion is to start really really small. Think about the bare minimum features you can add to your website for it to be pleasant enough for someone to look at it. Don't try to add too many things at once, build it up slowly over time. Most of the time you will find that adding a single feature (and making it work) takes up an enormous amount of time and you will be glad not to add too many. I like to use Flask (Python) with a basic PostgreSQL database. I store all my blog posts in the database, this serves as my simple CRM. I find this a lot cleaner than creating a new React.js file everytime I want to write a new blog post. But to each to their own. Some helpful tools for backend engineering with Flask:

  • loguru
  • SQLAlchemy
  • Poetry

    Once the application is wrapped up nicely, it's time to deploy the application to the web. Login to the cloud platform you chose and set up the infrastructure. There are a lot of available cloud infra out there so I won't describe them all. A basic AWS setup might be creating a simple EC2 instance and deploying it there. The setup that I use can be found: https://github.com/lipet2k/ec2_setup. AWS automatically sets up the static public IP for you, take note of this address and use it to setup your DNS via Cloudflare.

    Once you have configured your public IP with the DNS, your website should be all setup (sometimes the DNS takes a few hours to propagate, if after a few hours it still doesn't work, you know that things are wrong). Congratulations! You have a fully functioning website. To make your website more robust consider creating a VPN server, Jenkins CI/CD pipeline, admin portal etc., but for now this is enough to get you up and running.