Why I built this?

Working as a freelance developer means I can't really share any code I wrote for my clients.

This website is a way for me to showcase my skills. I'm always looking for feedback, so feel free to reach out to me if you have any suggestions or questions at bonu@bonu.dev.

I built this website using my favourite tech stack: Next.js, Tailwind CSS and Ruby on Rails. It might be an overkill for a simple portfolio, but this is what I use day to day on more complex projects.

Front end

I used Next.js to build this website. Next.js is a great framework for building applications of any size.

All of the public facing pages are statically rendered, which means they are fast and SEO friendly. Admin panel on the other hand is client side rendered, since it has forms and other dynamic content.

I tried limiting the use of 3rd party libraries to a minimum. All components are hand crafted and styled with Tailwind CSS. This allows me to keep the bundle size small and the website fast.

I also used SWR to fetch data from the server on the admin panel. It's a great library that makes data fetching, caching and updating easy and efficient.

Back end

Since the beginning of my career I've been using Ruby on Rails for most of my projects. It's a great framework for building APIs.

For the most part this looks like a typical Rails application. Devise for authentication, Blueprinter for serializing data, RSpec for testing.

But where to put the business logic? It seems like there is no consensus on this. I like to keep my controllers as thin as possible, so I put most of the business logic in ops. It's a pattern I learned in one of the projects I worked on and I've been using it ever since. Having a separate file for each operation makes the code easy to read and test.

But I didn't want to build a simple CRUD app. Had to throw in some third party integration. Each project can have multiple attached images, so I used Cloudinary to store them. It's a great service for storing and manipulating images and can generate thumbnails on the fly with simple transformation parameters.

Deployment

Since I wrote the front end in Next.js, it's only natural that I went with Vercel for deployment. Those guys are doing a great job at making deployment easy and fast. And I've yet to seen an easier way to set up a custom domain for a front end web application.

The back end is deployed on Heroku. It's a great platform for deploying and running server applications. One thing I like about heroku is their Postgres database. It's super easy to spin up a new database and connect it to the application.

By no means I'm an expert in dev ops, so I'm glad there are platforms like Vercel and Heroku that make deployment easy and painless. Both of them have the continuous deployment feature, so I don't have to worry about deploying the application manually, just need to push my code to Github