Anime Reviews

How I Created This Website

TL;DR: Gatsby with TS, Strapi on VPS

This Is a Technical Post

So if you're here for the anime and don't know much about programming (specifically about web development), you probably won't understand anything.

The Tech Stack

Here a quick overview of the technologies I used for this project:

  • Frontend
    • React (Gatsby)
    • GraphQL
    • TypeScript
    • TailwindCSS
    • Hosted on Gatsby Cloud
    • Designed in Figma
  • Backend
    • Strapi
    • Hosted on Vultr VPS
    • Docker
    • PostgreSQL, SQLite
    • Apache Web Server

Frontend

I designed the website in Figma. The design is inspired by Glassmorphism. It's fully responsive and looks way more interesting than any of my past designs.
I've written the frontend code in Gatsby, which uses React and the power of static generation using headless CMS. So I just write the content somewhere, Gatsby pick it up, and the website gets updated. I'm using TypeScript, because it makes things a lot easier, I see an error message instead of thinking everything is okay, while it really isn't.
I pull the data from the backend through GraphQL. I've managed to setup automatic generation of the types of the queries. And it took a lot of work to figure out how to do it, which is weird, considering the fact that GraphQL and TypeScript are pretty big and GraphQL is pretty much already typed. Maybe it's just me, not knowing how to ask good questions.
I'm also using Tailwind, which is just awesome. The frontend is hosted on Gatsby Cloud

Backend

I use Strapi as a headless CMS, so I can create posts and review models without any trouble through a user friendly interface. A lot harder was to put the code on the Internet and make it available to Gatsby.
I host Strapi on VPS running Ubuntu 20. I learned Docker and dockerized the server to make it easy for me to setup and test the backend and deploy it on the VPS. The hardest part was forwarding the port to my domain. It took me a lot of time to figure out how to do it, mainly because either there aren't enough tutorials on using Nginx or Apache, or I just don't know how to use search engines. After many failed attempts, I've finally deployed the server on Apache2, connected to a domain bought on Dynadot and got my certificate with Certbot, so I have https on the domain the server is on.
I've also setup GitHub actions, so every time I push changes to the main branch, a worker SSH's to my VPS, pulls the newest changes and restarts the container. So all I have to do, is push the newest code.
Okay, it's not actually that simple. Which brings me to my next point:

A Flaw In My Workflow

I have a monorepo, which means that I have my frontend and backend code in one repo. So even if I just want to make changes to the frontend, I push to the same repo, which triggers restarting the backend. Which is no ideal, considering the fact that it takes a few minutes for the server to restart, so it's not working for that time. And in the meantime, the frontend gets deployed. And it quickly fails, after it realizes that the backend is not working.
I'll have to figure out a way to fix it, for example by splitting by frontend and backend code into separate repos and triggering redeploy on Gatsby on Strapi restart.

What Next?

I might add testing, probably few simple E2E testing for sanity check. I have to setup Google Analytics or something similar, because currently I have no idea how many, if any, visitors do I have. I'm considering adding i18n (posts in different languages)
I also want to add comments, and maybe allow other users to upload their own reviews. But the latter will require a lot of work - I would have to setup my own interface for adding review.
And I plan to add more reviews in the future myself c:

End

It was nice to make a project which combiners almost all I've learned in the last year - designing a website, coding it with type safety, . I'm pretty sure the only thing I didn't touch on was fetching the data on runtime and state management. But I plan to add features using those aspects of creating a website in the future
I also get an opportunity to write more stuff, to get better at it, which as you might tell, I really need.
I have a lot of reasons to keep this project going