Forem: raivikas

Introducing FeedbackHive.online

raivikas — Sun, 16 Apr 2023 08:12:34 +0000

Hello everyone, I'm Vikas Rai and I hope you all are doing well. This is the third time, I have participated in the Hashnode.com Hackathon.

So this is the project that I have created:

FeedbackHive

Demo Link

Demo Credentials:

Email: test@gmail.com & Password: test123

Dashboard -/dashboard

Dashboard -/product-reviews

Introduction

In today's fast-paced digital world, businesses are constantly striving to stay ahead of the curve by gathering valuable customer feedback. One of the most effective ways to do this is through sentiment analysis.

Sentiment Analysis is the process of analyzing customer feedback to determine whether it is positive, negative, or neutral.

It is a crucial tool for businesses to gain insights into customer opinions and identify areas for improvement.

FeedbackHive is a web application that uses the power of MindsDB to predict sentiments of customer feedback. MindsDB provides the predictive modeling capabilities to categorize feedback as positive, negative, or neutral.

With FeedbackHive , businesses can automate the feedback collection and analysis process, making it easier to improve customer satisfaction and drive growth.

About MindsDB

MindsDB is an open-source platform that allows developers to build and deploy machine learning models using SQL.

It provides a simple and intuitive interface for creating predictive models without requiring extensive knowledge of machine learning.

With MindsDB, developers can quickly and easily build models for a variety of use cases, including sentiment analysis, fraud detection, and customer segmentation.

Some key points about MindsDB:

MindsDB is an open-source platform for building and deploying machine learning models using SQL.
MindsDB automates the process of feature engineering, which is the selection and transformation of data features to improve model performance.
MindsDB offers natural language processing (NLP) capabilities for analyzing and processing text data.
MindsDB provides a simple and intuitive interface for building and testing machine learning models, making it accessible to developers of all skill levels.

In my project, I used these features of MindsDB.

MindsDB AI Tables
MindsDB Models (For Training models and Predictions)
Used Hugging Face engine for model training.

Check out more about MindsDB here.

Using MidsDB to Create and Train the Sentiment Analysis Model

Step 1: SignUp on the MindsDB Platform

First signup on to the MindsDB platform and create your account, after that, you will see a dashboard like this, which is the Cloud editor where you write SQL queries to create and train Models.

Visit cloud.mindsdb.com, to signup for free.

Step 2: Upload Data to MindsDB

Once signed up to MindsDB, you can see an ADD button top-right corner of the cloud editor, and click on it you will see two options files and databases.

MindsDB provides two options two upload data on its platform to train your models.

First is files based, you can directly upload (.csv, .xlsx, .json) files and minds will automatically create a table for you, the other option is to connect an external or local database and fetch data from it to train your, models.

We will use files based method, so I have a .csv file that I created with customer_reviews data, which contains the following columns (Name, email, product type, product name, customer review, and ratings).

We only need a customer reviews column, to train our model

Step 3: Training our Model

After uploading the file data, you can run this query in the Clouds editor to see the contents of the file.

SELECT * FROM files.file_name

In my case file name is reviews_500 :

SELECT * FROM files.reviews_500

After that, we can train our model with this data by using this query:

CREATE MODEL mindsdb.sentiment_analyzer_model
FROM files
 (SELECT * FROM files.reviews_500)
PREDICT sentiment // column name you want to predict
USING
engine = 'huggingface',
task = 'text-classification',
model_name = 'cardiffnlp/twitter-roberta-base-sentiment',
input_column = 'customer_reviews',
labels = ['negative', 'neutral', 'positive'];

To check the status of the model, you can run this query

SELECT *
FROM mindsdb.models
WHERE name='your_model_name';

In the above query, as you can see, I have used the "Hugging Face Engine" for training my model.

The labels, tell the model that you should predict results from these provided keywords.

Tip: Don't add spaces or " - " in the column name, you can either use Snake_case or camelCase lettering.

Step 4: Testing our model

Now to test whether our model is working or not you can run the following command,

SELECT sentiment FROM mindsdb.sentiment_analyzer_model
WHERE name='Vikas rai'
and email='ff@gg.com'
and product_name='One Plus 11R' 
and product_type='Smartphone'
and rating=3.1 
and customer_reviews='Camera Battery Performance & All Specs Are Decent. But 200gms weight is heavy.';

As you can see, by reading the review you can tell that it is neither positive nor negative, which means it is neutral.

Let's see, whether the predictions of the model are correct or not, run the above query in the cloud editor and see the response/prediction of the model

As you can see our model has predicted the right sentiment.

Step - 5 Connecting to frontend

After that, I used Next.js, React.js, Tailwind CSS and Supabase to create the Frontend.

I used MindsDB Javascript SDK , for connecting MindsDB to the front end.

Here is the code for connecting to mindsDB and querying the models to predict the sentiment by passing the customer review from the form data.

export async function getServerSideProps() {
  const { data: sentimentData } = await supabase
    .from('sentiments')
    .select('id, customer_reviews')
    .is('sentiment', null)

  if (sentimentData.length === 0) {
    console.log('NULL')
    return {
      props: {},
    }
  }
  const id = sentimentData[0]?.id
  const review = sentimentData[0]?.customer_reviews

  const string = `"${review}"`

  const query = `SELECT * FROM mindsdb.sentiment_analyzer_model WHERE customer_reviews=${string}`

  // Connecting to MindsDB via Email & Password

  try {
    await MindsDB.connect({
      user: process.env.EMAIL,
      password: process.env.PASSWORD,
    })
  } catch (error) {
    // Failed to authenticate.
  }

  // Passing the "Customer Reviews" obtained from 
  // the form submitted by users
  // to MindsDB Model (Sentiment_Analyzer_Model)

  const queryResult = await MindsDB.SQL.runQuery(query)
  const data = await queryResult.rows[0].sentiment

  // Updating Sentiment Clolumn Data in database

  const { error } = await supabase
    .from('sentiments')
    .update({ sentiment: data })
    .eq('id', id)
  if (!error) {
    console.log('Updated !!!')
  }

  return {
    props: {
      data,
    },
  }
}

Note: The code for connecting and fetching data from MindsDB Databases and Models should be done inside a server component means on the Server side and not on the Client side, because on the client side, you will get a CORS error.

Because of this silly mistake, I wasted 2-3 days around this error, later I got help from Tyler.S from the MindsDB Slack community.

Do check out MindsDB Slack Community, it amazing place to build connections and also ask any problems related to MindsDB in general.

Check out the Javascript SDK.

Features of FeedbackHive

Feedback Forms: It has a built-in multi-step product feedback form that has these fields (Name, Email, Product Type, Product Name, Customer Reviews, and Ratings), although I am planning to add a customizable form.
Integration with MindsDB: Integrated FeedbackHive with MindsDB to predict sentiments behind those reviews and feedback.
The dashboard page shows the charts of sentiment analysis and the ratings created using the Chart.js library.
The Product reviews page shows the reviews of the user in a beautiful card layout.

Inspiration

Honestly, I did not have any inspiration for creating this web app, but I was thinking about what application should I make using MindsDB which can be helpful for others, so the first thing that came to my mind was Sentiment Analysis.

And then I thought of creating sentiment analysis for product feedback and reviews.

Why did I build this?

The desire to improve customer satisfaction by gathering and responding to customer feedback.
The need to track feedback trends and identify areas for improvement in a product or service.

Although I created this web application for this hackathon, I aimed to build this for those people and businesses who gather feedback and reviews to improve their products.

How to use FeedbackHive

As a person who wants to analyze their customer feedback, visit feedbackhive.online, and sign up using your email and password.
After that you will be redirected to the Dashboard page, where you can see all the reviews and their sentiment analysis with a beautiful UI.
At starting the dashboard will have some dummy data, you can delete or save them to the positive sentiments tab.
Now to collect new feedback, you can share this Form Link, which contains a product feedback/review form.
Once the user fills out the forms, the data will be saved database and also updated in the dashboard.
Now you can see the customer review data with predicted sentiment analysis.

The Code

You can get the code from my GitHub Repository , you can find all the code and also a README.md file which contains instructions for using this application locally on your computer

Github Repo Link

Conclusion

Although it is a very simple project, I have done my best that I can do to create this project using MindsDB.

I'm a Front-end developer and had no idea about machine learning and Python but still, I tried my best and build this application because MindsDB had a Javascript SDK, which was very helpful.

I had a great experience building FeedbackHive and learned a lot of new things, especially SQL and Machine learning, about different techniques involved in training and prediction.

I love creating things, solving problems, and learning new technologies and it involved all of them.

I struggled a lot while creating the backend part and integrating it with the front end but huge thanks to the MindsDB community over Slack, they helped me a lot by answering all my queries and problems.

Special thanks to Mr. Tyler.S , Mr.Zoran , and Miss. Martyna , they helped me so much by clearing my doubts and providing answers to my queries.

Although it was very challenging and I learned so many things that I haven't known yet.

I would appreciate your feedback on the project.

Thank you for reading the blog and viewing the project.

Upcoming Features

Ability to create customizable forms as per user need
User Specific Dashboards

Some Useful Links

Social Profile Links

Introducing TaskUpp App - Task Management made easy.

raivikas — Fri, 30 Sep 2022 17:31:19 +0000

TaskUpp App

Demo Link

Introduction

TaskUpp is a task management website that you can use to manage your daily tasks and also create and maintains your daily notes and tasks.

It's another Task management app like ClickUp.com or Notion, but I have tried to improve the UI Design in my version of the Task Management app.

You can simply create your account and start managing your tasks. effortlessly.

And that's done, now go and have fun with TaskUpp.

AWS Amplify Studio

AWS Amplify Studio is a visual interface that allows developers to easily build and ship complete web and mobile apps in hours.

With Amplify Studio, you can quickly build an app backend, create a rich user interface (UI) React components, and connect a UI to the backend in clicks.

Amplify Studio exports all UI and infrastructure artifacts as code that you would write yourself, so you can maintain full control over your app design and behavior. Ship faster and scale smoothlywith no cloud or AWS expertise required.

In my Project, I used these features of the AWS Amplify Studio.

Amplify Studio Amplify DataStore (Aws DynamoDB) AWS S3 Storage AWS Cognito (User Authentication) AWS AppSync

Features 🚀

First thing, It helps you create Task Card to manage your Project or Goals.
You can create different Boards which will help you distinguish between Completed, In Progress, or Todo Tasks.
The best feature is the Drag & Drop feature which lets you drag and drop cards between Boards to change the status of your tasks.
You can also add different Labels to your Task Cards to help you quickly see certain things that several tasks have in common, like requirements, locations, dependencies, or important time constraints.

Inspiration

Honestly, I wanted to create this app for a long time.

Actually, I use a Task Management app called ClickUp.com. Its features were really amazing and I was very impressed by those features.

After that, I thought to create a similar app, with enhanced UI design

I have created this for those, who have to manage their daily tasks in one visual dashboard and let them create to-do lists, manage projects, and assign take notes.

How to use TaskUpp Web App

First, visit taskupp.in, and sign up using your email, username, and password.
After that you will be redirected to Onboarding Page.
Then, you will be redirected to the dashboard.
You can update your profile in the profile tab.
On the Dashboard you can Add a Board and Inside that Board, you can Add Tasks.
You can (Drag and Drop your Task cards Between Different Boards).
You can Create, Delete, Edit and your Task cards and Notes.

The Code

You can get the code from my GitHub repository.

Steps to run the app locally:

Step-1: Git Clone the project

   git clone https://github.com/raiv200/TaskUpp.git

Step-2: Install the dependencies

  npm install

Step-3: You do need to create Aws Amplify Account and the various Schema Models

Go o aws.amazon.com and Sign Up.
After that, in the search type Amplify Studio and click on it.
Set up Amplify Studio by giving a suitable name for the app and set the environment to dev mode.
Then after that you will see something like Launch Amplify Studio. Click on it and proceed.

Step-4: Create Schema Models

I have used (username with email) as a part of AWS Amplify Authentication.
For the Schema Models, here is a screenshot of the Schema Models that I Created.

Step-5: Start the development server

Now open your project in your favorite IDE, (VsCode) and then start the development server.

   npm run dev

Feedback and Conclusion

Although it is not a very great project, I have done my best that I can do to create this project.

I'm a Front-end developer and wanted to make the app's design as cool as possible, but I enjoyed building this project as a full-stack project and learned new tech like (AWS Amplify Studio).

I love creating things, solving problems, and learning new technologies and it involved all of them.

Challenges I Faced 😥

I have used AWS before in one of my project where I used AWS EC2 to host my a web app that's it.

I haven't used it for building backend for web app and as a database.

I struggled a lot while creating the backend part and integrating it with the front end.

Although it was very challenging and I learned so many things that I haven't known yet.

I would appreciate your feedback on the project.

Thank you for reading the blog and viewing the project.

Some Useful Links 😊

Web App Related

Connect with me:

Introducing Devtree.link - Create your Mini portfolio in minutes.

raivikas — Wed, 29 Jun 2022 07:32:16 +0000

Hello everyone, I'm Vikas Rai and I hope you all are doing good. This is the first time, I have participated in Hashnode Hackathon. Here is my Project - Devtree.link (Create your Mini portfolio in minutes).

Dapp Introduction

Devtree.link is a website that you can use to create your mini portfolio, which contains your image and your social and dev profile links.

It's basically a ( linktr.ee clone ), but I have tried to make a web3 version of it.

It's based on web3, so you can use your Metamask Wallet to connect to the dapp and after that, you can fill a simple form in which you can add your social link/dev profile links.

I choose to host the Application on Linode servers which is one of the requirement of the Hackathon to use any one service of Linode.

And that's done, now share your profile URL anywhere you want.

Project Image Gallery

So this is the project that I have created:

Demo Link of Project: Devtree.Link

Demo Link of My Profile: My Devtree Profile

Landing Page - Dark Mode

Landing Page - Light Mode

Dashboard

My Profile Page

Community Chat

Features

First thing, It helps you create your mini portfolio, in case you don't have your portfolio.
You can add a social link or dev profile like Github or any other if you have one.
Share your dev tree anywhere you want.
It also has a community chat section, where you can chat with other developers and share your thoughts.

Inspiration

Well, honestly, I wanted to create my version of (linktree).

I have created this for those, who don't like to create their portfolio or I say don't want to waste their time creating one.

But they need to have some sort of portfolio, which helps them to share their important social or dev profile links ( Like their Blog link, Github Profile Link, Twitter Profile, etc.)

How to use/create a profile on devtree.link

First, visit the devtree.link , and use your Metamask wallet to connect to the Dapp.
Then, go to Settings Tab and change your Username.
Go to Links Tab and add your Social/Dev Profile Links.
Update your Image in the Settings Tab.
Visit My Profile Tab to see your Devtree.
Share your Devtree profile link with others using the Share Button.

Tech Stack Used

This is my all-time favorite tech stack:

Next.js (Fullstack Framework for React.js).
React.js (Front-end UI Library).
Tailwind CSS (CSS Framework).
Moralis.io (Web3 Provider)
Supabase.io (For Database)
Linode (For Hosting the App)

The Code

You can get the code from my GitHub Repository.

Steps to run the app locally:

Step-1: Git Clone the project

   git clone https://github.com/raiv200/devtree-link.git my-project

Step-2: Install the dependencies

  npm install

Step-3: Create a .env.local file and add these 4 environment variables


NEXT_PUBLIC_APP_ID=" "

NEXT_PUBLIC_SERVER_URL=" "

NEXT_PUBLIC_SUPABASE_URL=" "

NEXT_PUBLIC_SUPABASE_ANON_KEY=" "

Step-4: Create an account on Moralis.io and Supabase.io and get the environment variables.

You can get the first two environment variable by creating project on moralis.io.

After creating project, you will see, a settings tab.
Click on the settings tab , and the you will see DappCredentials.
Copy Dapp URL and Paste in between the quotes of NEXT_PUBLIC_SERVER_URL.
Then Copy Application URL and Paste in between the quotes of NEXT_PUBLIC_APP_ID.

And that's it for the Moralis Part.

And the next two environment variable by creating account on Supabase.io.

After creating account, you will see a dashboard and you were asket to create a project, you can name it anything.
You will see some icons on the left side menu , one of them will be a settings icon, click on it and then you will see the API tab, click on it and grab you credentials

Copy the Project URL and the Anon Key and paste it in the environment variables.

Now, Click on database icon , which will on the left side menu .
After that click on the Table tab and create a new table, just fill the (Name of the Table ) and the Description Field) and save it.
Then go to Table Editor, and inside that add columns to the table.

Now you Database is ready.

Step-5: Start the development server

Now open your project in your favorite IDE , (VsCode) and then start the development server.

   npm run dev

Note: In Production mode , you need to one more thing, Go to the ShareButton.jsx componennt and edit the URL constant with your Website URL link.

Deployment of the App

As the hackathon says, we need to use any one service of Linode.

So, I choose to host the app on Linode servers.

Linode is a cloud hosting platform that services over 400,000 customers, including The Onion, Creative Commons, and WP Engine. The Linode Manager allows customers to create, manage, and deploy virtual servers and services through a web interface.

I wanted to discuss the deployment in detail butI don't want to unneccesarily increase the length of the article.

You can follow this article if you want to deploy a Nextjs/React.js Application on an Ubuntu Server.

How to Deploy a Next.js Application to an Ubuntu Server

Upcoming Features

I am planning to add some more features , which will make this website even more useful for the users.

Portfolio Section on the My-Profiles page, which will showcase your Dev Projects.
Appearance Tab , through which you can customize the backgroud color or styles of the My Profile Page.

and many more features are yet to come.

Feedback and Conclusion

I have added limited features to the app as I was working alone on this project, but I have planned to add some more features to the app in future.

I have made the UI design of the app fully responsive.

Since , this project is Open-Source, so if anyone would like to contribute to the project, then it will be awesome.

Challenges I Faced 😥

I'm a more Front-end developer and wanted to make the app's design as cool as possible, but I enjoyed building this project as a full-stack project and learned new tech like (Moralis.io and Supabase.io).

And also, It was first time I am Hosting an App on a Server , till now I have only deployed apps on heroku, netlify and Vercel 😓.

I creating things, solving problems, and learning new technologies and it involved all of them..

I had used moralis.io in my project before, but I have not used supabase in any one of my projects.

I would appreciate your feedback on the project.

Thank you for reading the blog and viewing the project.

Some useful Links

Dapp Related

Connect with me:

Let's build Tic-Tac-Toe Game using React.js & Tailwind CSS.

raivikas — Wed, 25 May 2022 15:25:00 +0000

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 a Tic-Tac-Toe Game, 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.

Also, we will add some extra features to make it fully functional.

Here is the link to the FrontendMentorchallenge that we will build.

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

🚀 Live Demo of the Project

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 as tic-tac-toe .

💡

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 the index.tsx file inside pages directory. and delete everything and paste the given code below.



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

const Home: NextPage = () => {

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

)}

export default Home;

I have created some custom classes as we are going to use the same utility classes, again and again, it's better to create a custom class inside the globals.css file which is inside the styles folder.

After that visit the globals.css file inside the styles folder add the custom classes as given below.



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

@layer utilities {

 .button{
     @apply flex items-center justify-center text-lg font-bold text-gray-900 transition duration-300 ease-in ;
 }
  .square {
    @apply flex h-[90px] w-[90px] md:h-[100px] md:w-[100px] items-center justify-center bg-[#1f3540] rounded-2xl shadow-md active:scale-125 transition duration-200 ease-in hover:bg-[#18272e] shadow-gray-400/30 ;
  }

  .board {
    @apply mt-24 flex h-[350px] w-[350px] md:mt-20 md:h-[400px] md:w-[400px] flex-col items-center justify-center space-y-4 rounded-xl;
  }

  .board-row {
    @apply flex items-center justify-center space-x-4;
  }
}

Step-2 Creating the Components

If you see the design given by the Frontend Mentor Challenge, there are only many components that you can make or divide your app into.

But I am going to divide it into 5 components.

XIcon.tsx
OIcon.tsx
ChoosePlayer.tsx
Board.tsx
WinnerModal.tsx

So, now create the components folder inside your project and create two files with the names XIcon.tsx , OIcon.tsx,ChoosePlayer.tsx, Board.tsx and WinnerModal.tsx.

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

First, we will create the XIcon and the OIcon component.

Inside XIcon.tsx



import React from 'react'

export const XIcon = () => {
  return (
    <div className="relative h-16 w-16 cursor-pointer ">
      <div className=" absolute origin-top-left rotate-[44deg] ml-2 -mt-[1px] bg-[#30c4bd] h-4 w-20 rounded-l-full rounded-r-full ">
      </div>
      <div className="absolute origin-top-right -rotate-[42deg] -ml-[23px] bg-[#30c4bd] h-4 w-20 rounded-l-full rounded-r-full ">
      </div>
    </div>
  )
}

In the above code as you can see I have created a custom X-Icon using two divs placed inside another div.

I have positioned the inner two divs absolute and also added rotation (using transform rotate) to tilt the divs, to make the "X " icon.

You can also use an SVG Icon or a PNG image if it's available to you. I was not able to find any suitable SVG Icon for this, so that's why I created this Icon on my own using HTML and TailwindCSS.

Inside OIcon.tsx



import React from 'react'

export const OIcon = () => {
    return (
        <div className="flex items-center justify-center h-16 w-16 cursor-pointer ">
            <div className=" h-8 w-8 ring-[18px] ring-[#f3b236] rounded-full">
            </div>
        </div >
    )
}

In the above code as you can see I have created a custom O-Icon using One div placed inside another div and using some CSS.

Inside ChoosePlayer.tsx



import React from 'react'
import { OIcon } from './OIcon'
import { XIcon } from './XIcon'

interface PlayerProp {
  handlePlayerX(): void,
  handlePlayerO(): void,
  handleNewGame(): void,
}

export const ChoosePlayer = ({handlePlayerX, handleNewGame, handlePlayerO }: PlayerProp) => {

  return (
    <div className="mt-20 md:mt-16 w-[500px] flex flex-col items-center justofy-center mx-auto">
      <div className="flex rounded-xl px-6 py-2 items-center justify-center space-x-4">
      <XIcon />
      <OIcon />
      </div>
      <div className="flex flex-col items-center py-8 w-[400px] md:w-[500px] h-64 md:h-72 rounded-2xl bg-[#1f3540] mt-6 space-y-6 md:space-y-8">
        <p className="text-md text-gray-300 uppercase font-semibold md:text-xl ">
          Please Select 
          {" "}
          <span className="text-[#30c4bd] text-xl font-bold ">X</span> 
          {" "}
          or 
          {" "}
          <span className="text-[#f3b236] text-xl font-bold">O</span>
        </p>
        <div className="w-3/4 bg-gray-800 flex items-center justify-evenly h-24 rounded-2xl p-6 ">
          <button onClick={handlePlayerX} className="focus:bg-gray-300 hover:bg-[#bcfefb] trasnsition duartion-300 ease-in flex items-center justify-center rounded-xl px-6 py-2 ">
            <XIcon />
          </button>
          <button onClick={handlePlayerO} className="focus:bg-gray-300 hover:bg-[#ffe1a9] trasnsition duartion-300 ease-in flex items-center justify-center rounded-xl px-6 py-2 " >
            <OIcon />
          </button>
        </div>
        <p className="text-md text-gray-500 uppercase font-semibold md:text-xl "> Remember: X goes first</p>
      </div>
      <button onClick={handleNewGame} className="button hover:ring-4 hover:ring-cyan-300 rounded-xl mt-8 px-6 py-3 bg-[#f3b236] hover:bg-[#30c4bd]">
        Start Game
      </button>
    </div>
  )
}

In this component, what we will do here is that we have to create two buttons having Values "X" and "O".

So to provide the user that which icon the user wants to play with and then we have another button, whose function is to start the game based on the user's choice.

If the user chooses "X" , then the first player will use the "X" mark else it will use the "O" mark.

If the user doesn't choose any one of the icons, then the default icon will be the "X" mark, which means "X" goes first by default, until and unless the user selects "O" from the given choices.

As you can see in the above code, we are passing three props and all of them are functions.

handlePlayerX()
handlePlayerO()
handleNewGame()

We will discuss the work of this function in step-3.

Inside Board.tsx



import React from 'react'
import { OIcon } from './OIcon'
import { XIcon } from './XIcon'

interface PlayerProp {
  winner:string,
  playerX: boolean,
  squares: Array<any>,
  handlePlayer(i: number): void,
  handleRestartGame(): void,
}

interface SquareProp {
  value: JSX.Element | string | null,
  onClick(): void,
}

export const Board = ({ winner, playerX, handlePlayer, handleRestartGame, squares }: PlayerProp) => {

  // Square Button and RenderSquare function
  function Square({ value, onClick }: SquareProp) {
    return (
      <button className="square" onClick={onClick} disabled={winner ? true :false} >
        {value}
      </button>
    )

  }

  function value(i:number){
     let value;
     if( squares[i] ==="X"){
       value=<XIcon />
     }else if( squares[i] === "O"){
        value=<OIcon />
     }else{
        value=null;
     }

     return value;

  }

  const renderSquare = (i: number) => {
    return <Square value={value(i)} onClick={() => handlePlayer(i)} />
  }

  return (
    <div>
      <div className="board">
        <div className=" w-[300px] md:[w-400px] rounded-lg flex items-center justify-center space-x-10">
          <div>
            {playerX
              ?
              <div className="text-white bg-gray-700 text-xl px-4 py-1 w-28 rounded-lg font-medium uppercase">
                <span className="text-[#30c4bd] text-2xl font-bold">
                  X
                </span>
                {" "}
                Turn
              </div>

              :
              <div className="text-white bg-gray-700 text-xl px-4 py-1 w-28 rounded-lg font-medium uppercase">
                <span className=" text-[#f3b236] text-2xl font-bold">
                  O
                </span>
                {" "}
                Turn
              </div>

            }

          </div>
          <button onClick={handleRestartGame} className="group button px-2 py-1 hover:ring-4 hover:ring-cyan-300 rounded-md bg-[#f3b236] hover:bg-[#30c4bd]" >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 group-hover:rotate-180 transition duration-300 eas-in " fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
              <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>
        </div>
        <div className="board-row">
          {renderSquare(0)}
          {renderSquare(1)}
          {renderSquare(2)}
        </div>

        <div className="board-row">
          {renderSquare(3)}
          {renderSquare(4)}
          {renderSquare(5)}
        </div>

        <div className="board-row">
          {renderSquare(6)}
          {renderSquare(7)}
          {renderSquare(8)}
        </div>
      </div>
    </div>
  )
}

In this component, we will create the board for the game on which the user will play the game.

Here, the main aim is to style the board nicely using the Tailwind CSS, and along with that, we have two more things.

The first is an indicator div which tells the user whose turn is next to play (whether is "X" turns or "O" turns to play) and the other is also a button that can be used to clear/refresh the board to play the new game.

As you can see in the above code, we are passing five props.

winner
playerX
squares
handlePlayer()
handleRestartGame()

We will discuss the work of the props and function in step-3.

Inside WinnerModal.tsx

In this component, we will create a modal, which will be displayed when the user won.



import React from 'react'
import { OIcon } from './OIcon';
import { XIcon } from './XIcon'

interface GameProps{
  winner:string
  handleQuitGame():void;
  handleNewGame():void;
}

export const WinnerModal = ({winner ,handleQuitGame , handleNewGame} :GameProps) => {
  return (
    <div className="bg-gray-900/90 z-10 min-h-screen w-full absolute top-0 left-0">
      <div className="w-[500px] h-[250px] rounded-xl bg-[#1f3540] space-y-10 px-6 py-4 mx-auto mt-52 flex items-center justify-center flex-col">
       <h2 className="flex flex-col items-center justify-center space-y-6 text-2xl md:text-4xl font-bold">
         {winner === "X" ? <XIcon /> : <OIcon />}
         <p className="uppercase text-[#30c4bd]">Takes the Round</p>
       </h2>

      <div className="flex items-center justify-center space-x-16">
        <button onClick={handleQuitGame} className="button px-4 rounded-md py-1 bg-[#a8bdc8] hover:bg-[#718087] hover:ring-4 hover:ring-gray-400">Quit</button>
        <button onClick={handleNewGame} className="button px-4 rounded-md py-1 bg-[#f3b236] hover:bg-[#30c4bd] hover:ring-4 hover:ring-cyan-300">Next Round</button>
      </div>
      </div>
    </div>
  )
}

💡

Note: I have not added a modal for the Draw case. if you wish you can add it on your own as a challenge.

It's quite simple, you just have to create a DrawModal.tsx and display it if there is no winner, or else what you can do is create a prop as text which you will pass through the winner modal and the display the text inside the modal conditionally if there is a winner or not.

So these are the two ways you can do it. I want to give this as a challenge to you.

As you can see in the above code, we are passing three props.

winner
handleNewGame()
handleQuitGame()

We will discuss the work of the props and function in step-3.

Step-3 Writing the Logic for the Game

After creating the components we will import them inside the index.tsx file in the Home Component.

But before that, we have to write the logic for our game.

Now, inside the Home component, we will first create three constants using the useState hook and a variable name winner, which will hold the value of the function calculate inner() which we will create later.



const [isX, setIsX] = useState<boolean>(true);
const [newGame, setNewGame] = useState<boolean>(false);
const [squares, setSqaures] = useState<Array<any>>(Array(9).fill(null));

let winner = calculateWinner(squares);

Now we will create the calculateWinner() function.

// Calculate the winner
  function calculateWinner(squares: Array<any>) {
    // Total 8 winning patterens
    const winningPatterns = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

    for (let i = 0; i < winningPatterns.length; i++) {
      const [a, b, c] = winningPatterns[i];

      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  }

In this function what we have done here is that first, we created an array name winningPatterns which contains all the possible winning combinations.

After that, we used for loop and then looped over the array winningPatterns and then inside that we checked for the condition that if the squares (containing the value either "X" or "O" ) at that given index is equal to the value that we clicked on the board.

If the condition is true, then we return the value that is inside the square at that given index.

If the condition is false then we return null.

Now, we will create six more functions, that we will have passed into the various component as props that we have created in step-2.



// handle Choose player
  function handlePlayerX() {
    setIsX(true);
  }

  function handlePlayerO() {
    setIsX(false);

  }

 //// It will Handle which Icon will appear on Board on clicking one of the Squares
  function handlePlayer(i: number) {

    if (calculateWinner(squares) || squares[i]) {
      return;
    }

    squares[i] = isX ? "X" : "O";
    setSqaures(squares);
    setIsX(!isX);
  }

  // It will handle the Restart of the Game 

  function handleRestartGame() {
    setIsX(true);
    setSqaures(Array(9).fill(null));
  }

  // It will handle the start Game when the player choose one of the Icon
  // with which they want to player
  function handleNewGame() {
    setIsX(true);
    setSqaures(Array(9).fill(null));
    setNewGame(true);
  };

At last, we have finished writing the logic and creating the functions.

It's quite a long project, and writing it as a blog post was quite a time taking task.

All is left now to import all the components inside the index.tsx file and the project will be completed.

Step-4 Importing all the Components

Now, it is, time to import all the components inside the Home component, which is inside the index.tsx file.

Inside index.tsx



import type { NextPage } from 'next';
import Head from 'next/head';
import React, { useState } from 'react';
import { Board } from '../components/Board';
import { ChoosePlayer } from '../components/ChoosePlayer';
import { WinnerModal } from '../components/WinnerModal';

const Home: NextPage = () => {

  const [isX, setIsX] = useState<boolean>(true);
  const [newGame, setNewGame] = useState<boolean>(false);
  const [squares, setSqaures] = useState<Array<any>>(Array(9).fill(null));

  let winner = calculateWinner(squares);

  // handle Choose player
  function handlePlayerX() {
    setIsX(true);
  }

  function handlePlayerO() {
    setIsX(false);

  }

  //// It will Handle which Icon will apppear on Board on cliking one the Squares
  function handlePlayer(i: number) {

    if (calculateWinner(squares) || squares[i]) {
      return;
    }

    squares[i] = isX ? "X" : "O";
    setSqaures(squares);
    setIsX(!isX);
  }

  // It will handle the Restart of the Game 

  function handleRestartGame() {
    setIsX(true);
    setSqaures(Array(9).fill(null));
  }

  // It will handle the start Game when the player choose one of the Icon
  // with which they want to player
  function handleNewGame() {
    setIsX(true);
    setSqaures(Array(9).fill(null));
    setNewGame(true);
  };

  function handleQuitGame() {
    setIsX(true);
    setSqaures(Array(9).fill(null));
    setNewGame(false);
  }
  // Calculate the winner
  function calculateWinner(squares: Array<any>) {
    // Total 8 winning patterens
    const winningPatterns = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

    for (let i = 0; i < winningPatterns.length; i++) {
      const [a, b, c] = winningPatterns[i];

      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  }

  return (
    <div className="flex min-h-screen bg-[#192a32] flex-col items-center py-2">
      <Head>
        <title>Tic-Tic-Toe Game</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <h1 className="text-4xl md:text-6xl font-extrabold mt-4 text-[#30c4bd] ">
        Tic
        {" "}
        <span className="text-[#f3b236]">Tac </span>
        {" "}
        Toe
      </h1>

      {!newGame
        ?
        <ChoosePlayer
          handleNewGame={handleNewGame}
          handlePlayerX={handlePlayerX}
          handlePlayerO={handlePlayerO}
        />
        :
        <Board
          winner={winner}
          playerX={isX}
          squares={squares}
          handlePlayer={handlePlayer}
          handleRestartGame={handleRestartGame}
        />
      }
      {winner && 
      <WinnerModal
          winner={winner}
          handleQuitGame={handleQuitGame}
          handleNewGame={handleNewGame}
        />
      }
    </div>
  )
}

export default Home

The XIcon.tsx and the OIcon.tsx components will be imported inside the other three components, not inside the Home component.

The rest three components, ChoosePlayer.tsx , Board.tsx , and WinningModal.tsx will be imported and all the required props are needed to pass through them.

At last, we have finished the project 🎉🎉.

Now open the terminal inside the VsCode ad run the command npm run dev to start the development server and you will then see the application running on localhost:3000.

Conclusion

Hope you were able to build this amazing Tic-Tac-Toe Game. Feel free to follow me on Twitter and share this if you like this project 😉.

I hope you like this project and enjoyed building it, I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link :

Next.js and Tailwind Installation Docs

Github link for the project

Connect with me:

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

raivikas — Mon, 16 May 2022 02:12:00 +0000

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.

Here is the link to the FrontendMentor challenge that we will build.

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

🚀 Live Demo of the Project

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 an Advice 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 the index.tsx file inside pages directory. 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 using Manrope font, so for that, we need to import this font from google fonts.

And for the API part, we are going to use Advice 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 the globals.css file inside the styles folder 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 the tailwindcss.config.js file.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  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 names AdviceCard.tsx and CircularButton.tsx.

First, we will create the CircularButton component and then the AdviceCard component.

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 prop handleAdvice , 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 the id and the adviceText field.

Now, visit the index.js file inside the Pages folder and create two constants with the useState hook inside the Home function, 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 name fetchAdvice () and inside it fetch the API using the inbuilt fetch() function and store the result inside the constant name data.

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 the index.tsx will 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

Conclusion

Hope you were able to build this Advice Generator App. Feel free to follow me on Twitter and share this if you like this project 😉.

I hope you like this project and enjoyed building it, I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

Next.js and Tailwind Installation Docs

Github link for the project

Connect with me:

Let's build Social Proof Section using React.js & Tailwind CSS.

raivikas — Sun, 08 May 2022 07:09:00 +0000

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 a Social Proof Section of a website. It is one of the Frontend Mentor challenge projects and our goal is to make it look like the design given by the Frontend Mentor.

Here is the link to the FrontendMentor challenge that we will build.

So without any further talk, Let's get started 🚀.

🚀 Live Demo of the Project

I want to mention one thing, this project is all about designing there is no use for any React.js hooks or any programming thing.

We will be using Tailwind CSS, as a CSS framework to design our web application.

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

Step-1 Create the starting project

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

You can use this one-line command to create a new Next.js 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 as social-proof-section.

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

Find the index.tsx file inside pages directory and delete everything and paste the given code below.

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

const Home: NextPage = () => {

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

)}

export default Home;

After that move to the second step.

Step-2 Creating the Components

Now, it is time to create some components that we are going to use in the app.

If you visit the FrontendMentor challenge link, you will see that there are three different types of components Heading Text, Start Rating, and the Testimonial Card.

Create a new folder name components in the root of the directory, and create 5 files inside it.

HeaderText.tsx
Star.tsx
StarRating.tsx
TestimonialCard.tsx
Testimonials.tsx

After creating the file we will start adding the code to each file one by one.

The HeaderText.tsx Component

This component consists of an H1 tag and a P tag which are placed inside a Div tag.

import React from 'react'

const SUB_TEXT="We only provide great products with excellent customer service. See what our satisfied customer are saying about our services.";

const HEAD_TEXT="10,000+ of our users loves our products.";

export const HeaderText = () => {
  return (
    <div className="group flex flex-col w-3/4 md:w-1/3 space-y-6 md:space-y-8 px-6 py-6 rounded-lg justify-start mt-6">
      <h1 className="text-3xl md:w-[360px] md:text-5xl text-fuchsia-800 font-bold">{HEAD_TEXT}</h1>
      <p className="text-md md:text-lg text-purple-900 font-medium">{SUB_TEXT}</p>
    </div>
  )
}

The Star.tsx Component

This component consists of an SVG of a Star which will be used inside the StarRating.tsx Component.

import React from 'react'

export const Star = () => {
    return (

<svg xmlns="http://www.w3.org/2000/svg" className=" h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-100" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>

    )
}

The StarRating.tsx Component

It consists of 5 Star.tsx Component and a P tag which is placed inside a Div Tag and is made to be in Flex-row direction.

import React from 'react'
import { Star } from './Star'

interface Prop{
  text:string,
}

export const StarRating = ({text} :Prop) => {
  return (
    <div className="w-[260px] md:w-[350px] group flex flex-col space-y-2 py-2 md:flex-row items-center md:justify-start md:space-y-0 md:space-x-4 my-4 px-4 md:py-3 bg-fuchsia-300 rounded-md cursor-pointer hover:bg-fuchsia-500 transition duration-300 ease-in shadow-md hover:shadow-xl md:even:ml-16 md:last:ml-32">
        <div className="flex space-x-1">
           <Star />
           <Star />
           <Star />
           <Star />
           <Star />
        </div>
        <p className="text-sm flex justify-start items-center md:text-md font-semibold text-fuchsia-700 group-hover:text-fuchsia-200 ">{text}</p>
    </div>
  )
}

The TestimonialCard.tsx Component

It consists of an Image Tag, H2 Tag, P tag, and Div Tag , It is a simple Card Component with some good design and hover animations.

import Image from 'next/image'
import React from 'react'

interface TesimonialProps {
  customerName: string,
  testimonialText: string,
  imageURL: string,
}

export const TestimonialCard = ({ customerName, testimonialText, imageURL }: TesimonialProps) => {
  return (
    <div className={`group w-3/4 md:w-[420px] md:h-[240px] flex flex-col items-start md:space-x-4 bg-gradient-to-r from-[#975297] to-[#502050] mt-4 md:even:mt-16 md:last:mt-32 px-6 py-6 rounded-2xl cursor-pointer hover:shadow-md hover:bg-gradient-to-r hover:from-[#ce74ff] hover:to-[#743c8a] transition duration-1000 ease-in-out `}>
      <div className="flex space-x-5 pb-4 md:space-x-6 md:px-4 ">
        <div className="w-[50px] h-[50px] rounded-full ring-4 ring-fuchsia-400 group-hover:ring-fuchsia-100">

          <Image
            src={imageURL}
            objectFit="contain"
            width={50}
            height={50}
            className="rounded-full"
          />
        </div>

        <div className=" flex flex-col items-start justify-start">
          <h2 className="text-md md:text-2xl font-bold text-fuchsia-400 group-hover:text-fuchsia-100 ">{customerName}</h2>
          <p className="text-xs md:text-md font-extralight text-gray-100 ml-1 group-hover:text-fuchsia-50">Verified Buyer</p>
        </div>

      </div>

      <div className="text-md md:text-lg text-fuchsia-200 font-500 py-2">
        {testimonialText}
      </div>
    </div>
  )
}

The background of the Card is a gradient background.

The Testimonials.tsx Component

It consists of 3 TestimonialCard.tsx Components which are placed inside a Div Tag in the Flex-row direction.

import React from 'react'
import { TestimonialCard } from './TestimonialCard'

const TESTIMONIAL_DATA = [

    {
        customerName: "Colton Smith",
        imageURL: "/image-colton.jpg",
        testimonialText: "We needed the same printed design as the one we had ordered a week prior.Not only did they find the original order, but we also received it in time.Excellent!",

    },

    {
        customerName: "Irene Roberts",
        imageURL: "/image-irene.jpg",
        testimonialText: "Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery.",

    },

    {
        customerName: "Anne Wallace",
        imageURL: "/image-anne.jpg",
        testimonialText: "Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!",

    },

];

export const Testimonials = () => {
    return (
        <div className="flex flex-col md:flex-row justify-center items-center gap-10">
            {
                TESTIMONIAL_DATA.map((item) => {
                    return <TestimonialCard customerName={item.customerName} imageURL={item.imageURL} testimonialText={item.testimonialText} />
                })

            }
        </div>
    )
}

The main challenge here is as you can see in the FrontendMentor challenge design, the StarRating.tsx and TestimonialCard.tsx component are shifted.

In the Case of StarRating.tsx Component, the 2nd and 3rd have some Left Margin and in the case of the TestimonialCard.tsx Component, they have some Top Margin.

So to achieve these design we have to add two special classes even:ml-16 and last:ml-32 ** in StartRating.tsx Component and **even:mt-16 and last:mt-32 in TestimonialCard.tsx Component.

💡 What these two classes are doing is that every even position children element inside the div or a section will have a margin-top or margin-left equal to 16px, and every last child inside the div or a section will have a margin-top or margin-left equal to 32px.

Step-3 Import the Components

Now it's time to import the component that we have created inside the index.tsx file inside the Pages folder.

Inside Index.tsx Page

import type { NextPage } from 'next'
import Head from 'next/head'
import { HeaderText } from '../components/HeaderText';
import { StarRating } from '../components/StarRating'
import { Testimonials } from '../components/Testimonials';

const Home: NextPage = () => {
  return (
    <div className="flex min-h-screen background flex-col bg-gray-100 items-center ">
      <Head>
        <title>Social Proof Section</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>


       <div className="flex flex-col md:flex-row items-center justify-between mx-a px-4 md:px-24 py-2 ">
        <HeaderText />
        <div className="flex flex-col justify-center items-center">
          <StarRating text="Rated 5 Stars in Reviews" />
          <StarRating text="Rated 5 Stars in Report Guru" />
          <StarRating text="Rated 5 Stars in Best Tech" />
        </div>
      </div>
      <Testimonials />

    </div>
  )
}

export default Home

Conclusion

Hope you were able to build this Social Proof Section. Feel free to follow me on Twitter and share this if you like this project 😉.

I hope you like this project and enjoyed building it, I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

Next.js and Tailwind Installation Docs

Github link for the project

Connect with me:

Let's build Launch Countdown Timer using Next.js & Tailwind CSS.

raivikas — Sun, 01 May 2022 07:04:00 +0000

Hello everyone, I hope you all are doing well. Today again 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 a Launch Countdown Timer. It is one of the Frontend Mentor challenge projects and our goal is to make it look like the design given by the Frontend Mentor.

Here is the link to the FrontendMentor challenge that we will build.

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

🚀 Live Demo of the Project

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 next.js 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 as Launch countdown Timer.

💡 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 the index.tsx file inside pages directory. and delete everything and paste the given code below.



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

const Home: NextPage = () => {

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

)}

export default Home;

After that visit the globals.css file inside the styles folder and import a google font link (Red Hat Font) at the top of the file inside it.



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Red+Hat+Text:wght@500;700&display=swap');

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

After that go to the tailwindcss.config.js file and we will add some custom font and animation that we will use later in the project.




module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      animation: {
        flip:'flip 1s cubic-bezier(0, 0, 0.2, 1) infinite'
      },
      keyframes:{
        flip: {
          'from': { transform:'rotateX(0deg)', transformOrigin: '50% bottom ',},
          'to':{transform: 'rotateX(180deg)', transformOrigin: '50% bottom ',}
        }
      }
    },
       fontFamily: {
      'redhat':['Red Hat Text', 'sans-serif'],
      },
  plugins: [],
}

}

So, that was all for the first step, Now moving to the second step.

Step-2 Creating the Components

Now, it is time to create some components that we are going to use in the app.

Create a new folder name components in the root of the directory and create 5 files inside it.

Header.tsx
Footer.tsx
NumberBox.tsx
TimerContainer.tsx
TimerInput.tsx

After creating the file we will start adding the code to each file one by one.

Inside Header.tsx



import React from 'react'

interface msgProps {
  message: string,
};

export const Header = ({ message }: msgProps) => {
  return (
    <header className="mx-auto mt-2">
      <h1 className="text-2xl mt-8 md:text-4xl font-bold font-redhat text-rose-500 font-bold text-center mx-auto ">
        {message ? message : "WE'RE LAUNCHING SOON"}
      </h1>
    </header>
  )

Inside Footer.tsx



import React from 'react'

export const Footer = () => {
  return (
    <div className="mx-auto w-full ">
      <div className=" w-full flex mt-10 md:mt-40 space-x-6 justify-center items-center ">
        <a href="https://facebook.com/raivikas200" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="h-7 w-7 md:h-10 md:w-10 hover:cursor-pointer" fill="rgb(244 63 94)">
            <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
          </svg>
        </a>
        <a href="https://github.com/raiv200" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="h-7 w-7 md:h-10 md:w-10 hover:cursor-pointer" fill="rgb(244 63 94)">
            <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
          </svg>
        </a>

        <a href="https://twitter.com/raivikas200" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="h-7 w-7 md:h-10 md:w-10 hover:cursor-pointer" fill="rgb(244 63 94) ">
            <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
          </svg>
        </a>
      </div>
    </div>
  )
}

Inside NumberBox.tsx



import React from 'react'

interface numProp {
    num: string | number,
    unit: string,
    flip: boolean,
};

export const NumberBox = ({ num, unit, flip }: numProp) => {
    return (
        <div className="flex flex-col items-center mt-4 px-2">
            <div className=" relative bg-transparent flex flex-col items-center justify-center rounded-lg w-32 h-32 text-2xl md:text-4xl mt-4 ">
                <div className="rounded-t-lg rounded-b-lg bg-[#343650] w-full h-full"></div>

                <div className="text-5xl absolute text-rose-500 z-10 font-bold font-redhat md:text-7xl font-mono ">
                    {num}
                </div>

                <div className=" rounded-b-lg rounded-t-lg bg-[#2c2e3f] w-full h-full"></div>

                <div className={`absolute w-full h-1/2 top-0 rounded-t-lg z-5 ${flip ? 'animate-flip bg-rose-200' : 'bg-transparent'}`}></div>
                {/* Two Small Dots */}
                <div className="absolute -right-1 top-[60px] rounded-full w-[12px] h-[12px] bg-[#1e1f29]"></div>
                <div className="absolute -left-1 top-[60px] rounded-full w-[12px] h-[12px] bg-[#1e1f29]" ></div>

            </div>
            <p className="text-lg mt-3 font-semibold text-rose-200 md:text-2xl ">
                {unit}
            </p>
        </div>
    )
}

Inside TimerContainer.tsx



import React from 'react'
import { NumberBox } from './NumberBox'

interface timeProps{
  days: number | string,
  hours:number | string ,
  minutes:number | string,
  seconds:number | string,
}

export const TimerContainer = ({days, hours, minutes ,seconds }: timeProps) => {

  let daysFlip = false;
  let hoursFlip = false;
  let minutesFlip = false;
  let secondsFlip = true;

 if (seconds <=0 && minutes <=0 && hours <=0 && days <=0){
   daysFlip = false;
   hoursFlip = false;
   minutesFlip = false;
   secondsFlip = false;
 }

 if(seconds == 0){
   if( minutes !=0){
    seconds=59;
   }

   secondsFlip = false;
   minutesFlip = true;
 }
 if (minutes == 0 ){
    if( hours !=0){
      minutes=59;
    }

   minutesFlip = false;
   hoursFlip = true;
 }

 if( hours == 0){
   hoursFlip = false;
   if(days !=0){
     daysFlip = true;
   }

 }



   if(days <10){
     days="0"+days
   }

   if(hours <10){
     hours="0"+hours
   }

   if(minutes <10){
     minutes="0"+minutes
   }

   if(seconds < 10){
     seconds="0"+seconds

   }

    return (

     <div className=" mt-2 md:mt-20 rounded-xl">
       <div className="grid grid-cols-2 gap-4 py-6 px-10 md:flex md:items-center md:justify-between md:mt-2 rounded-xl md:px-6 md:py-8 ">
            <NumberBox num={days } unit="Days" flip={daysFlip} />
            <span className=" hidden text-5xl -mt-8 md:inline-block md:text-7xl font-normal text-gray-50 ">:</span>
            <NumberBox num={hours } unit="Hours" flip={hoursFlip} />
            <span className="hidden text-5xl -mt-8 md:inline-block md:text-7xl font-normal text-gray-50 ">:</span>
            <NumberBox num={minutes} unit="Minutes" flip={minutesFlip}/>
            <span className="hidden text-5xl -mt-8 md:inline-block md:text-7xl font-normal text-gray-50 ">:</span>
            <NumberBox num={seconds} unit="Seconds" flip={secondsFlip} />
        </div>

      </div>
    )
}

Inside TimerInput.tsx



import React from 'react'

interface inputProps {
    value:number,
    handleClick() : void,
    handleChange(e:any) : void,
}

export const TimerInput = ({value , handleClick ,handleChange}: inputProps) => {
  return (
    <div className="z-6 mx-auto space-y-4 flex flex-col md:flex-row justify-center items-center md:space-y-0">
        <input 
        className="text-xl md:text-2xl font-redhat outline-none px-2 py-1 w-40 rounded-lg mr-4 "
        name="Timer Input"
        type="number" 
        placeholder="Enter No. of Days" 
        value={value}
        onChange={handleChange}
        min={0}
        />

      <button onClick={handleClick} className="bg-rose-300 text-xl font-semibold font-redhat px-4 py-2 md:text-xl rounded-xl text-rose-500 hover:bg-rose-500 hover:text-rose-100 transition duration-300 ease-in"> Set Value</button>
    </div>
  )
}

After creating the components and adding the above code, Import all the components inside the index.tsx file.

You will notice that you are getting some errors in the files that the props you are using are not defined.

It is because of TypeScript since it is a strongly typed language, each and everything has to be defined.

But don't worry as soon as we complete the code the error will go.

The index.tsx file will look like this now:



import type { NextPage } from 'next'
import Head from 'next/head'
import { TimerContainer } from '../components/TimerContainer'
import { Footer } from '../components/Footer'
import { Header } from '../components/Header'
import { TimerInput } from '../components/TimerInput'

const Home: NextPage = () => {

return (

<div className="flex min-h-screen flex-col items-center bg-[#1e1f29]">
      <Head>
        <title>Launch Countdown Timer</title>
        <link rel="icon" href="/favicon.ico" />

      </Head>

      <Header message={message} />

      <TimerContainer
        days={days}
        hours={hours}
        minutes={minutes}
        seconds={seconds}
      />
      <TimerInput value={newTime} handleClick={handleClick} handleChange={handleChange} />

      <Footer />
    </div>

)}

export default Home;

As you can see, I am passing various props to the components.

Now, in the next step, we are going to create some variables using the useState Hook and write the logic of the timer.

Step-3 Code Logic for the Countdown Timer

Open the index.tsx file and inside the Home component create some variable.

And after that, we will add the code logic for the countdown timer inside Home Component above the return statement.

Inside Home Component (index.tsx):



  const [newTime, setNewTime] = useState<number>(0)
  const [days, setDays] = useState<number>(0);
  const [hours, setHours] = useState<number>(0);
  const [minutes, setMinutes] = useState<number>(0);
  const [seconds, setSeconds] = useState<number>(0);
  const [message, setMessage] = useState<string>("");

 const timeToDays = time * 60 * 60 * 24 * 1000;

 let countDownDate = new Date().getTime() + timeToDays;

💡

Make sure to import the useState hook and also useEffect Hook from react.

Now below the above code, we will use the setInterval function inside the useEffect hook, which will update the time every second.



useEffect(() => {

    var updateTime = setInterval(() => {
      var now = new Date().getTime();

      var difference = countDownDate - now;

      var newDays = Math.floor(difference / (1000 * 60 * 60 * 24));
      var newHours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var newMinutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
      var newSeconds = Math.floor((difference % (1000 * 60)) / 1000);

      setDays(newDays);
      setHours(newHours);
      setMinutes(newMinutes);
      setSeconds(newSeconds);

      if (difference <= 0) {
        clearInterval(updateTime);
        setMessage("The Launch Has Started");
        setDays(0);
        setHours(0);
        setMinutes(0);
        setSeconds(0);
      }
    })

    return () => {
      clearInterval(updateTime);
    }

  }, [time]);

As you can see we have also used the clearInterval() function which will clear or stop the setInerval() function as soon as the countdown time reaches zero.

The step-3 is done but two more things are remaining.

We have to create two functions handleClick() and handleChange() function which will be used to set the countdown timer as per the user-entered input.

Step-4 Creating the two functions handleClick() & handlechange().

After the end of the useEffect function, create two functions below it handleChange() and handleClick() like this:



const handleClick = () => {

    setTime(newTime);
    console.log(time);
    setNewTime(0);
  };

  const handleChange = (e: any) => {
    let inputTime = e.target.value;
    setNewTime(inputTime);

  };

Now for the final step, we will add the flip animation.

Step-5 Adding the Flip Animation

The flip animation will be added conditionally, I have already added the code for the animation in advance inside the TimerContainer.tsx and the NumberBox.tsx components in Step-2.

You can take a look at the code and try to understand it on your own as a challenge.

It's not that difficult to understand the conditional logic that I have used to conditionally show the Flips.

Congratulations 🎉 🥳 !!!

Everything is done and you have successfully created awesome projects.

Now open the terminal inside VS code and start the development server by running the npm run dev command.

And visit localhost:3000 and your application is ready.

Conclusion

Hope you were able to build this Launch Countdown Timer. Feel free to follow me on Twitter and share this if you like this project 😉.

I hope you like this project and enjoyed building it, I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

Next.js and Tailwind Installation Docs

Github link for the project

Connect with me:

How to build Blurry, Animated Shapes with Tailwind CSS.

raivikas — Sun, 20 Mar 2022 07:04:00 +0000

In this article, we are going to see, how we can build a blurry animated background shape just using Tailwind CSS. We'll do it with a combination of CSS filters, mix-blend-mode, and custom animations.

So let's get started.

But before that here is a little demo of what we are going to build.

First of all, we will create a Next.js project with Tailwind CSS.




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

Now, we will create some mockup designs, so that we can this effect of the animated background shapes in the background.

Inside index.js write this code:



import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
           <h1 className="text-5xl absolute top-6 font-extrabold text-violet-500">Animated Blurry Background Shapes</h1>
      <div className="bg-gray-50 w-full flex items-center justify-center px-16">
  <div className="relative w-full max-w-xl">

    /////// Add the three divs below this comment /////////


    <div className="m-8 relative space-y-4">
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-48 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-24 h-6 rounded-lg bg-purple-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-56 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-44 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-28 h-6 rounded-lg bg-pink-300"></div>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
  )
}

Now, we will change the background color to bg-gray-50 and also we will hide this design for now by giving opacity-0 to the div so that we can focus on building the blurry animated shapes.

After this, create three divs of the same shape with different background colors and also assign the parent div with a relative class.

And the design will look like this:

Blurry background Shapes



<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
    <div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
    <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>

Then to make these shapes blurry and to blend the three colors we will now add three classes mix-blend-multiply , filter , blur-xl to each of the three divs and also add opacity-70 class as well to make it look clean.

The code will look like this now:



import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
           <h1 className="text-5xl absolute top-6 font-extrabold text-violet-500">Animated Blurry Background Shapes</h1>
      <div className="bg-gray-50 w-full flex items-center justify-center px-16">
  <div className="relative w-full max-w-xl">
    <div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full opacity-70 "></div>
    <div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full opacity-70 "></div>
    <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full opacity-70 "></div>
    <div className="m-8 relative space-y-4 opacity-0">
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-48 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-24 h-6 rounded-lg bg-purple-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-56 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
        </div>
      </div>
      <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
        <div className="flex-1">
          <div className="h-4 w-44 bg-gray-300 rounded"></div>
        </div>
        <div>
          <div className="w-28 h-6 rounded-lg bg-pink-300"></div>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
  )
}

And the design will look like this:

animated blurry background

So, the last thing is to add the animation to the burry shapes.

For this open the tailwindcss.config.js and add the blob animation like this:



module.exports = {
  theme: {
    extend: {
      animation: {
        blob: "blob 7s infinite",
      },
      keyframes: {
        blob: {
          "0%": {
            transform: "translate(0px, 0px) scale(1)",
          },
          "33%": {
            transform: "translate(30px, -50px) scale(1.1)",
          },
          "66%": {
            transform: "translate(-20px, 20px) scale(0.9)",
          },
          "100%": {
            transform: "tranlate(0px, 0px) scale(1)",
          },
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now, the project is almost finished, but there is one problem.

The problem is all the blurry backgrounds are moving together, but we don't want that.

So to overcome this problem we will delay the animation of the other two divs.

For this open the global.css file inside the styles folder and add these classes.



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

@layer utilities {
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
}

Now add the animate-blob class as well as these classes to the 2nd and 3rd div like this:



<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob ">
</div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000">
</div>

And tada 🎉🎉 we build this project in less than an hour.

Conclusion

Hope you were able to build this blurry animated background shape for your next project. Feel free to follow me on Twitter and share this if you like this project 😉.

I hope you like this project and I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

Connect with me:

Let's Build Github User Finder App with Next.js & Tailwind CSS.

raivikas — Mon, 28 Feb 2022 07:04:00 +0000

Hello everyone, In this project, we are going to build GitHub user Search App using Github API. We will design the UI of the app using Tailwind CSS with Next.js as a framework.

We will use Github API to pull profile data and display it.

Here is the image of the application that we are going to build:

This is a frontendmentor.iochallenge, and our goal is to make this design as close as possible to the given design.

It will be fully responsive and also have dark mode functionality.

Demo Link of the Project

Github Link of the Project

So let's start building 🚀 :

Create Next.js app with tailwind CSS

npx create-next-app my-project // without Tailwind CSS installed
or
npx create-next-app -e with-tailwindcss my-project //with Tailwind CSS

Install the necessary npm packages:

Install @heroicons/react
Install next-themes

npm install next-themes @heroicons/react

To Create the Components and add the dark mode Functionality

First of all, create a components folder in the root of the directory and add these files:

Avatar.js
Loading.js
Logo.js
Navbar.js
GithubUser.js
SearchBar.js
UserBio.js
UserData.js
UserProfile.js
UserStats.js

Don,t get worried by seeing so many components, I have purposely created these components so that it will be easy for you to manage code.

One important point before that, open the _app.js file inside the pages directory and add the following code:

Inside _app.js :

import 'tailwindcss/tailwind.css'
import '../styles/globals.css'
import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Then open the tailwind.config.js file and add the darkMode Key with the value of class like this:

Inside tailwind.config.js :

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out ',
        wiggle_reverse:'wiggle_reverse 0.3s ease-in'
      },

      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-60deg)' },
          '50%': { transform: 'rotate(60deg)' },
        },
        wiggle_reverse:{
          '0%': { transform: 'rotate(90deg)' },
          '100%': { transform: 'rotate(0deg)' },
        }
      }
    },
  },
  darkMode:"class",
  plugins: [],
}

and then next.config.js file and add the domains for the images like this:

Inside next.config.js :

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    domains:["nextjsdev.com","avatars.githubusercontent.com"]
},
  reactStrictMode: true,
}

I have added two custom animations also which I am using in this application.

Now paste this code one by one in each component:

Inside Avatar.js:

import Image from "next/image";
import Vercel from "../public/vercel.svg"
const Avatar = ({imageURL}) => {
  return (
    <div className=" w-[120px] h-[120px] ml-8 ring-[5px] ring-[#3b52d4] dark:ring-[#053bff] rounded-full ">
    {imageURL ? (
      <Image 
        src={imageURL ? imageURL : Vercel}
        width="120"
        height="120"
        objectFit="cover"
        className="rounded-full "
    />
    ): (
      <p className="text-lg font-bold font-mono text-center pt-8 text-gray-800 dark:text-gray-200">No Image Found</p>
    )

    }
    </div>
  )
}

export default Avatar

Inside Loading.js:

export const Loading = () => {
  return (
    <div className=" w-28 mx-auto mt-40">
     <svg className="animate-spin -ml-1 mr-3 h-10 w-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </div>
  )
}

Inside Logo.js:

import Link from 'next/link'

const Logo = () => {
  return (
    <Link href="/">
      <div className="p-3 rounded-xl cursor-pointer">
        <p className="font-mono text-xl font-semibold text-gray-800 dark:text-gray-50 md:text-xl lg:text-2xl">
          devfinder
        </p>
      </div>
    </Link>
  )
}

export default Logo

Inside Navbar.js:

import { SunIcon } from '@heroicons/react/outline'
import { MoonIcon } from '@heroicons/react/solid'
import Logo from './Logo'
import { useTheme } from 'next-themes'
import { useState, useEffect } from 'react'

const Navbar = () => {
  const { systemTheme, theme, setTheme } = useTheme();

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, [])

  const renderThemeChanger = () => {
    const currentTheme = theme === 'system' ? systemTheme : theme
    if (!mounted) return null;

    if (currentTheme === 'dark') {
      return (
        <div className="flex cursor-pointer items-center ">
          <h2 className="text-md font-mono font-semibold uppercase tracking-wider dark:text-gray-50">
            Light
            <SunIcon
              className="ml-1 inline-block h-8 w-8 text-amber-400 animate-wiggle "
              onClick={() => setTheme('light')}
            />
          </h2>
        </div>
      )
    } else {
      return (
        <div className="flex cursor-pointer items-center">
          <h2 className="text-md font-mono font-semibold uppercase tracking-wider text-slate-500 ">
            Dark
            <MoonIcon
              className="ml-1 inline-block h-8 w-8 text-gray-600 animate-wiggle_reverse"
              onClick={() => setTheme('dark')}
            />
          </h2>
        </div>
      )
    }
  }

  return (
    <header className="align-items mx-auto mt-4 flex max-w-md justify-between space-x-4 rounded-md p-2 md:max-w-2xl">
      <div>
        <Logo />
      </div>

      {renderThemeChanger()}
    </header>
  )
}

export default Navbar

Inside GithubUser.js:

import UserProfile from './UserProfile'
import UserBio from './UserBio'
import UserStats from './UserStats'
import UserData from './UserData'

const GithubUser = (props) => {
  const date = new Date(props.data.created_at)
  const newDate = date.toDateString(4, 10).slice(4, 15)

  return (
    <div className="mx-auto mt-6 flex max-w-md min-h-[470px] flex-col items-end justify-between space-y-4 rounded-lg bg-gray-200 py-6 transition duration-300 ease-in dark:bg-[#2b365e] md:min-h-fit md:max-w-2xl">
       <UserProfile
        name={props.data.name}
        date={newDate}
        username={props.data.login}
        imageURL={props.data.avatar_url}
      />

      <div className=" flex w-full md:max-w-lg flex-col space-y-6 px-6 py-3">
        <UserBio bio={props.data.bio} />
        <UserStats
          repos={props.data.public_repos}
          followers={props.data.followers}
          following={props.data.following}
        />

        <UserData
          location={props.data.location}
          twitterUsername={props.data.twitter_username}
          blog={props.data.blog}
          company={props.data.company}
        />
      </div> 
    </div>
  )
}

export default GithubUser

Inside SearchBar.js:

import { SearchIcon } from '@heroicons/react/outline'

const SearchBar = ({userName, handleClick , userRef}) => {

  return (
    <div className=" align-items mx-auto mt-4 flex max-w-md justify-between space-x-2 rounded-lg bg-gray-200 p-2 pb-2 transition duration-300 ease-in dark:bg-[#2b365e] md:max-w-2xl">
      <SearchIcon className="mt-3 ml-2 h-6 w-6 text-[#5176ff] dark:text-blue-600" />
      <input
        name="search"
        ref={userRef}
        placeholder="Search GitHub username....."
        className="text-md mt-1 w-[400px] rounded-md bg-gray-200 px-2 py-2 font-mono leading-6 text-slate-500 placeholder-neutral-400 transition duration-300 ease-in focus:outline-none dark:bg-[#2b365e] dark:text-gray-50 dark:placeholder-slate-500"
      />
      <button
        onClick={handleClick}
        className=" text-md mx-auto h-10 rounded-md bg-gray-50 px-4 font-mono font-medium text-blue-600 shadow-xl transition duration-300 ease-in hover:bg-blue-500 hover:text-blue-100 dark:bg-[#5176ff] dark:text-white dark:hover:bg-blue-600 "
      >
        Search
      </button>
    </div>
  )
}

export default SearchBar

Inside UserBio.js:

import React from 'react'

const UserBio = ({bio}) => {
  return (
    <p className="font-mono text-sm font-medium text-gray-800 dark:text-gray-300 text-center ">
          Bio-{bio === null ? 'Not Available' :bio}
    </p>
  )
}

export default UserBio

Inside UserData.js:

import {
    LocationMarkerIcon,
    LinkIcon,
    OfficeBuildingIcon,
  } from '@heroicons/react/solid'

const UserData = ({location, twitterUsername,blog, company}) => {
  return (
    <div className="grid grid-cols-1 gap-6 px-2 py-4 md:grid-cols-2 md:gap-x-10">
          <div className="flex items-center space-x-2 font-semibold text-white transition-colors duration-150 hover:text-blue-400">
            <LocationMarkerIcon className="h-5 w-5 text-slate-500 dark:text-gray-100" />
            <p className="font-mono text-sm font-medium text-gray-900 dark:text-gray-300">
              {location ? location : "Not Available"}
            </p>
          </div>

          <div className="flex items-center space-x-2 font-semibold text-white transition-colors duration-150 hover:text-blue-400">
            <svg
              width="20"
              height="20"
              fill="currentColor"
              className="text-sky-400 opacity-100"
            >
              <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path>
            </svg>
            <p className="font-mono text-sm font-medium text-gray-900 dark:text-gray-300">
              <a
                href={`https://twitter.com/${twitterUsername}`}
                target="_blank"
              >
                {twitterUsername ? twitterUsername : "Not Available"}
              </a>
            </p>
          </div>

          <div className="flex items-center space-x-2 font-semibold text-white transition-colors duration-150 hover:text-blue-400">
            <LinkIcon className="h-5 w-5 text-slate-500 dark:text-gray-100 " />
            <p className="decoration-3 font-sm font-mono text-sm font-medium text-gray-900 underline dark:text-gray-300">
              <a href={`https://${blog}`} target="_blank">
                {blog ? blog :"Not Available"}
              </a>
            </p>
          </div>

          <div className="flex items-center space-x-2 font-semibold text-white transition-colors duration-150 hover:text-blue-400">
            <OfficeBuildingIcon className="h-5 w-5 text-slate-500 dark:text-gray-100 " />
            <p className="font-sm font-mono text-sm font-medium text-gray-900 dark:text-gray-300">
              {company ? company : "Not Available"}
            </p>
          </div>
        </div>
  )
}

export default UserData

Inside UserProfile.js:

import Avatar from './Avatar'

const UserProfile = ({ name, date, username ,imageURL}) => {
  return (
    <div className=" flex w-full items-center space-x-4 md:justify-evenly md:space-x-6">
      <Avatar imageURL={imageURL} />
      <div className="flex flex-1 items-center space-x-6 px-2 md:flex-1 md:items-start md:justify-between">
        <h2 className="w-32 md:w-44 font-mono text-lg font-bold text-gray-800 dark:text-gray-50 md:text-2xl">
          {name}{' '}
          <span className="inline-block font-mono text-sm text-blue-400">
            {username && `@${username ? username :'Not Available'}`}
          </span>
        </h2>
        {username && <p className=" md:text-md -mt-2 pl-6 font-mono text-sm font-[400] text-slate-600 dark:text-gray-300 md:mt-0 md:p-6 md:pt-2">
          Joined{' '}
          <span className="flex font-mono text-xs font-semibold md:inline-block md:text-sm">
            {date ? date :"Not Available"}
          </span>
        </p>}
      </div>
    </div>
  )
}

export default UserProfile

Inside UserStats.js:

import React from 'react'

const UserStats = ({repos,followers ,following}) => {
  return (
    <div className=" grid grid-cols-3 gap-6 divide-x divide-gray-700 rounded-xl bg-gray-50 py-4 dark:divide-gray-50 dark:bg-[#1e253f]">
    <div className="align-items flex flex-col px-4 text-center">
      <h4 className="font-mono text-xs font-semibold text-gray-700 dark:text-gray-400 ">
        Repos
      </h4>
      <p className="font-mono text-lg font-extrabold text-gray-700 dark:text-gray-50 ">
        {repos ? repos :"Not Available"}
      </p>
    </div>

    <div className="align-items flex flex-col text-center">
      <h4 className="font-mono text-xs font-semibold text-gray-700 dark:text-gray-400 ">
        Followers
      </h4>
      <p className="font-mono text-lg font-extrabold text-gray-700 dark:text-gray-50 ">
        {followers ? followers :"Not Available"}
      </p>
    </div>

    <div className="align-items flex flex-col text-center">
      <h4 className="font-mono text-xs font-semibold text-gray-700 dark:text-gray-400 ">
        Following
      </h4>
      <p className="font-mono text-lg font-extrabold text-gray-700 dark:text-gray-50 ">
        {following? following : "Not Available"}
      </p>
    </div>
  </div>
  )
}

export default UserStats

Now open up the terminal and start the application by running the command

npm run dev

The application might be working or it may be showing some error because we haven't completed the application yet, so don't worry about it.

To fetch the Github API and Display the data

Now the final step has come, go to index.js inside the pages directory and delete all the code inside it and then paste this code inside it:

Inside the index.js :

import Head from 'next/head'
import SearchBar from '../components/SearchBar'
import Navbar from '../components/Navbar'
import GithubUser from '../components/GithubUser'
import { useState, useRef, useEffect } from 'react'
import { Loading } from '../components/Loading'

export default function Home() {
  let API = 'https://api.github.com/users/octocat'

  const userRef = useRef(null)
  const [userName, setUserName] = useState('')
  const [data, setData] = useState('')
  const [isLoading, setLoading] = useState(false)

  function handleClick() {
    setUserName(userRef.current.value)
  }
  useEffect(() => {
    setLoading(true)
    if (userName) {
      API = `https://api.github.com/users/${userName}`
    }

    fetch(API)
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [userName]);

  if(!data) (
  <p>No Profile data.</p>
  )

  return (
    <div className="min-h-screen bg-gray-50 py-7 dark:bg-[#1e253f]">
      <Head>
        <title>GitHub User Finder App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar />

      {isLoading ? <Loading /> :
      <>
      <SearchBar
        userName={userName}
        handleClick={handleClick}
        userRef={userRef}
      />
      <GithubUser data={data} />
      </>
      }
    </div>
  )
}

After pasting the code save the application and restart the server and visit localhost:3000 and you will the application working.

You can type any valid GitHub username and you will see the data get displayed on the front-end.

Conclusion

Hope you were able to build this amazing Github User finder App for your next project. Feel free to follow me on Twitter and share this if you like this project 😉.

It took me 4-5 days to build this project and I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website nextjsdev.com and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed Github Repo here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

Connect with me:

Add Dark mode in Nextjs App using Tailwind CSS Dark Mode.

raivikas — Sun, 20 Feb 2022 07:04:00 +0000

Hello everyone, I hope you are good and doing well. Today, we are going to discuss how we can add dark mode in Next.js App using Tailwind CSS dark mode in just 5 easy steps. So, Let's begin.

Having a bright screen at night is painful for our eyes. That's why the dark mode feature is necessary if we want to take care of our user's eyes.

In this lesson, we'll learn how to enable dark mode in our Next.js application to keep our users engaged with our app all night long.

We will see how we can easily implement the dark mode feature by using and combining next-themes and Tailwind CSS.

And we'll add the ability for our users to toggle between light and dark mode from the user interface.

Here is the image of the website:

Tech Stack used:

Next.js
Tailwind CSS
React.js

Npm Packages used:

next-themes
@heroicons/react

Here is a little demo of the project, that we are going to build and the GitHub link of the project also.

Demo Link of the Project

Github Link of the Project

Step-1 Create Nextjs App and add Tailwind CSS.

First of all, create a Next.js project and add Tailwind CSS in it or you can create a new Next.js App with Tailwind CSS added in it already using this command.

npx create-next-app my-project // without Tailwind CSS installed
or
npx create-next-app -e with-tailwindcss my-project //with Tailwind CSS

Now you have to install two packages next-themes and @heroicons/react from npm.

npm install next-themes @heroicons/react

Step-2 Creating Navbar and Hero Section.

Let's create a simple Navbar, with a Hero section so that we can look at the changes of dark mode and light mode themes.

So, first of all, create two folders named components and sections in the root of the directory.

Inside the components , create a file name Logo.js and paste this code inside that.

Inside Logo.js write this code:

import { LightningBoltIcon } from "@heroicons/react/solid";
import Link from "next/link";

const Logo = () => {
    return (
        <Link href="/">
        <a className="my-2 flex items-center space-x-1 text-indigo-500">
          <LightningBoltIcon className="h-8 w-8 flex-shrink-0 mr-3"/>
          <span className="font-bold text-3xl font-sans tracking-tight whitespace-nowrap">Next-js Dev</span>
        </a>      
        </Link>
    )
}

export default Logo;

Then create three files inside the section folder.

Header.js
Layout.js
Footer.js

The file structure will look like this:

File structure of the Nextjs App

Inside the Header.js write this code:

import Logo from "../components/Logo";

const Header = () => {

  return (
    <header className="h-15 shadow-sm dark:border-gray-700">
      <div className="container px-4 sm:px-6 py-4 flex justify-between items-center">
        {/* Logo */}
        <Logo />
      </div>
    </header>
  );
};

export default Header;

Inside the Footer.js write this code:

const Footer = () => {
  return (
    <footer className="px-4 sm:px-6 py-6 mt-24">
      <div className="text-center text-sm text-gray-500">
        <span className="dark:text-gray-100 text-gray-900 font-bold text-lg mr-2"> Next.js Dev</span> &copy; {new Date().getFullYear()} All Rights Reserved
      </div>
    </footer>
  );
};

export default Footer;

Inside the Layout.js write this code:

import Header from "./Header";
import Footer from "./Footer";
import Head from "next/head";

const Layout = ({ children}) => {
  return (
    <>
      <Head>
        <title>Nextjs-Dev Blog</title>
        <link rel="icon" href="/favicon.ico" />

      </Head>

      <div className="min-h-screen mx-auto max-w-2xl flex flex-col">
        <Header />
        <main className="flex-grow container mx-auto px-4 sm:px-6">
          {children}
        </main>
        <Footer />
      </div>
    </>
  );
};

export default Layout;

Step-3 Importing the ThemeProvider from next-themes.

Now, open the _app.js inside the pages folder and write the following code given below.

Inside _app.js file:

import "tailwindcss/tailwind.css";
import "../styles/globals.css";
import { ThemeProvider } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

After that open the tailwind.config.js file and then add a property darkMode in it and give a value "class" to it like this.

module.exports = {
  mode: "jit",
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./sections/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class", 
  theme: {
    extend: {
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now, whenever, the dark class is present earlier in the HTML tree, tailwind CSS will apply the dark styles, otherwise, it applies the light theme by default.

Step-4 Adding a toggle button to control dark mode manually.

Now let's add the ability to toggle the dark mode manually from the user interface.

Open the Header.js file from the sections folder, and import the **useTheme** hook from next-themes, along with the **MoonIcon** and the **SunIcon** components from heroicons.

Then, retrieve the **systemTheme**, the **theme**, and the **setTheme** properties by calling useTheme at the top of your component.

From there, create a new method names **renderThemeChanger** and get the current theme from the system or the theme variable.

Now, if the current theme is dark, we return the SunIcon component and implement the onClick event by using the setTheme method from next-themes to toggle the theme back to light on click to this icon.

Otherwise, we return the MoonIcon component and set the theme to dark on click.

Finally, we can call this new method right inside our JSX to render the current theme icon, and align it with our logo with flexbox.

The Header.js file now looks like this:

import Logo from "../components/Logo";
import {useTheme} from "next-themes";
import{SunIcon ,MoonIcon} from "@heroicons/react/solid";

const Header = () => {

  const {systemTheme , theme, setTheme} = useTheme ();

  const renderThemeChanger= () => {

      const currentTheme = theme === "system" ? systemTheme : theme ;

      if(currentTheme ==="dark"){
        return (
          <SunIcon className="w-10 h-10 text-yellow-500 " role="button" onClick={() => setTheme('light')} />
        )
      }

      else {
        return (
          <MoonIcon className="w-10 h-10 text-gray-900 " role="button" onClick={() => setTheme('dark')} />
        )
      }
   };

  return (
    <header className="h-15 shadow-sm dark:border-gray-700">
      <div className="container px-4 sm:px-6 py-4 flex justify-between items-center">
        {/* Logo */}
        <Logo />

        {renderThemeChanger()}
      </div>
    </header>
  );
};

export default Header;

Step-5 To avoid hydration mismatch.

There is one more thing we need to do to avoid hydration mismatch.

Because we cannot know the theme on the server, the values returned from useTheme will be undefined until mounted on the client.

In other words, our theme icon will not match the actual current theme. And that's pretty bad for user experience.

So to fix this, we need to make sure we only render our icon when the page is mounted on the client.

So, import the useState and useEffect hooks from react.And create a new state variable to track if the component has been mounted or not on the client-side.

Set the initial value to false, and then set its value to true inside a useEffect hook.

Finally, inside the renderThemeChanger, check if the component is mounted before rendering the UI for the theme changer.

Inside Header.js file:

import {useState, useEffect} from "react";

const Header = () => {
const [mounted, setMounted] = useState(false);

  useEffect(() =>{
    setMounted(true);
  },[])

const renderThemeChanger= () => {
      if(!mounted) return null;

      const currentTheme = theme === "system" ? systemTheme : theme ;

      if(currentTheme ==="dark"){
        return (
          <SunIcon className="w-10 h-10 text-yellow-500 " role="button" onClick={() => setTheme('light')} />
        )
      }

      else {
        return (
          <MoonIcon className="w-10 h-10 text-gray-900 " role="button" onClick={() => setTheme('dark')} />
        )
      }
   };
}

Step-6 Time to add Dark Mode variant styles.

Now that everything is all set, let's add the styles to our elements using the dark variant from Tailwind CSS, save your file and refresh your browser.

Now navigate to the styles folder and open the global.css file.

Inside global.css that paste this code:

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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 dark:bg-black dark:text-gray-100;
    @apply min-h-screen;
  }

  ::selection {
    @apply text-white bg-indigo-500;
  }


  .btn{
    @apply inline-block px-5 py-3 rounded-lg hover:bg-indigo-600 transition duration-300 shadow-lg bg-indigo-500 text-white capitalize tracking-wider font-semibold text-sm sm:text-xl focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 whitespace-nowrap
  }
}

You can now change the theme of your application manually from

the UI which is what we wanted.

You can easily change those dark variants by just adding classes like this:

<h1 className=" dark:bg-gray-900 dark:text-gray-100 " >This is H1 heading</h1>

Conclusion

So that was all about adding Dark mode in Nextjs App using Tailwind CSS. I hope you like this and enjoyed building this project.

If you think that this was helpful and then please do consider visiting my original blog link and do follow me on Twitter and connect with me on LinkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed github repository here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

Some Useful Link:

Connect with me:

Nextjs User Login Authentication in 5 simple steps using Auth0.

raivikas — Sun, 09 Jan 2022 07:04:00 +0000

Hello everyone, I hope you all are well. In this post we are going to discuss, how you can set up a user Login authentication using Auth0 in Next.js projects.

Here is a little demo of the project, that we are going to build:

Demo Video Link

So, let's jump right into it. We will be doing this in 5 easy steps:

Note: I have used Tailwind CSS for as a CSS framework and created a custom Navbar for this project , If you wish to get the code for the same , you can visit my Github project link and copy from there.

STEP-1 Create your Auth0 Account

Create an Auth0 Account. Then visit your dashboard and under Applications click on Application, then click on Create Application and provide a name to the application and choose the " Regular web Application" category.

Now you will see 5 tabs, one of them is Settings, click on setting and then scroll down a little bit and you will find "Application URIs".

Inside that, you have to fill the ALLOWED_CALLBACK_URL and the ALLOWED_LOGOUT_URL like this.

Auth0 create application

Auth0 change application URL

After this scroll down to the end and then click on save changes.

STEP-2 Setup Next.js App and download the Auth0 package

Create a Nextjs App using the create-next-app app-name.

For this tutorial I have created the Next.js app with TailwindCSS, just to style the application a little bit, you don't need to do that.

In case you want to set up nextjs-app with tailwindCSS, just use this one command it will do the rest.

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

And now cd into your folder and install the @auth0/nextjs-auth0 package.

npm install @auth0/nextjs/auth0

Step-3 Create .env.local file to store the credentials.

Create a .env.local file in the root directory of your project and paste this in your .env.local file and change the values with your Client_ID, Client_Secret, and ISSUER_BASE_URL, which you can find in your Auth0 dashboard.

AUTH0_SECRET='LONG_RANDOM_VALUE_32_CHARACTERS_LONG'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth.com'
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'

Auth0 Client Secret & ID

The base URL will remain the same and the rest three you can find in your Auth0 dashboard.

One more thing in the ISSUER_BASE_URL make sure that https:// is present in the URL do not remove it.

And to generate the 32 characters string you can paste this code in your terminal and it will generate a 32 characters long random string.

node -e "console.log(crypto.randomBytes(32).toString('hex'))"_

Step-4 Create API routes

Now we have to create an API route for the login, logout, callback. In Next.js it is very simple to do.

Just navigate to the /pages/api folder and inside that create a folder name auth and inside that create a file name [...auth0].js inside a square bracket like this:

Auth API Route

So we can create any route like this api/auth/login , api/auth/logout , api/auth/callback like this.

The file name in the square bracket will accept any route, it is called catch-all routes.

Then navigate inside the [...auth0].js and paste these two line of code and save it.

import {handleAuth} from "@auth0/nextjs-auth0";

export default handleAuth();

Make sure you have installed the package "@auth0/nextjs-auth0" .

Step-5 Final Step

So the last step is here. Navigate to /pages/_app.js and inside that wrap the inside a Component like this and make sure to import it also.

Code snippet Image

So these were the 5 steps to make authentication work in a Next.js Application.

If you open your terminal and cd to your project and type "npm run dev", you will see the application is running on port 3000.

Now change the URL and visit http://localhost:3000/api/auth/login.

You will see the Auth0 Login page and you will be able to use it and sign in to it.

Auth0 Login Page

But, the important question arises, how to use it, and how do we know we are authenticated or not?

How to use

We can use it for the following things:

To show some pages in our website which can only be seen if the user is authenticated.
If a user is not logged In, we can show a Sign In button, and if the user is Signed In we can show him a Logout button.

So to use this we need to use a Custom Hook provided by the auth0 package, which is useUser hook.

Navigate to pages/index.js and write the following code:


import {useUser} from "@auth0/nextjs-auth0";

  // you can use the error and loading state to show an error message or a loading spinner while loading.

Inside the Home function just above return, statement write this 

const {user ,error , isLoading} = useUser();

if (isLoading) {
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        ...loading{" "}
      </div>
    );
  }

  if(error){
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        {error.message}
      </div>
    )
  }

and then below the H1 tag paste this code:

<div className="max-w-[500px] border-4 border-indigo-400 rounded-lg p-6 mx-auto text-3xl mt-16 font-bold text-indigo-700 text-center">
       {user && (
         <p className="mb-6">Welcome 
         <span className="text-amber-600">{user.name}</span></p>
         )}
        {!user && (
          <p>You are Not signed In, Please Sign In to view the Secret Pages.</p>
          )}
  </div>

You can do the same thing as above to show the S ign In button only if the user is not logged In and the Logout button only if the user is already logged In.

Now suppose you have a members-only page in your application and you want only authenticated users can visit that page.

This can be easily done using the withPageAuthRequired Hook provided with nextjs-auth0 SDK.

Create a members-only.js file inside the pages directory and paste this code inside the file givenn below.


import {withPageAuthRequired } from "@auth0/nextjs-auth0";

const membersOnly = () => {
    return (
        <div>
        <h1 className="text-5xl font-semibold mt-10 text-center text-indigo-600">This page is for Members Only.</h1>   
        </div>
    )
}

export default membersOnly;

export const getServerSideProps = withPageAuthRequired();

So by doing this only authenticated users can visit the page and those who are not authenticated and try to visit the page will be shown a 404 page or may be redirected to the login page automatically.

Conclusion

So that was all about Nextjs Authentication using Auth0. I hope you like this and enjoyed building this project.

If you really think that this was helpful and then please do consider to visit my original blog link and do follow me on twitter and connect with me on linkedIn.

If you were stuck somewhere and not able to find the solution you can check out my completed repository here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

Some Useful Link:

Connect with me:

SVG Icons Libraries that you can use in react.js/next.js projects.

raivikas — Sun, 02 Jan 2022 07:04:00 +0000

Hello everyone, I hope you all are doing well. In this post, I have mentioned some useful free SVG Icons resources which you can download or can use directly in your web development projects.

Many times it happens that you need some kind of Icon, that you can use in your web projects to design the UI of your website, but you may not find the right one that you are looking for.

Here, I have curated a list of some free SVG icons websites, that you can check whenever you need them. These are some of the websites that I came across while I was finding some good SVG Icons.

So, I thought to share these amazing resources with all of you.

Here is the list of those websites :

Heroicons
Iconscout/unicons
Feather Icons
Material Icons by google
Font Awesome Icons
Flaticons
Freeicons
icons8.com
Material UI Icons

Heroicons

So heroicons has a collection of 230 icons, which are beautifully handcrafted Svg Ions by the maker of Tailwind CSS. You can also get the Figma file for each of the icons if you want to edit or change the icon as per your need.

It comes with two different styles of Icons:

Solid Variant
Outline Variant

You can either download it and use it in an Html File as an SVG tag or you can use each icon as a component from an npm package.

Iconscout/unicons

Iconscout is a very famous Design Resource Marketplace. It has not only Svg Icons but also Illustrations, 3D -Illustrations, Lottie Animations, and many more design resources.

It has a collection of over 4500+ icons, which is divided into 27 categories.

It has four different types of variants:

Line
Monochrome
Solid
Thin Line

But only the Line Variant is free.

Feather Icons

Feather icons are a collection of simple, beautiful, and open source icons. Every icon is designed on a 24x24 grid with an emphasis on flexibility and clean design.

It is a collection of 286 icons, and you can use them in different ways. You can either use it by downloading the npm package or you can load the script file from a CDN provider.

You can customize the icons on the website itself by changing size, stroke width, and color and download it as an SVG.

Material Icons by Google

This icons library is made by Google itself. Material Icons are available in five styles and a range of downloadable sizes and densities.

These icons are based on the core Material Design principles and metrics.

It has a pretty big collection of icons which is approximately 5000 covering 18 different categories.

It provides five different variants of icons:

Outlined
Filled
Rounded
Sharp
Two-tone

Font Awesome Icons

It is the most popular and next generations web's favorite icons library and toolkit.

It has a big collection of 14729 icons in total with 5 different variants and having 66 different categories.

It has 5 different icons variants:

Solid
Regular
Light
Thin
Duotone

Flaticons

Flaticons has the largest database of icons available in PNG, SVG, PSD, EPS, and BASE 64 formats.

It has access over to 6.3M+ SVG icons and the best part is that each icon is available for free and it also has a good collection of Stickers.

It has three different variants:

Regular
Bold
Solid

These three variants come with two style options rounded strokes or straight.

Freeicons.io

Free icons have the largest database of free SVG icons. These icons come in 17 different styles.

It has a wide variety of high-quality icon that comes in different sizes, styles with PNG. SVG, EPS, and other formats.

These styles are:

3D
Badge
Blue Line
Cartoon
Duo-Tone
Filled outline
Flat
Glyph
Gradient
Gradient Glyph
Handdrawn
Long Shadow
Outline
Photorealistic
Pixel
Smooth
Solid

Icons8

Icons8 is a pretty huge library consisting of not only SVG icons but also illustrations, photos, music, design tools, etc.

They have 33 different styles option for icons with design tools like :

3D Illustrations
Stock photo & 3D textures design
AI-powered Face generator
AI-powered photo generator

And plenty more tools.

It is the best website that does not have icons only but also many tools and resources which can be helpful for your web projects.

Material UI Icons

Material UI icons are designed by the team of Material UI, which is a CSS framework for React.js, Vue.js, and Angular.js.

It has a collection of 1900+ React-material icons which are ready to use. Just download the npm package @mui/icons-material and you are ready to use them in your React/Vue/Angular projects.

The icons come in five different styles:

Filled
Outline
Rounded
Two-tone
Sharp

The MUI Icons are the same icons set by Google Material Icon.

The MUI just packaged those sets of icons into Components, so that they can be used in UI libraries like React/Vue as a component.

Conclusion

So that was the list of some of the best SVG Icons Libraries that you can use in your web projects.

Let me revise the list once again for you :

These are some of the best SVG Icons libraries, in my opinion, you may like or dislike them.

I hope you like this info regarding SVG Icons and if you have read till here, then thank you so much for your patience reading.

If you want to read more such articles you can check out some article links below and I will see you in another amazing post 👋.