Let's build Advice Generator App using React.js & Tailwind CSS.

by Mr. IT-man 31 May 2022 224

Hello everyone, I hope you all are doing well. I am back with another exciting web dev project,...

Hello everyone, I hope you all are doing well. I am back with another exciting web dev project, which will help to learn some new web dev skills as a Front-end developer.

In this tutorial, I will show you how you can build an Advice Generator App, It's one of the Frontend Mentor challenge projects and our goal is to make it look like the design given by the Frontend Mentor.

So without any further talk, Let's start building it ????.

Step-1 Initializing the Project

Create a new next-js app with Tailwind CSS bootstrapped in it.

You can use this one-line command to create a new nextjs app with TypeScript and Tailwind CSS.

npx create-next-app -e with-tailwindcss my-project-name

You can name your project whatever you want, I will name it anAdvice Generator App.

???? We are using TypeScript in this Project, so we have to explicitly define all the props, constants & function data types.

Now after creating the project open it in Vs Code or any IDE that you prefer.

Find theindex.tsxfile insidepagesdirectory. and delete everything and paste the given code below.

import type { NextPage } from 'next'
import Head from 'next/head'

const API="https://api.adviceslip.com/advice";

const Home: NextPage = () => {

return (
 <div className="flex min-h-screen flex-col items-center bg-[#1e1f29]">
 <Head>
   <title>Advice Generator App</title>
   <link rel="icon" href="/favicon.ico" />
 </Head>

)}

export default Home;

In this project we are usingManropefont, so for that, we need to import this font from google fonts.

And for the API part, we are going to useAdvice Slip API, which is a free API.

As you can see in the above code we have added a constant name API with the value of the API link

After that visit theglobals.cssfile inside thestylesfolder and import a google font link (Manrope Font) at the top of the file inside it.

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&display=swap');

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

So, now to use the font inside our app, we need to add it as a custom font inside thetailwindcss.config.jsfile.

module.exports = {
 content: [
   './pages/**/*.',
   './components/**/*.',
  ],
 theme: {
   extend: {
     fontFamily:{
       manrope:["Manrope"],
     }
   },
 },
 plugins: [],
}

Step-2 Creating the Components

If you see the design given by the Frontend Mentor Challenge, there are only two components that you can make.

AdviceCard.tsx
CircularButton.tsx

So, now create the components folder inside your project folder and create two files with the namesAdviceCard.tsxandCircularButton.tsx.

First, we will create theCircularButtoncomponent and then theAdviceCardcomponent.

Inside CircularButton.tsx

import React from 'react'

interface Prop {
 handleAdvice():void,
}

export const CircularButton = ({handleAdvice} : Prop) => {
 return (
 <button onClick={handleAdvice} className=" bg-emerald-400 px-4 py-4 rounded-full text-green-900 hover:bg-green-200 hover:text-emerald-500 hover:shadow-xl hover:shadow-emerald-600 hover:scale-105 transition duration-300 ease-in">
 <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
 <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
 </svg>
 </button>
 )
}

In the above code as you can see we have added a prophandleAdvice, which is a function that will fetch new Advice data every time the button gets clicked.

Inside AdviceCard.tsx

import React from 'react'
import { CircularButton } from './CircularButton';

interface TextProps {
 id: number,
 adviceText: string,
 handleAdvice(): void,
}

export const AdviceCard = ({ adviceText, id , handleAdvice }: TextProps) => {
 return (
 <div className="relative w-[380px] md:w-[450px] md:h-[280px] bg-[#323a49] mt-20 px-8 pt-8 pb-16 rounded-xl flex flex-col justify-center items-center ">
 <p className="text-md md:text-lg uppercase font-medium text-emerald-400 absolute top-8 mx-auto ">
 Advice
 {" "}
 <span className=" font-bold ml-2 ">
 #{id}
 </span>
 </p>
 <div className="text-lg md:text-2xl font-manrope font-semibold text-gray-300 leading-8 text-center mt-4">
 "{adviceText}"
 </div>
 <hr className="w-[380px] border-t-1 border-gray-500 mt-8 absolute bottom-16 mx-auto" />
 <div className="absolute -bottom-[30px] mx-auto ">
 <CircularButton handleAdvice={handleAdvice} />
 </div>
 </div>
 )
}

In this component also we are passing three props as you can see.

The three props are:

advice text
id
handleAdvice

Now we have made both the components, it's time to code the logic for fetching the API and displaying the data that we will get from it.

Step-3 Fetching the API

So basically, the API returns a single object which contains two fields theidand theadviceTextfield.

Now, visit the index.js file inside the Pages folder and create two constants with theuseStatehook inside theHomefunction, and set their default values as given below.

const [adviceText ,setAdviceText] =useState<string>("Never regret.
 If it's good, it's wonderful. If it's bad, it's experience.");

const [adviceId, setAdviceId] = useState<number>(143);

And also don't forget to import useState from the react library.

Now after that create an arrow function with the namefetchAdvice() and inside it fetch the API using the inbuilt fetch() function and store the result inside the constant namedata.

After that set the two pieces of the state with the value coming from the API and also create a function name handleAdvice() and call the fetchAdvice() inside it.

const [adviceText ,setAdviceText] =useState<string>("Never regret.
If it's good, it's wonderful. If it's bad, it's experience.");
 const [adviceId, setAdviceId] = useState<number>(143);

 const fetchAdvice = async () => {

 const res = await fetch(API);
 const data= await res.json();

 setAdviceId(data.slip.id);
 setAdviceText(data.slip.advice);
 };


 const handleAdvice= () => {
 fetchAdvice();
 };

Step-4 Import the components and pass the Props

At last, import the two components from the components folder and add those inside the Home function.

After all that theindex.tsxwill look something like this:

Inside index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import { useState } from 'react';
import { AdviceCard } from '../components/AdviceCard'

const API="https://api.adviceslip.com/advice";

const Home: NextPage= () => {

 const [adviceText ,setAdviceText] =useState<string>("Never regret. If it's good, it's wonderful. If it's bad, it's experience.");
 const [adviceId, setAdviceId] = useState<number>(143);

 const fetchAdvice = async () => {

 const res = await fetch(API);
 const data= await res.json();

 setAdviceId(data.slip.id);
 setAdviceText(data.slip.advice);
 };


 const handleAdvice= () => {
 fetchAdvice();
 };

 return (
 <div className="flex min-h-screen bg-gray-800 flex-col items-center py-2">
 <Head>
 <title>Advice Generator App</title>
 <link rel="icon" href="/favicon.ico" />
 </Head>

 <h1 className="text-emerald-200 font-bold text-2xl md:text-4xl font-manrope mt-4 rounded-xl hover:rounded-xl hover:shadow-lg hover:shadow-emerald-600 hover:bg-emerald-500 hover:text-emerald-100 px-4 py-2 transition duration-300 ease-in ">
 Advice Generator App
 </h1>
 {/* <CircularButton /> */}
 <AdviceCard id={adviceId} adviceText={adviceText} handleAdvice={handleAdvice} />
 </div>
 )
}

export default Home