Welcome back to the how I built Blokfeed series, where I explain decisions around building Blokfeed. From problems to their solutions and thought process along the way. In the part, I will cover design decisions around Blokfeed's website.
Remember when trying to move quickly, use the tools you know. Don't be distracted by the latest and greatest, you can always refactor to those.
Let's get started...
What are the core functions of the site?
- Display articles and navigating users to the source ✅
- Allow users to search and filter for articles they care about ✅
- Allow users to save their search and filter criteria ✅
That's a pretty good start. As we will see in future posts I expanded this core functionality a bit.
From the start I knew SEO was going to be important and decided to build the site using Next.js a framework that allows for server side rendering of React. This allowed me to use React which I was familiar with, and get the benefits of server side rendering.
Now that I selected a framework to use, I decided to also bring in Tailwind CSS. I'm not the strongest with UI, but Tailwind makes it easier to build compelling UIs.
Ok so far so good, but you are probably wondering, how am I going to serve the articles I'm aggregating. The answer to that is an API built with NestJS. I know some of you may be saying, but you could use the API routing built into Next.js. I would have to agree, I could have used this, but I've built a bunch of utilities already for NestJS. Since I wanted to get the website live as quick as possible, I decided to use NestJS which greatly sped up the development process.
I know sometimes we can be attracted to the new shiny piece of tech and want to use it. I know I do. But, we have to remember sometimes we need to fallback to what we know and can always update in the future.
Over the next couple of weeks, I built the base of Blokfeed. No frills, but users were able to view articles, filter them, and be navigated to the source page. Awesome, but this left a big item remaining. Allowing users to save search and filter criteria.
This was a pretty big shift, all routes were currently public. Luckily I could lean on another tool (Auth0). I recommend if you are starting out to not roll your own user auth. There is a lot there, and there are many other services that can help and have build SDKs to help you in securing your app.
With that said, I chose to use Auth0, again because I've used them with other projects of mine and knew how to quickly set it up.
I used Auth0 to authenticate the user, and provide a JWT to the backend to authorize certain behavior. Sweet now that I could control the backend based on the user, I was able to build the ability for a user to search and save their searches. After a user logs in they are able to navigate to those saved searches and see the results without having set up anything else. Perfect!
In the matter of weeks I was able to build a website and API. No frills, there is always time for that. I'm continuing to modify the UI as I learn something new or want to try and improve the user experience.
Now that I have built this base functionality, how can I further help users sift keep up with the news? 🤔 Email alerts! Make sure to stay tuned to the next part of how I build Blokfeed as I explain how I handle email alerts.