Since seeing these tweets, I decided to give wordle a try.

At first, it seemed like a basic game, nothing special about it just a basic minimal UI with input boxes and pretty straightforward. Then I started playing the game and it felt kinda cool.

Few key takeaways from the game

• A random five-letter word is generated.

• Six attempts at finding the word.

• No words are repeated (at the time of writing this post).

• Letter not present in the word are greyed out.

• Letter present in the word but at the incorrect location is marked as yellow.

• Letter present in the word and at the correct location is marked as green.

• Only a single word a day

• Option to share the boxes on Twitter or any social media application.

After playing around with the game, and being a developer I decided to create a clone. But I didn't really wanna create a web clone as there are already a ton of them present online and really wanted to try something out, like a mobile app or something else.

And that's when a video of fireship was dropped about building a CLI application using NodeJS.

I really wanted to create a CLI app and I have only created one before, so I decided to create a CLI clone of Wordle!

Building

So I started out by listing out the features that need to be implemented and the required items for the build.

• A collection of five letter valid words

• Six attempts at guessing the word

• Only show 1 word per day

• Save and display the previous guesses on the same day

• Option to share the result on Twitter or any other social media application

I started by creating a Github repository

Then I needed a collection of words, my friend from discord helped me get a collection of 12,930 five-letter words. I have no clue where he got the list from, but anyways really appreciate it.

The words list is present at my Github Repository. While you are at it, might as well star the repo :P

After I have all the words required, I started by creating a function to set the word for the day. I wanted to make the game such that on a particular day anyone using the app would be having the same word.

// src/cli/setWord.ts
export const setWord = async (today: Date) => {
  const referenceDate = new Date("01/29/2022").getTime();
  const diffTime: number = Math.abs(today.getTime() - referenceDate);
  const offsetDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  const newData: typeof data = {
    name: data.name,
    date: {
      ...data.date,
      [today.toLocaleDateString("en-GB")]: {
        word: words[offsetDays % words.length],
        guesses: [],
      },
    },
  };
  await fs.writeFileSync(
    path.resolve(__dirname, "../data.json"),
    JSON.stringify(newData)
  );
};

This function basically calculates the offset of the current day from the initial release of the package (29th of January 2022). And based on this offset I fetch the corresponding word in the words list.

After selecting the word for the day, I decided to create a function to get the user input. For getting the guess from the user I used the package called inquirer. This package has many options to fetch input from the user in the form of input, checkbox, etc.

export const getGuess = async (guessNumber: number) => {
  inquirer.registerPrompt("maxlength-input", MaxLengthInputPrompt);
  const { guess } = await inquirer.prompt([
    {
      type: "maxlength-input",
      message: `Enter guess #${guessNumber.toString()}`,
      name: "guess",
      maxLength: 5,
      validate: (input: string) => {
        if (input.length === 0) return "Enter some text";
        else if (input.length < 5) return "Enter 5 letter word";
        else return true;
      },
    },
  ]);
  const today = new Date().toLocaleDateString("en-GB");
  const jsonData = await JSON.parse(
    fs.readFileSync(path.resolve(__dirname, "../data.json"), "utf-8")
  );
  fs.writeFileSync(
    path.resolve(__dirname, "../data.json"),
    JSON.stringify({
      word: jsonData.word,
      date: {
        ...jsonData.date,
        [today]: {
          word: jsonData.date?.[today].word,
          guesses: [...jsonData.date?.[today].guesses, guess],
        },
      },
    })
  );
  return guess.toLowerCase();
};

After getting the user's guess, I needed to compare the guess with the word for the day and display the result according to the rules of the game. For displaying the colours for the background of each letter, I used the package called chalk. For performing all this, I implemented the following function

import chalk from "chalk";

export const displayGuess = (word: string, guess: string) => {
  const backgroundColors: string[] = [];
  for (let i = 0; i < word.length; i++) {
    if (word[i] === guess[i]) backgroundColors.push("green");
    else if (word.indexOf(guess[i]) !== -1) backgroundColors.push("yellow");
    else backgroundColors.push("white");
  }
  let finalLog = "";
  guess.split("").forEach((character, i) => {
    if (backgroundColors[i] === "green")
      finalLog += chalk.black.bold.bgGreen(` ${character} `);
    else if (backgroundColors[i] === "yellow")
      finalLog += chalk.black.bold.bgYellow(` ${character} `);
    else finalLog += chalk.black.bold.bgWhite(` ${character} `);
    finalLog += " ";
  });
  console.log(finalLog);
};

And finally, I check if the user made the correct guess. If the user made the correct guess display a congratulations message and display the shareable boxes also with a URL to Twitter which when clicked posts the result to Twitter. If the user doesn't make the correct guess the user is again asked to guess till the number of guesses left exhausts and finally the word is revealed.

And in the end, you would get something like this

The game is available on npm. To play follow these steps

# Installation step
# Using npm
npm install -g @abhinavrajesh/wordle

# Using yarn
yarn global add @abhinavrajesh/wordle

# Run the game
wordle

And that's it for this article! Do give your feedback on the application in the comments below.

Links:

• npm: @abhinavrajesh/wordle

• Github: AbhinavRajesh/wordle-cli [If you liked the project do give the repository a 🌟]

  Feel free to drop a PR or an issue if you find any bugs.

If you enjoyed the article do consider sharing the article and by following me on Hashnode and Twitter @_AbhinavRajesh_

🙌 Support

If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.

![Buy Me A Coffee](https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=abhinavrajesh&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff align="left")

🌎 Lets connect

Github
Twitter
LinkedIn

🎸 Feedback

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

Now to address the obvious reason why I'm writing this post, I'm really excited to share with y'all that I have received an internship offer from Github to join as DevRel Engineering Intern! 🥳

Where did I get this internship from?

There is this program called "Github Externship Program" which is a remote internship conducted twice every year(Winter and Summer Cohort) for students currently in their penultimate year of college. This program has 27 partner organisations which include famous organisations like Appwrite, Cred, Fampay, Hoppscotch, and many more!

More on it at their official website Github Externship

The application process

Applicants are supposed to write proposals for the organisation in which they are interested. Each organisation have multiple projects under them and an applicant can make 4 proposals in total to these 27 organisations.

Even though I could make 4 proposals, I only made 2 of them and both of them were to 2 different projects under Github(DevRel Engineer Engineering Project and Github India Engineering Project) because I was really interested in working at Github.

After a week, I got a mail saying my proposal for the DevRel Engineering role was accepted, and an interview was scheduled in the coming days. Different organisations have different approaches to this, some conduct coding tests before the interview, some have multiple rounds of interviews, etc. In the case of Github, there was only one interview for DevRel role.

I was mostly asked questions based on the proposal I had submitted and most of them revolved around the project, different UI/UX designs I have created previously, etc.

Fast forward to a few weeks, I received my offer letter yesterday!

How exactly did hashnode help me secure this internship?

There were 14,000+ students applicants and 8,000+ proposals made by students from India to these 27 organisations. And I'm really happy that I was among the few students out of these applicants who got selected! And this was mainly because of Hashnode!

During August and September of 2021, hashnode conducted 2 amazing hackathons along with Clerk.dev and Auth0.

This resulted in me brainstorming for ideas and creating 2 amazing personal projects, Chatbotish and Aura for my portfolio and without these hackathons, these projects would not have existed!

For the proposal, I gave these 2 projects as proof of my previous work/experience and during the interview for the same, I was asked questions based on these projects on how I've implemented the product, the technologies used, etc. These were kind of unique projects for a student with 100+ Producthunt upvotes and 1.5k+ page views and the interviewer really liked the personal projects I had created and the blog posts for the same and I believe because of this I landed the offer!

Closing notes

For anyone who is looking to crack their first internship/job, I would recommend you to

1. Create personal projects: Create a handful of projects. And always give importance to quality over quantity.
2. Learn concepts by creating projects, this is also a great way to get out of tutorial hell.
3. If you are trying to get into tech then I would recommend you to write more technical blogs! It helps to increase and broaden your knowledge.
4. Keep believing in yourself, and yes, dreams do come true.

Lets connect

If you have any questions, feel free to reach out to me via Mail, LinkedIn or Twitter, I would be happy to help you. The following are my socials and if possible drop a follow :)

• Mail: me@abhinavrajesh.com
• Github: AbhinavRajesh
  
• Twitter: _AbhinavRajesh_
  
• LinkedIn: abhinavrajesh
  

We would be building out a simple discord bot that would return the user profile stats by fetching the data from hashnode API when we enter a certain message such as ?hashnode or ?hashnode <username>

So let's get started!

Prerequisites

• Any code editor of your choice
• No prior knowledge of TypeScript or JavaScript (Though knowing a bit before following the tutorial is a good idea to help you understand better)
• Device with Nodejs installed (v16.9.1 is what I'm gonna be using for this tutorial)

Introduction

What is discord.js ?

It is a powerful Node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.

Usability, consistency, and performance are key focuses of discord.js, and it also has nearly 100% coverage of the Discord API. It receives new Discord features shortly after they arrive in the API.

What is TypeScript ?

TypeScript is a popular language created and maintained by Microsoft. It’s a superset of JavaScript, which makes all its features optional.

You can convert your existing JavaScript app to TypeScript and it should work as expected as long as your code is valid JavaScript. TypeScript allows you to set types on your variables and functions so you can type-check your code statically and catch errors at compile time.

You can also use modern features that are not yet supported in JavaScript.

Setting up the project

NOTE: I would link the source code required for this project at the end of this article, but I would suggest you to follow along for better understanding

1. Create a folder and inside the folder, open up the terminal and type out the below snippet

   npm init -y
   

   npm init initializes a project and creates package.json file and -y flag means "yes" to all default options. The generated file should look something similar to this

   // package.json
   {
      "name": "hashnode-bot",
      "version": "1.0.0",
      "description": "A discord bot to reply with stats of a user according to the user name",
      "main": "index.js",
      "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
          "hashnode",
          "discord",
          "bot"
      ],
      "author": "Abhinav Rajesh",
      "license": "MIT"
   }
   

   You may edit the file with whatever values you want, but I would recommend you to not edit it and leave it as it is if you don't know much about it.

2. Installing the required dependencies

   For this tutorial, we would be needing discord.js and also we would be needing few dev dependencies for setting up typescript with our project. We would also be needing nodemon for our project to make developing the bot easier. We would install the remaining dependencies as we progress further in the tutorial. Now to install the dependencies we use the following commands

   • Installing TypeScript

     # using npm
     npm install --save-dev typescript
     # or using yarn
     yarn add -D typescript
     

   • We would also be needing types for node

     # using npm
     npm install --save-dev @types/node
     # or using yarn
     yarn add -D @types/node
     

   • We would also be needing nodemon as a dev dependency. So every time you make a change, you would have to restart the server. And this is not really good for us as a developer. So what nodemon basically does is whenever we make a change in a file and save, it restarts the server on it's own!

     # using npm
     npm install --save-dev nodemon
     # or using yarn
     yarn add -D nodemon
     

   • And finally, we would be installing discord.js

     # using npm
     npm install discord.js
     # or using yarn
     yarn add discord.js
     

3. Setting up scripts

   Now, the thing is Nodejs cannot understand typescript and can only understand javascript. So we need to do something to compile the typescript code to javascript code. To do that we can add the following script to package.json file inside the "scripts"

   // package.json
   {  ...,
    "scripts": {
        "watch": "tsc -w",
     }
   }
   

   Now when you run npm run watch or yarn run watch what this script basically does is, it "watches" over the typescript files and convert them into javascript files inside dist folder in your project.

   We need to add 2 more scripts, one is start and another is dev. So your package.json should have the following scripts

   // package.json
   {  ...,
    "scripts": {
        "watch": "tsc -w",
        "start": "node dist/index.js",
        "dev": "nodemon dist/index.js"
      },
   }
   

   We would only be using the start script once we are completely done with the project, i.e, during the time of hosting the bot. The dev script would only be used during the development of the bot and would not be used in the production environment. It uses nodemon, which basically improves the developer experience as mentioned before.

4. Creating a folder for typescript code

   Inside the root of the project, create a folder src, this is where the code for typescript goes in. Inside src create a file name index.ts. This file would be the entry point for our application. For now, just add a simple console log in it just to test if the setup is working.

   console.log("Hello, World!")
   

5. Testing out if everything works as intended

   Now open up 2 terminals, one to watch for file changes and the other to convert all the typescript code to javascript code.

   # In Terminal 1
   # using npm
   npm run watch
   # or using yarn
   yarn run watch
   

   # In Terminal 2
   # using npm
   npm run dev
   # or using yarn
   yarn run dev
   

   And you should see something like this on the terminal

   

And that's it! 🥳 You are all set to follow along with this tutorial on creating a discord bot! Meet you in the second part of the series.

And as always, linking the GitHub repository with source code required for this article.

🙌 Support

If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.

🌎 Lets connect

Github
Twitter
LinkedIn

🎸 Feedback

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

A little about myself 🤗

I'm Abhinav Rajesh, I'm a UI/UX Designer and Full Stack Developer. I'm currently pursuing my Bachelor's degree in Computer Science and Engineering and am currently in junior year.

The journey

It all started when I was in the freshman year of my college, got motivated by my friends who were really good at technical writing and also the pandemic started and wanted to try out something new, so I decided to create a blog article on creating a "COVID-19 Tracker" to track the number of cases every day by fetching data from an API endpoint. This was the time when there were not many tutorials on this.

So, I started writing the blog, for every day I wrote like 2-3 paragraphs explaining in detail about the working of code with examples for around a week until one day I lost my motivation to complete the article. It was mainly because I saw few others posting an article on the same topic of creating "COVID-19 Tracker", so I felt like it was too late to publish the article and there was a lot to cover. So I decided to stop writing the article and deleted the draft!😶(I still regret not publishing the article)

As the time passed the thought of writing a blog post came to me at times but didn't really have any motivation to complete the article. Also, I hated how Medium worked. Asking to authenticate to view, advertising about their mobile app and much more annoying things for a reader and I really was looking for a platform where this wasn't a thing and which had a better user experience.

Blogging platform which I was looking for 🦸‍♂️

Three months ago, I was reading articles and found a few interesting ones. Most had similar UI but the thing which intrigued me the most was the reader experience for these blogs. It was an amazing reading experience, no signup required, no advertisements nothing. I thought this was some blog template on WordPress or something when I noticed "Proudly part of hashnode" and that's when I found hashnode! This blogging platform was exactly what I was looking for!

So I created my Hashnode account 3 months ago (on 17th June 2021 to be precise :P) and released my first blog on the 27th June 2021. Although I barely got any reactions for my initial few articles also views were not bad, I still kept writing hoping someday I would make it to the "Top stories from Hashnode" weekly newsletter.

During these times I participated in hackathons conducted by Hashnode and writing a blog explaining my project in detail really helped me on how to write better technical blogs. And then one day, one of my articles made it into the newsletter 🥳

I was so happy that my article made it to the top stories and this really boosted my morale to write more! This led to me finally completing my series How to Build a NextJS App using Typescript and TailwindCSS: The Complete Guide, got a good amount of reactions and the best part, hashnode promoted my article on their Twitter handle!

Hashnode played an important role in making me interested in technical writing and I'm really thankful for the things done by hashnode which really motivate me to keep writing more articles.

The art and business of technical writing: Session 1

Yesterday was the first day of Bootcamp and we had 2 amazing sessions by Sam Sycamore, Quincy Larson and Edidiong Asikpo.

Few of the points to take away from the first session by Quincy Larson

• Do you have advice for coming up with catchy titles or banners?

  • Being explicit is better than being clever.
  • Make sure the banner matches the title, and make sure text is readable on all types of devices such as mobile where most people are reading.
  • Keeping it simple is better.

• Recommended length to maximize success?

  Generally, as long as it needs to be, and no longer. Long-form absolutely has its place though. Deep dives on a specific topic can build up quickly, but make sure you have real content to fill that space.

• What if I'm not gaining traction?

  • Use reverse SEO strategies to write specifically about what people are searching for.
  • Alternatively, be personality-driven like thecodercoder or Catalin Pit . Build a reputation as being someone that is generally helpful!

• Some articles, no matter your presence, will have low engagement. Keep writing and keep practising

Few points to take away from the second session by Edidiong Asikpo

• She gave a clear definition of technical writing

  A type of writing where the author is covering a subject that requires direction, instruction, or detailed explanation.

• She also asked a good question, whether Writers are made or born?

  In my opinion, writers can be both made or born. Writing is a skill that can be developed over time. Where you start is not a direct indicator of where you can go!

• Audience perception is knowing what your audience wants and who is your audience. This can be determined by answering these questions

  • As a reader what would I need?
  • Where would they be reading? Probably a mobile phone
  • When would they be reading?
  • And most importantly, why will they be reading your article?

• Some resources to improve your technical writing skills

  • Google's writing style guide
  • Microsoft's writing style guide
  • FreeCodeCamp's style guide

• Get your audience' perception. Would they understand what you are writing or the certain terminology you are using?

There are plenty more amazing points said during the session, but unfortunately, I won't be able to add all of those points here, but these are the main takeaway from the session!

It was fun writing about the session as a blog post, and thank you Hashnode for conducting this amazing Bootcamp.

Is there something which I would like to change from the past?

I'm really regretting my decision of deleting the draft of the "COVID-19 tracker", really wish I had completed the post and published it. Even if you feel like it's too late, or feel like it's not good enough, still do publish the post, it may help someone :)

It's not about the destination, It's about the journey

- Ralph Waldo Emerson

So, that's it for this article, I would love to connect with you all people for reading the complete article and bearing with me :P, below are my social links, do follow me for more! Also, give your thoughts about the article in the comment section.

Lets connect 🌎

Github
Twitter
LinkedIn

Feedback 🎸

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

I'm really sorry for the gap between the articles, got busy with hackathons(Adding link to articles on my hackathon projects In case you wanna check it out) and stuff in life.

Previous Parts of Series

1. Part 1: Setting up NextJS with Typescript and TailwindCSS
2. Part 2: Fetching and displaying data from API in NextJS using getStaticProps, TailwindCSS @apply directive and Typescript Interface.
3. Part 3: Dynamic routing and API endpoints in NextJS

In the last article, we discussed about Dynamic routing and API endpoints in NextJS. In case you missed the article I would recommend checking them out first.

In this article we would be going through the following

• Adding meta tags with the help of Head provided by NextJS to optimize SEO of the pages.
• Script by NextJS
• ESLint
• Deploying NextJS Application

Head

Head is a built-in component for appending elements to the head of the page. We can add stylesheets, JS Scripts, meta tags, custom title, etc.

Head is really useful for SEO optimization and to rank the website higher in google indexing.

In our example we would be adding multiple meta tags to improve the SEO of our project.

If you got to the chrome devtools and run the lighthouse tests for SEO, you would see something similar as below

Now you may ask what's the use of title and description?

Title is really important for a page to be indexed at the top of the result. Learn More

The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search.

Description is as important as Title is. Learn More

Meta descriptions may be included in search results to concisely summarize page content

As this tutorial is just to make you understand what Head tag by NextJS does, I'm not diving deep into the SEO part. Would release an article on ranking higher in Google search index in coming future!

So, we would add title and description for out articles. To do that go to /pages/article/[id].tsx and change the Articlefunction to the following snippet

const Article = ({
  article,
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className="max-w-5xl mx-auto">
      <Head>
        <title>{article.title}</title>
        <meta name="description" content={`${article.body.slice(0, 140)}...`} />
      </Head>
      <Navbar />
      <div className="flex flex-col items-start justify-center mt-40">
        <h1 className="font-bold text-4xl capitalize mb-4">{article.title}</h1>
        <p className="text-xl">{article.body}</p>
        <Link href="/">
          <a className="py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded mt-4">
            Go Back
          </a>
        </Link>
      </div>
    </div>
  );
};

Here we have added Head tag inside the Article function and have added title and meta description tags. If you go to your browser and check the tab, you should see something similar

The title of the article acts as the title of the webpage! And if you inspect the page and check the head tag, you can see meta description tag too!

So from this example, we could understand that, whatever you input inside the Head component of NextJS, it gets injected to head tag of the page!

What if there are multiple Head tags?

NextJS handles multiple Head tags by itself. Just to be sure there are no duplicates we can add key prop in the meta tag. By default meta tags with duplicate names would automatically be handled by NextJS.

Similarly, we could add meta tags for our home and about page. This I would give as a practice for you to do, do try it out so you understand what it really does and let me know in the comments!

P.S. Also, create the about page for this application as a practice

Script

Previously to add script tags to your project, we would have to define script tag inside Head of NextJS in you page.

But since NextJS v11, NextJS comes with a Script component. The Script component enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance.

There are 3 loading priorities for the scripts:

• beforeInteractive: These are used critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed.

• afterInteractive: This mode is set as default if you do not specify strategy. These are the scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.

• lazyOnload: These are for scripts that can wait to load during idle time, such as chat support and social media widgets. (Chat widgets such as Chatbotish)

However, we won't be using Script component by NextJS for this application because we do not have any external scripts to load. But, here is a small example taken from the NextJS Documentation

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script strategy="afterInteractive" src="https://www.google-analytics.com/analytics.js" />
    </>
  )
}

Also an important point to note

next/script must not be placed in either a next/head component or in pages/_document.js.

And this brings us to the last section of this series

ESLint in NextJS

It is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

Since version 11.0.0, Next.js provides an integrated ESLint experience out of the box.

You just have to run yarn lint. It would throw any warning or errors present and fixing them accordingly is best practice. In this application if you run the command, there should not be any warning or errors as we are following best practices :)

Deploying the Application!

Vercel and Netlify are the best platform to deploy any react application.

For this tutorial I chose Vercel because the easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js! Also it automatically deploys from Github repository whenever a new commit is made.

Before this add your code to Github and create a repository and add the code to it.

Then Head over to https://vercel.com and create an account if you don't have an account already.

Once you are in the dashboard, click on New Project. Connect your Github Account with vercel.

Choose the repository where your code is. In my case it's nextjs-blog. Click on import

On the next screen, click on Skip for when it asks for Creating a Team

Click on deploy and your application would be deployed! 🎉

Uh Oh! If you check the build, it probably would have failed. It's because, we are trying to statically generate a the page using the data from the endpoint which is currently not deployed. Hence, the error. To fix this, we have to change all the statically generated pages (Home and Article Page) to be Server side rendered (Change all the types of getStaticProps and getStaticProps to types of getServerSideProps to getServerSideProps respectively).

I would recommend you to do this by yourself to understand how these works.

Once you have tried on your own, cross-check with the code snippets below. The /pages/articel/[id].tsx should look something like below snippet

// pages/articles/[id].tsx

import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Link from "next/link";
import Head from "next/head";

import { API_URL } from "../../constants";
import { Articles } from "../../types";

import Navbar from "../../components/Navbar";

const Article = ({
  article,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return (
    <div className="max-w-5xl mx-auto">
      <Head>
        <title>{article.title}</title>
        <meta name="description" content={`${article.body.slice(0, 140)}...`} />
      </Head>
      <Navbar />
      <div className="flex flex-col items-start justify-center mt-40">
        <h1 className="font-bold text-4xl capitalize mb-4">{article.title}</h1>
        <p className="text-xl">{article.body}</p>
        <Link href="/">
          <a className="py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded mt-4">
            Go Back
          </a>
        </Link>
      </div>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await fetch(`${API_URL}/articles/${context.params!.id}`);
  const article: Articles = await res.json();

  return {
    props: {
      article: article,
    },
  };
};

export default Article;

And edit the index.tsx as follows

import { InferGetServerSidePropsType } from "next";
import { Articles } from "../types";

import Navbar from "../components/Navbar";
import Article from "../components/Article";
import { API_URL } from "../constants";

export default function Home({
  articles,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <div className="max-w-5xl mx-auto">
      <Navbar />
      <div className="grid grid-cols-1 md:grid-cols-2 space-x-5 space-y-5">
        {articles?.map((article) => (
          <Article
            body={article.body}
            id={article.id}
            title={article.title}
            userId={article.userId}
            key={article.id}
          />
        ))}
      </div>
    </div>
  );
}

export const getServerSideProps = async () => {
  const articles: Articles[] = await (
    await fetch(`${API_URL}/articles`)
  ).json();

  return {
    props: {
      articles,
    },
  };
};

Now, if you visit the deployed page you would most probably see a blank page. Now why is that? Remember we setup API_URL in the previous article? We need to to add the domain in the constants.ts file.

To get the url for the deployed version, go to the project and copy the one present here

const __prod__ = process.env.NODE_ENV === "production";

export const API_URL = __prod__ ? "https://REPLACE_WITH_THE_DOMAIN_IN_DASHBOARD" : "http://localhost:3004/api";

Then, push the changes to github and you are good to go!

Similarly, you may also deploy to Netlify , it's also an amazing hosting provider.

As always, linking the Github Repository.

Wrapping up the series

This was the final article of this series and I had lot of fun creating this. And I apologize for the delay of this article but I'm pretty sure you guys would have a fair amount of idea on NextJS, TailwindCSS and TypeScript. In case you feel any difficulty, feel free to contact me through comments or from my social accounts which I'm linking at the end of this article.

Github Repository

Support 🙌

If you're enjoying my articles, consider supporting me with a coffee ☕️ or upvoting the articles. It really motivates me to keep going.

Lets connect 🌎

Github
Twitter
LinkedIn

Feedback 🎸

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

I'm Abhinav Rajesh and today I'm here to introduce you all to my project for #Auth0Hackathon.

Introducing Chatbotish: Adding Feedback, FAQ, Bug report, Feature request to your website made easy.

Chatbotish is an easy to use widget to add to your amazing web apps to increase user engagement. With Chatbotish, you can place a widget to your website and make your customers engage with your website, more than just normal browsing.

Coming up with the idea 🤔

To be honest, it took me a lot of time to come up with this idea (I was even considering not to submit the project for this hackathon 😶), I only started creating the app 2 weeks ago!

Anyways, so about 2 weeks back, I was at my home, testing out different open-source projects, when I noticed a minor bug for an application. So, I decided to report the bug by creating an issue in Github. No big deal right? Then something struck my brain. There are many users who do not know/use Github and are not well versed in technology. So reporting bugs and requesting features for an application was not possible unless they contact the maker directly.

So I decided to create a widget which can be added to a website by just adding 2 lines of code which can serve as a Feedback Form, Bug Report Form, Feature Request Form, FAQ Section and Contact Section, where all the responses from the forms would be available to the maker at dashboard!

TL;DR

Here is a small demo(~4 mins) of chatbotish explaining in detail on how to setup and add Chatbotish to your website!

Features ✨️

Add Anonymous feedback form to your website in seconds!

The biggest advantage of anonymous feedback is that responses tend to be more honest; when someone has to identify themselves, they may have a tendency to hold back for fear of damaging a relationship or making themselves look bad.

Bug Reports

Often when a user encounters a bug in your application they may not know how to create an issue on github. With the help of Chatbotish you can add a simple form for reporting bugs!

Listen to your customers need

Quite often there would be times when users wished a particular feature was present in the application but have no idea where they should ask for it. With the help of Chatbotish you can add a simple form for accepting feature requests!

Contact

For simple one page application, for users to contact you, you would have to create a separate contact page. With the help of Chatbotish you can add a simple page in the widget for displaying contact details!

FAQ Section

Tired of giving the same answer to users asking same question over-and-over again? Add an FAQ section in minutes for your website with the help of Chatbotish!

Dashboard

Manage different projects, view installation steps for different web apps and view responses for different forms in the dashboard

It's a Progressive Web App 🎉

It's a PWA, it means that you can install the web app into you phone/tab/desktop and use it to view reported bugs, feature requests and much more!

Why and what technology did I use to make this app?💻

• NextJS

  • The React Framework for Production
  • Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

• TypeScript

  • Why did I chose typescript? It ships less bug to production and most of the minor mistakes such as getting types of variable/function parameter wrong in developments get caught easily.

• TailwindCSS

  • Easy to use utility-first css framework.
  • I'm really thankful that tailwindCSS exist, because of which I was able to create the UI Fast!
  • It feels like I have more control over the styling of a component as in case of Bootstrap or other similar framework it's different with pre-built component with less to no modification possible.

• Firestore

  • Flexible, scalable NoSQL cloud database to store and sync data for client- and server-side development.
  • For storing the chatbot details and the user' email(Used as unique identifier)

• Auth0

  • Used for authenticating user using traditional email-password authentication or Google OAuth. All user related details such as Email, First Name, Last Name, etc. are stored here
  • I was worried thinking that I wouldn't get much time to integrate Auth0 with my NextJS application, but then this video by James Q Quick and Auth0 was a relief for me when I found out there was a NextJS SDK for Auth0 which would take care of almost all parts of Authentication related stuff.

• Geist-UI

  • An open source design system for building modern websites and applications.
  • Geist UI is an elegant and beautiful React component library with Geek style, originating from Vercel design system. And I love how Vercel' website design, simple and modern!

• Vercel

  • Vercel and Netlify are the best platform to deploy your react application.
  • I chose Vercel because the easiest way to deploy Next.js to production is to use the Vercel platform from the creators of Next.js! Also it automatically deploys from Github repository whenever a new commit is made.

Quality of Code

Same as last hackathon, this hackathon too I have used the same for ensuring the quality of code.

• Prettier VS Code Extension
  • An opinionated code formatter
  • Supports many language
  • Used for formatting the code so that other contributors can read the code easily
• TypeScript
  • For type checking for different functions and components to ship the app with as minimum bugs as possible
• ESLint
  • It is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
  • Since version 11.0.0, Next.js provides an integrated ESLint experience out of the box.

Github Repo / Live URL

Leaving a ⭐ would make my day :D

What's in the pipeline?

• Hashnode Integration as a widget: As a blogger, I would love to know what people think about my blog and also what do they expect of my blog. Although there is comment section available for each blog post, people won't give their honest opinion due to reasons mentioned before. Adding a widget would do the job well!
• Dark mode: Developers love dark mode and I would be trying to implement it as soon as possible.
• Option to add custom tabs with customizable content.
• Push notification/email reminders for when a certain number of bug reports are made.
• Option to add a chat window.
• Remove Firestore and use a free alternative.
• And much more! If you have any feature in mind which might make this app better then feel free to drop an issue at my GitHub repository or through Chatbotish from Chatbotish 😉 and I would be more than happy to go through them!

What did I learn from this hackathon?

As compared to last hackathon I didn't get much to learn, probably because of time constraints but I did manage to learn something new and also increase my knowledge.

• I was able to increase my knowledge on Firestore, Figma and NextJS.
• I haven't used GeistUI before, I saw it on some projects before and I really wanted to test it out, and finally got a chance to use it for my project. (Would recommend 10/10)
• Most importantly learnt how to create a widget, I took most of the time researching on how to create one.
• And finally got to learn about Auth0, didn't expect it to be this easy to integrate with projects. I did have some hiccups in between but Auth0 docs / Youtube tutorials helped me a lot.

Contributing to Chatbotish

This is an open source project so you're always welcome to contribute ideas, report issues or send in pull requests!

GitHub Repository

Credits 💰

• Learnt to create widget from this amazing blog post by Creating React “Widgets” that can be embedded on any website, by anyone - Gio Logist
• Auth0 and Next.js SDK - Add Authentication in Minutes! by Auth0
• As always I would like to thank Stackoverflow, without which the project may not even exist!

Support

If you're enjoying my app, maybe consider supporting me with a coffee ☕️ or reacting to the article or Leaving a ⭐ to the repo would make my day and motivate me to keep going :D

Lets connect

Github: AbhinavRajesh
Twitter: _AbhinavRajesh_
LinkedIn: abhinavrajesh

Feedback

Thank you for reading this article. I'd love to hear feedback and thoughts on Chatbotish. Looking forward to your views.

I'm Abhinav Rajesh and today I'm here to introduce you all to my project for #ClerkHackathon.

Introducing Aura: See your mood in a whole new light.

We know our mood changes throughout the days. But what if you could see it?

Introducing Aura, an easy to use mood tracking app that takes your daily life's mood into account. It allows you to understand yourself better and helps you maintain an even mood throughout the day. The app has various features such as graphs, statistics, insights, and ambience sounds to improve your mood.

Coming up with the idea 🤔

So, I was reading through an article a while back on Impact of the Coronavirus Pandemic (COVID-19) on Mood Disorders and Suicide and there was this paragraph which intrigued me

Mood disorders are rising exponentially due to fatalities, economic turndown and isolation. Little attention is also given to health workers and practitioners, who are severely affected and overwhelmed by this emergency. Considering the global number of deaths - about 380,000 - the entire world is affected by these processes in different and faceted ways. Confinement, future instability, and fear not only exacerbated pre-existing issues, such as domestic violence, social phobias and depressive symptoms, but also trigger new psychopathological problems, sometimes escalating even in suicide.

I thought of creating an app where user can add in their mood for the day with notes on why their mood was good/bad which helps the user to monitor their mood over a period of time on a dashboard to check if their mood is improving or deteriorating as the day passes. They could show their profile to their therapist and get to work with them why their mood was bad and help improve their mental health! But then I got too lazy 😪 to create the app and finally thanks to Clerk.dev and Hashnode for organizing the hackathon so that I could finally create this! 🎉

Features ✨️

Add your mood to calendar

It's super easy to add your mood to the calendar with just few clicks!

Mood History

View your mood history displayed similar to Github contributions or as in a monthly calendar view!

Analyse your mood

View and Analyse your mood in the form of beautiful graphs!

Enhance your mood with Aura

Listen to 20+ ambient noise to enlighten your mood and get relief from stress and anxiety

It's a Progressive Web App 🎉

It's a PWA, it means that you can install the web app into you phone/tab/desktop and use it as a native app!

Why and what technology did I use to make this app?💻

• React
  • A JavaScript library for building user interfaces
  • I like how easy it is to setup and get started with a React project using CRA.
• TypeScript
  • Why did I chose typescript? It ships less bug to production and most of the minor mistakes such as getting types of variable/function parameter wrong in developments get caught easily.
  • In love with this since I started using typescript
• TailwindCSS
  • Easy to use utility-first css framework. Helping me to ship the product x10 faster :D
  • It feels like I have more control over the styling of a component as in case of Bootstrap or other similar framework it's different with pre-built component with less to no modification possible.
• Firestore
  • Flexible, scalable NoSQL cloud database to store and sync data for client- and server-side development.
  • For storing the mood of the user and the email(Used as unique identifier)
• Clerk
  • Used for authenticating user using traditional email-password authentication or Google OAuth. All user related details such as Email, First Name, Last Name, etc. are stored here
  • I'm amused as how easy it is to integrate with react app. Usually I use firebase for authentication, so for private route I would have to create separate components to check if the user is authenticated or not and redirect them accordingly, which took a lot of time in development. But with clerk these components were prebuilt! It was super easy to use clerk and I'm so glad that I found clerk.
• ChartJS
  • Simple yet flexible JavaScript charting for designers & developers
  • I needed something really good for displaying the beautiful graphs of users mood and ChartJS was perfect! The react-chartjs-2 package made the job really easy to integrate the graph with react application
• Howler
  • Audio library for the modern web.
  • For the aura section (Ambience Noise), I needed some package which would play sound in the browser. So I searched for a package to do this job and found Howler was the perfect fit for my use case.
• Vercel
  • Vercel and Netlify are the best platform to deploy your react application.
  • I chose Vercel because it's really easy to deploy your application from your GitHub and also it automatically redeploys the app whenever there is a new commit in main branch!

Quality of Code

• Prettier VS Code Extension
  • An opinionated code formatter
  • Supports many language
  • Used for formatting the code so that other contributors can read the code easily
• TypeScript
  • For type checking for different functions and components to ship the app with as minimum bugs as possible
• ESLint VS Code Extension
  • It is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

Github Repo / Live URL

Leaving a ⭐ would make my day :D

What's in the pipeline?

• Dark mode: Users love dark mode and I would be trying to implement it as soon as possible.
• Daily push notification/email reminders for users to remind them to enter their mood.
• Suggest methods to improve users mood when they feel low.
• Weekly emails with reports and ways to improve their mood if their average mood score is low for the week.
• A tab to enter and store users best memories so they could relive that moment and be happy.
• And much more! If you have any feature in mind which might make this app better then feel free to drop an issue at my GitHub repository and I would be happy to go through them!

What did I learn from this hackathon?

Believe it or not, I actually got to learn a lot of cool stuff from this hackathon

• I learnt to use ChartJS to display different line/bar graphs.
• I learnt how to play audio from browser using the Howler package.
• I have used Firestore before for my group projects but never really learnt it. I mostly use MongoDB as database for my personal projects and I really wanted to try Firestore this time so that I could learn how to use it and it was fairly easy to learn.
• And finally this amazing tool, powering the hackathon and authentication system of Aura, Clerk.dev. I'm amazed on how easy it is to use and setup authentication for react application and also the documentation for this is really good. Also it is very developer friendly would recommend you guys to give it a try. It's still in early stages and hopefully brings more amazing features in the future!

Contributing to Aura

This is an open source project so you're always welcome to contribute ideas, report issues or send in pull requests!

GitHub Repository

Credits 💰

• Logo "Heavily inspired" from dribble
• Ambient Background Noise Tracks
• And finally I would like to thank Stackoverflow, without which the project wouldn't be as good as it is now(Or maybe non-existent!).

Support

If you're enjoying my app, maybe consider supporting me with a coffee ☕️ or reacting to the article or Leaving a ⭐ to the repo would make my day and motivate me to keep going :D

Lets connect

Github: AbhinavRajesh
Twitter: _AbhinavRajesh_
LinkedIn: abhinavrajesh

Feedback

Thank you for reading this article. I'd love to hear feedback and thoughts on Aura. Looking forward to your views.

Previous Parts of Series

1. Part 1: Setting up NextJS with Typescript and TailwindCSS
2. Part 2: Fetching and displaying data from API in NextJS using getStaticProps, TailwindCSS @apply directive and Typescript Interface.

In the last article, we discussed Routing in NextJS, interfaces in TypeScript and @apply directives of TailwindCSS. In case you missed the article I would recommend checking them out first.

In this article, we would be going through a bunch of stuff like

• Dynamic Routing
  • Displaying article in a new dynamic page
• API in NextJS
  • getStaticProps
  • getStaticPath
• Using API instead of Fake Server

Dynamic Routing

In the last article, we ended it when we displayed all the articles on the homepage.

Now we would be creating a page to display the article when clicked by the user. For that create a folder inside the pages folder and name it article and inside the article folder create a new file [id].tsx.

Your folder structure should look something like this

pages/
┣ api/
┃ ┗ hello.ts
┣ article/
┃ ┗ [id].tsx
┣ index.tsx
┗ _app.tsx

Now inside article/[id].tsx add the following code

// pages/article/[id].tsx
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Link from "next/link";
import Navbar from "../../components/Navbar";
import { Articles } from "../../types";

const Article = ({
  article,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return (
    <div className="max-w-5xl mx-auto">
      <Navbar />
      <div className="flex flex-col items-start justify-center mt-40">
        <h1 className="font-bold text-4xl capitalize mb-4">{article.title}</h1>
        <p className="text-xl">{article.body}</p>
        <Link href="/">
          <a className="py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded mt-4">
            Go Back
          </a>
        </Link>
      </div>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${context.params!.id}`
  );
  const article: Articles = await res.json();

  return {
    props: {
      article: article,
    },
  };
};

export default Article;

Here in the above code, we are fetching the data from a fake server according to the id of the post the user clicked on and displaying the result.

Now when we click on any article, it should show some page similar to this

But there is a small issue affecting the performance here. That is, each time we are sending a request to the article it fetches from the API and displays the result after server-side rendering. To make it more performant what we can do is to change the Server-side fetching to static fetching. So what basically happens is it creates the page in build time and returns the page when requested! [More on this on Part 2 of this series] So change the code to following

// pages/article/[id].tsx
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
import Link from "next/link";
import Navbar from "../../components/Navbar";
import { Articles } from "../../types";

const Article = ({
  article,
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className="max-w-5xl mx-auto">
      <Navbar />
      <div className="flex flex-col items-start justify-center mt-40">
        <h1 className="font-bold text-4xl capitalize mb-4">{article.title}</h1>
        <p className="text-xl">{article.body}</p>
        <Link href="/">
          <a className="py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded mt-4">
            Go Back
          </a>
        </Link>
      </div>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async (context) => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${context.params!.id}`
  );
  const article: Articles = await res.json();

  return {
    props: {
      article: article,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);
  const articles: Articles[] = await res.json();

  const ids = articles.map((article) => article.id);

  const paths = ids.map((id) => ({
    params: {
      id: id.toString(),
    },
  }));
  return {
    paths: paths,
    fallback: false,
  };
};

export default Article;

Here the getStaticPaths specifies all the dynamic routes to pre-render pages based on data. And getStaticProps fetches the data at build time.

API in NextJS

Your NextJS app can be used as an API! If you visit the http://localhost:3000/api/hello, you would be seeing the following endpoint which returns a json object with name as key and John Doe as value

Let's create an endpoint to replace the fake server which we were using. In the root directory, create a file named data.ts and add the code from my here or copy the following code

// data.ts
export const data = [
  {
    userId: 1,
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
  },
  {
    userId: 1,
    id: 2,
    title: "qui est esse",
    body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
  },
  {
    userId: 1,
    id: 3,
    title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
  },
  {
    userId: 1,
    id: 4,
    title: "eum et est occaecati",
    body: "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
  },
  {
    userId: 1,
    id: 5,
    title: "nesciunt quas odio",
    body: "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",
  },
  {
    userId: 1,
    id: 6,
    title: "dolorem eum magni eos aperiam quia",
    body: "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae",
  },
  {
    userId: 1,
    id: 7,
    title: "magnam facilis autem",
    body: "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas",
  },
  {
    userId: 1,
    id: 8,
    title: "dolorem dolore est ipsam",
    body: "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae",
  },
  {
    userId: 1,
    id: 9,
    title: "nesciunt iure omnis dolorem tempora et accusantium",
    body: "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas",
  },
  {
    userId: 1,
    id: 10,
    title: "optio molestias id quia eum",
    body: "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error",
  },
];

Now inside the api folder create an articles folder and add 2 file, index.ts and [id].ts.

Inside the index.ts add the following code

// pages/api/articles/index.ts
import { NextApiRequest, NextApiResponse } from "next";
import { data } from "../../../data";

export default function handler(_req: NextApiRequest, res: NextApiResponse) {
  const articles = data;
  if (articles.length > 0) return res.status(200).json(articles);
  return res
    .status(500)
    .json({ message: `Error fetching the articles. Please try again later.` });
}

We fetch all the articles from the data.ts file which we created just now and sends the article as a response to the request.

If you visit the endpoint http://localhost:3000/api/articles you could see all the articles present there

Now in api/articles/[id].ts file add the following code

// pages/api/articles/[id].ts
import { NextApiRequest, NextApiResponse } from "next";
import { data } from "../../../data";

export default function handler(
  { query: { id } }: NextApiRequest,
  res: NextApiResponse
) {
  const article = data.filter((article) => article.id.toString() === id);
  if (article.length > 0) return res.status(200).json(article[0]);
  return res.status(404).json({ message: `Article with id: ${id} not found!` });
}

Here it fetches the data from the data.ts file and returns the article which has the same id as in the query

Using the API instead of the Fake Server

Instead of using the fake server, we can use the API endpoint created by us just now. So, head over to pages/index.tsx file and change the url inside the getStaticProps function to /api/articles

// pages/index.tsx

export const getStaticProps = async () => {
  const articles: Articles[] = await (await fetch("/api/articles")).json();

  return {
    props: {
      articles,
    },
  };
};

This would give us an error saying TypeError: Only absolute URLs are supported, so what we have to do now is, create a constants.ts file in the root directory and add the following code

const __prod__ = process.env.NODE_ENV === "production";
export const API_URL = __prod__ ? "" : "http://localhost:3000/api";

Here, this file checks if it's production, if it is it should point to the production URL (Which we haven't added yet, we would add it when we deploy. For now leave it as an empty string) else it would point to localhost:3000/api

Now, change the function to following would fix the problem

// pages/index.tsx
export const getStaticProps = async () => {
  const articles: Articles[] = await (
    await fetch(`${API_URL}/articles`)
  ).json();

  return {
    props: {
      articles,
    },
  };
};

And in pages/article/[id].tsx change the functions to following to point to our new URL

// pages/article/[id].tsx
export const getStaticProps: GetStaticProps = async (context) => {
  const res = await fetch(`${API_URL}/articles/${context.params!.id}`);
  const article: Articles = await res.json();

  return {
    props: {
      article: article,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch(`${API_URL}/articles`);
  const articles: Articles[] = await res.json();

  const ids = articles.map((article) => article.id);

  const paths = ids.map((id) => ({
    params: {
      id: id.toString(),
    },
  }));
  return {
    paths: paths,
    fallback: false,
  };
};

Now the app should work as before, but this time we are fetching the data from the API we created! 🎉

That's it for this article. In the next article, we would be looking at Head by NextJS and we would be deploying the application to Vercel. Until then stay tuned!

As always, linking the Github Repository.

Support 🙌

If you're enjoying my articles, consider supporting me with a coffee ☕️ or upvoting the articles. It really motivates me to keep going.

Lets connect 🌎

Github
Twitter
LinkedIn

Feedback 🎸

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

I'm Abhinav Rajesh and this is a series on "Getting started with NextJS using Typescript and TailwindCSS". This is 2nd Part of the series where we would be learning how to fetch data from an API, TailwindCSS and Typescript Interfaces. in case you missed the 1st part, checking it out first would be a good idea as I discuss how to set up the project in that article.

In this article, we would be going through a bunch of stuff like

• Routing
  • Index Routes
  • Nested Routes Dynamic Route segments
• Different methods to fetch data
  • getStaticProps
  • getStaticPath
  • getServerSideProps
• Module CSS
• TailwindCSS
  • Classes
  • @apply directives
• Typescript
  • interfaces

Routing ⛕

Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory it's automatically available as a route. The files inside the pages directory can be used to define the most common patterns.

• Index routes

  The router will automatically route files named index to the root of the directory.

  pages/index.tsx → /
  pages/about.tsx → /about
  

• Nested routes

  The router supports nested files. If you create a nested folder structure files will be automatically routed in the same way still.

  pages/blog/first-post.js → /blog/first-post
  pages/dashboard/settings/username.js → /dashboard/settings/username
  

• Dynamic route segments

  To match a dynamic segment you can use the bracket syntax. This allows you to match named parameters.

  pages/article/[slug].js → /article/:slug (/article/hello-world)
  pages/article/[...all].js → /article/* (/article/2020/id/title)
  

Now as the routing has been explained, now let's start building 🛠️

First, create a components folder in the root directory and your file structure should look something like this

┣ components/
┣ pages/
┣ public/
┣ styles/

In the components folder create a Navbar.tsx file, and inside that put the following code

// components/Navbar.tsx
import Link from "next/link";

const Navbar = () => {
  return (
    <nav className="flex px-16 py-8">
      <h2 className="flex-1 font-bold text-2xl">Dev Posts</h2>
      <ul className="flex-1 flex justify-around">
        <li className="px-4 py-2">
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li className="px-4 py-2">
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

The above code creates a simple navbar. You can see that there are class names which we have used. The style for these classes come directly from TailwindCSS. For Eg. In the above code,

flex -> display: flex;
px-* -> padding in horizontal by a particular amount in rem units
font-bold -> font-weight: bold;
text-2xl -> font-size: 1.5rem;

There are many more different types of utility classes, you can check them out in the Official TailwindCSS documentation.

The other important thing we used is the Link component exported by next/link. It is used for Client-side transitions between routes.

Now, inside the pages directory inside the index.tsx file, remove everything in the return statement and replace it with the following code

// pages/index.tsx
import Navbar from "../components/Navbar";

export default function Home() {
  return <Navbar />;
}

Now, if you run the server, using the command

yarn dev
// or
npm run dev

and go to http://localhost:3000(If you have changed the port number, then go to the port you changed to) you can see the navbar we just created! 🎉

Fetching data 🎣

For data fetching, we have special functions which can be used to fetch the data and pass the data as props to the pages.

Now, there are 3 separate methods to fetch the data.

• getStaticProps (Static Generation): Fetch data at build time.
• getStaticPaths (Static Generation): Specify dynamic routes to pre-render pages based on data.
• getServerSideProps (Server-side Rendering): Fetch data on each request.

For this example, we would be using the getStaticProps function. We would be fetching data(articles) from a fake server and display the articles. For this we would be fetching the data in pages/index.tsx file and send the data to a new component in components/Article.tsx as props and display the articles by mapping over the items.

So, create a new file in components/Article.tsx and add the following code

// components/Article.tsx
import Link from "next/link";
import styles from "../styles/Article.module.css";

interface Article {
  id: number;
  userId: number;
  body: string;
  title: string;
}

const Article = ({ id, userId, body, title }: Article) => {
  return (
    <Link href={`/article/${id}`}>
      <a className={styles.card}>
        <h3>{title} &rarr;</h3>
        <p>{body.length > 50 ? `${body.slice(0, 45)}...` : body}</p>
      </a>
    </Link>
  );
};

export default Article;

One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping”. In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

Here you may also notice that we used objects for class names instead of string. That's because by default Next.js supports CSS Modules. CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

Adding the tailwindCSS classes inline may make the tsx files less readable, so instead of that, we can write the tailwind classes in a separate css file using the @apply keyword. So create a new file Article.module.css in the styles folder in the root directory and add the following code

/* styles/Article.module.css */
.grid {
  @apply flex items-center justify-center flex-wrap max-w-3xl mt-12;
}

.card {
  @apply m-4 p-6 text-left md:w-11/12 no-underline border border-gray-100 rounded-lg transition-all duration-150 ease-in-out;
}

.card:hover,
.card:focus,
.card:active {
  @apply text-blue-400 border-blue-400;
}

.card h3 {
  @apply mb-4 text-2xl font-semibold;
}

.card p {
  @apply m-0 text-2xl;
}

@media (max-width: 600px) {
  .grid {
    @apply w-full flex-col;
  }
}

Now inside the pages/index.tsx file add the following code

// pages/index.tsx
import { InferGetStaticPropsType } from "next";

import Navbar from "../components/navbar";
import Article from "../components/Article";

interface Articles {
  body: string;
  id: number;
  title: string;
  userId: number;
}

export default function Home({
  articles,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div className="max-w-5xl mx-auto">
      <Navbar />
      <div className="grid grid-cols-1 md:grid-cols-2 space-x-5 space-y-5">
        {articles.map((article) => (
          <Article
            body={article.body}
            id={article.id}
            title={article.title}
            userId={article.userId}
            key={article.id}
          />
        ))}
      </div>
    </div>
  );
}

export const getStaticProps = async () => {
  const articles: Articles[] = await (
    await fetch("https://jsonplaceholder.typicode.com/posts?_limit=10")
  ).json();

  return {
    props: {
      articles,
    },
  };
};

You may notice that we are using the same interface in both the files, so what we can do is create a new file in the root directory called types.ts and add the interface there instead

// types.ts
export interface Articles {
  id: number;
  userId: number;
  body: string;
  title: string;
}

And replace the Article interface from both pages/index.tsx and components/Articles.tsx with the following import

import { Articles } from "../types";

Now in the browser, your app should look something similar to this

And that's it for this article. In the next article, we would be learning how to create pages dynamically using different functions offered by NextJS. Until then stay tuned.

As always, linking the Github Repository.

Series

• Part 1: Setting up NextJS with Typescript and TailwindCSS

Support 🙌

If you're enjoying my articles, consider supporting me with a coffee ☕️ or upvoting the articles. It really motivates me to keep going.

Lets connect 🌎

Github
Twitter
LinkedIn

Feedback 🎸

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

Next.js is a production-ready framework built on top of React and Node.js. It ships with all the features you need to get your React app up and running in no time.

You can use Next.js to build static or dynamic apps since it supports both client-side and server-side rendering. Next.js v9 introduced API routes, which allow you to extend your Next.js app with serverless functions built with Node.js, Express.js, GraphQL, and so on.

Next.js uses automatic code-splitting (lazy loading) to render only the JavaScript needed for your website. As an added bonus, this makes Next.js great for SEO.

What is TypeScript?

TypeScript is a popular language created and maintained by Microsoft. It’s a superset of JavaScript, which makes all its features optional.

You can convert your existing JavaScript app to TypeScript and it should work as expected as long as your code is valid JavaScript. TypeScript allows you to set types on your variables and functions so you can type-check your code statically and catch errors at compile time.

You can also use modern features that are not yet supported in JavaScript. And don’t worry about browser support — TypeScript compiles to plain JavaScript, which means your TypeScript code will never ship in the browser.

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework for rapidly building custom user interfaces. You can say it is a cool way of writing inline styling and achieve an awesome interface without writing a single line of your own CSS! Tailwind isn’t the first utility CSS library, but it is the most popular at the moment and the best in my opinion.

Setup

I have created a GitHub repository with starter files you can either clone the repository(Can be used as starter files for other amazing projects! Maybe give it a ⭐ while you are at it 😃) or follow the steps below

1. Setting up a new NextJS app with Typescript
   Setting up a NextJS project with Typescript is actually really easy. Running the following command would create a basic NextJS app with Typescript support.

   npx create-next-app nextjs-crashcourse --ts
   # or
   yarn create next-app nextjs-crashcourse --typescript
   

2. Adding TailwindCSS to the project
   Go inside the project folder and install the required dependencies

   cd nextjs-crashcourse
   // using npm
   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   // using yarn
   yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
   

   Creating the tailwind configuration file

   npx tailwindcss init -p
   

   This command would create a tailwind configuration file(tailwind.config.js) and a postcss configuration file(postcss.config.js)

3. Editing the tailwind.config.js file
   Change the file to the following code snippet

   // tailwind.config.js
   module.exports = {
    purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
   }
   

4. Adding tailwind to your CSS file
   Add the following lines of code to the top of the styles/global.css file

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

And that's it! 🥳 You have successfully set up the files required for the series. Also, note that you could use this as boilerplate code for your "next" application! Meet you in the second part of the series.

🙌 Support

If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.

🌎 Lets connect

Github
Twitter
LinkedIn

🎸 Feedback

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

SASS short for Syntactically Awesome StyleSheet (Yes, as the name suggests, it's really awesome), it is just CSS but better (Basically you can say SASS is CSS on steroids!). It is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets

Why SASS?

SASS has few options which aren't offered by CSS. Few of them are

1. Variables: With SASS, you can save information in variables to be used again later. So it’s possible, for example, to centrally store a colour value under a catchier variable.

2. ** Mathematical functions:** In SASS, you can also use mathematical operations like +, -, *, /, or %. This allows you to influence size specifications.

3. Functions: Other functions also make it easier to work on the design. These allow you to modify colour values or analyze lists, among other things.

4. Mixins: Mixins, simply said, are templates. You can either create them yourself or simply integrate them into your own code when using a framework.

There are many more amazing features offered by Sass.

Syntax

Sass includes two syntax options:

1. SCSS (Sassy CSS): Using the .scss file extension and is fully adjective with CSS syntax

2. Indented (simply called ‘Sass’): using .sass file extension and indentation rather than brackets; it is not fully adjective with CSS syntax, but it’s quicker to write.

Adding it to your React Application

Adding it to CRA app and NextJS app is a bit different, I will explain how you can add it to both the applications.

Adding SASS/SCSS to NextJS Application

It is a straightforward process, you just have to install the sass package and you are good to go!

// using npm
npm i sass

// using yarn
yarn add sass

Adding SASS/SCSS to CRA Application

React-scripts uses sass-loader v8, which prefers node-sass to sass (which has some syntax not supported by node-sass). So we would be using that package instead

// using npm
npm i node-sass@4.14

// using yarn
yarn add node-sass@4.14

Version 4.14 is preferred over the latest version of node-sass because it would throw an error. Or you could refer the below image and install the node-sass version according to your Node version!

After installing the node-sass/sass package now you just have to rename the .css file extension to sass or scss and change the imports, that's it! You have added the sass/scss to your react application.

I hope this blog post helped you guys.

🙌 Support

If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.

![Buy Me A Coffee](https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=abhinavrajesh&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff align="left")

🌎 Lets connect

Github
Twitter
LinkedIn

🎸 Feedback

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.