Now that we know what we're going to build from my last post, we can figure out how we're going to do it. This is the fun part where we can imagine all the cool tools we're going to use without actually having to dig into any documentation.
The Frontend
One of our requirements is to make the user interface intuitive and fun to use. That means it needs to be responsive and fast. For this reason, I figured I'd be super original and go React - not sure if you've heard about it before.
I have past experience with React and know that I can get up and running quickly with create-react-app.
I'm not a huge fan of CSS frameworks like Tailwind and prefer to build the UI from the ground up. For this reason, I chose SASS to handle styling.
At first glance there doesn't seem to be any need for a state management system at the scale of Redux, so I think we'll stick with React's useContext and useReducer to handle state management.
The Backend
We already know we'll be using Digital Ocean's App Platform to host the application. For the API, I figured we'd keep things consistent end-to-end and use NodeJS and Express.
Since we'll be serving a frontend, and also hosting an API we have two options: serve the frontend on a separate App Platform, or use the API to serve the React bundle.
I wanted to keep all the code in one repo to make it easier for one-click-deployments in the event anyone else wanted to try it out. For this reason I decided to use one server to both serve the bundle and host the API.
The Database
Our requirements specify that a user should be able to sign up/log in and have their data persist between sessions. This means we'll need a database of some sorts. My intial thought was to use a MongoDB database because of how well it integrates with the rest of the stack we've discussed, but DO doesn't support Mongo in their database components for App Platform (although you can launch a Mongo droplet from the Marketplace). Instead, I decided to go with PostgreSQL. We can use Sequelize to create models and run migrations on our database from our backend.
Now that we've got a stack in mind, let's take a look at designing the user interface...
Top comments (0)