In this series, I am rewriting the code of my blog (ashutosh.dev) in Next.js and Mojolicious as backend. This is the first article of the series.

Why Rewrite?

Most of the time, rewriting the application is not a good idea. There are tons of reasons available that you should never rewrite your application. I do not differ from the critiques.

However, in my case, the UI of my blog sucks. It's not developed using the best practices and, its lighthouse score is on the lower side. It is not SEO friendly, and not optimized and, even not correctly responsive. I just developed it for the sake of development.

There are so many problems I identified with the web app, so I decided to rewrite it. Moreover, it's not timebound if it is delayed, by, a week or two or maybe three, I can still live with it.

Technology Stack to use

Frontend

• Tailwind as CSS framework
• NextJS
• Storybook
• GraphQL

Backend

Being a Perl lover, I'll use Mojolicious (Mic Drop).

Setting up the Project Frontend

In this part of the article, we'll setup

• The NextJs project
• Install Tailwind CSS Framework
• Set up Storybook
• Set up GraphQL with Apollo Client
• A Git repository

Setting Up Next.js Project

To create a new project in Next.js, execute the following command:

npx create-next-app

In the next step, it'll ask for the application name and, we name it ashutosh-dev. It's the name of my blog so, it makes sense.

Install Tailwind CSS

We'll install the Tailwind CSS by using the npm.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create the config file.

npx tailwindcss init -p  

Open the tailwind.config.js and replace purge: [] with

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

That's all. We configured Tailwind CSS. We'll import it under _app.js when we start developing the application.

Install the Storybook

A storybook is a UI development toolkit. It isolates the components and makes the development faster.

To install the Storybook,

npx sb init  

# Starts Storybook in development mode
yarn storybook

It starts the storybook client at port 6006.

How to use it, we'll discuss it later. For now, let's set up the Next.js project.

GraphQL with Apollo Client

To install the Apollo Client, run the following command:

npm install @apollo/client graphql 

Setting Up Git

The final section of this article is to set up the Git repository at GitHub.

I already created the Git repository at GitHub. Now I only need to push my code there.

Before that, we need to run the following:

git remote add origin https://github.com/akuks/ashutosh-dev.git
git branch -M main
git push -u origin main

Summary

In this article, we decide what technology stack we'll use to develop my blog. We also set up the project by installing the

• Next.js
• Created the Next.js Project
• Setup the Storybook
• Setup the Apollo client
• Setup the git repository

Stay tuned for the next article.

In our next article, we'll start developing the UI of our web application.