Prakash Poudel

Thu Oct 26 2023

This website was built using Remix, Tailwind and Sanity. I always wanted to have a personal blog website with full control over all the contents and design aspects. This project is made live with that exact dedication and motive.

How this project came to life?

When it comes to blog websites, there are platforms like Wordpress, Hashnode and many more that provide out of the box setups and deployment features for everybody. But didn't want to rely on those platforms being a developer myself and thought of building a custom blog website myself.

I was always having thoughts of having a personal blog website with custom domain and with full control over the site. As I was being familiar with the Remix framework, I wanted to try further the capabilities and be more familiar with the framework which is also one of the reasons for this website to be built in remix although my proficiency in React or Nextjs.

What is Remix ?

Remix is a javascript framework that focuses on Server Side Rendering and has additional out of the box features regarding many scenarios which other frameworks require installing additional libraries.

Navigation and pending UI handling in Remix is so easy. Server side logic handling is also made easy by remix.

At first, I wasn't really thinking of building my blog website when I started using remix, but as I came to know more and more about it, I actually started liking it and now I have few projects built in remix including this one.

The Frontend

The frontend of this website is completely built with Remix using tailwind css. Most of the UI components are built from scratch without using any framework and some are generated by ChatGPT (hehe).

The layouts and pages are built using the latest Remix v2's layout conventions and routing is also handled accordingly.

 app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── concerts._index.tsx
│   ├── concerts.$city.tsx
│   ├── concerts.trending.tsx
│   └── concerts.tsx
└── root.tsx

For Styling, TailwindCSS is used as its flexibility and my proficiency in it.

Once you start getting used to tailwind, there is no going back to css. xd

For fetching the data from backend, I have used graphql-request library that allows making requests to the Graphql api easily. It is a fast, lightweight and easy to use library to interact with graphql apis.

The Backend

For backend, Sanity is used as it provides a headless CMS which is open source and free to use and deploy. This is There is no need to be worried about database configurations and deployment as sanity itself provides everything along with the CMS.

Using sanity is very easy and flexible. It lets defining schemas for the data to be strored and fetched through the sanity api.

Fetching data from sanity can be done either through GROQ or GraphQL. In this project, I have used GraphQL api which sanity itself provides for free.

The basic data fetching in remix looks somewhat like this:

import {useLoaderData} from "@remix-run/react";

export async function loader(){
  const data = await getDataFromBackendApi({options});
  return {
    data: data,
  }
}

export default function MyComponent(){
  const {data} = useLoaderData<typeof loader>();
  return (
      <div> 
        {JSON.stringify(data)}
      </div>
  )
}

Server side code can be written inside the loader funciton. The loader function runs at the server side before the page is rendered so the data is displayed instantly when the page loads.

Deployment

Deployment is done using vercel. Vercel is a open source hosting platform for javascript web applications which can auto update the latest changes in your github branch.