DEV Community: Amrin

7 New Shadcn Components That Will Level Up Your App UI

Amrin — Wed, 15 Oct 2025 09:32:50 +0000

Shadcn just rolled out a major update, and it’s one of the most practical ones yet.

Seven new components were added, and they’re not flashy marketing pieces. They’re real app components designed to fix actual frontend pain.

If you’ve been using Shadcn for your dashboard, SaaS, or admin panels, you’ll love this.

These updates make everyday UI tasks simpler, cleaner, and more consistent.

Let’s get into it.

1. Spinner: Finally, a Built-In Loader

Every app needs a loading state, and now Shadcn has a simple, flexible one built in.

The new <Spinner /> works on its own or inside buttons, no more creating custom loaders or positioning icons manually.

<Button disabled>
  <Spinner className="mr-2" /> Loading...
</Button>

You can even replace it with your own loader icon or animation.

2. Kbd: Show Keyboard Shortcuts Beautifully

<Kbd /> helps you display keyboard shortcuts in a clean, accessible way. It’s perfect for command menus, power-user workflows, or tooltips.

<Kbd keys={["⌘", "K"]} />

Supports multiple keys, works inside buttons and menus, and brings that “Linear/Notion-level” polish to your UI.

3. ButtonGroup: Organize Your Actions

Stop manually styling button groups. Shadcn now has a <ButtonGroup /> component. It automatically aligns multiple buttons, handles spacing, and supports vertical or horizontal orientation.

<ButtonGroup>
  <Button>Edit</Button>
  <Button>Delete</Button>
</ButtonGroup>

You can even create split buttons by combining them with dropdowns.

4. InputGroup: Modern Inputs Made Easy

This one’s a game changer.

The new <InputGroup /> lets you combine inputs with icons, buttons, labels, or text, all inside a structured layout.

<InputGroup>
  <Input placeholder="Search..." />
  <Button>Go</Button>
</InputGroup>

You can add prefix/suffix icons, tooltips, or buttons, and everything just aligns perfectly.

5. Field: The Smarter Form Wrapper

<Field /> simplifies form markup by bundling label, input, description, and error state together. It comes with full support for popular form libraries like React Hook Form, TanStack Form, or even server actions.

<Field label="Email" error="Invalid email address">
  <Input type="email" />
</Field>

It handles spacing, ARIA attributes, and validation out of the box.

6. Item: A Better Alternative to Card for Lists

Cards are great, but they’re overkill for simple list items.

<Item /> gives you a more lightweight, semantic structure for things like settings, user lists, or notifications.

It comes with subcomponents like:

ItemMedia for icons or avatars
ItemContent, ItemTitle, ItemDescription for text
ItemActions for buttons or menus

<Item>
  <ItemMedia>
    <Avatar />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Project Alpha</ItemTitle>
    <ItemDescription>Last updated 2 hours ago</ItemDescription>
  </ItemContent>
</Item>

7. Empty: Designed Empty States That Don’t Suck

Empty states often get ignored, but they matter.

The new <Empty /> component gives you a clean structure for your empty lists, tables, or pages.

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <Image src="/no-data.svg" alt="Empty" />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create your first project to get started.</EmptyDescription>
  </EmptyHeader>
  <Button>Create Project</Button>
</Empty>

Why This Update Stands Out

These seven components aren’t for fancy portfolios or other saas landing pages, they’re for production apps.

They cover the essentials:

Forms
Inputs
Lists
Loading and empty states
Grouped actions

They’re accessible, composable, and follow the same “copy-paste-customize” approach that makes Shadcn so flexible.

“Real apps aren’t made of hero sections, they’re made of forms, inputs, and lists.”

Shadcn just nailed that.

Special Recommendation: ShadcnSpace

While the 7 components above level up your basic UI, Shadcn Space levels up your entire development workflow. If you want to move beyond building forms piece-by-piece and start deploying full sections like advanced dashboards or complex SaaS landing pages, this is the tool to watch in 2026.

Why it belongs in your stack:

Radix UI + Base UI Flexibility: It’s one of the only places where you can choose the underlying architecture (Radix or MUI’s Base UI) while keeping the Shadcn "copy-paste" freedom.

Higher-Level Blocks: It doesn't just give you an input, it gives you the entire themed authentication flow or data-rich dashboard sidebar.

AI-Native (The "Cursor" Edge): It includes an MCP (Model Context Protocol) Server. If you use Cursor or Windsurf, you can generate and insert these blocks directly with AI—no more manual copying from a browser.

Production Ready: These aren't just "pretty" components; they are designed for real-world SaaS use cases with integrated motion (Framer Motion) and clean accessibility.

Final Thoughts

This update gives Shadcn the structure and polish it was missing for real-world projects.

From loaders to input layouts, everything now fits together in a consistent, modern way.

If you haven’t updated your components yet, now’s the time.

12 Best Shadcn Block Libraries for 2026

Amrin — Tue, 14 Oct 2025 04:43:53 +0000

If you’ve been building with Shadcn UI, you already know how powerful it is. It combines the flexibility of Tailwind CSS with the accessibility and structure of Radix UI. Shadcn gives a developer the freedom to design anything without headache.

But while Shadcn gives you the components, it doesn’t give you ready-made blocks, sections, layouts, or templates.

That’s where the new wave of Shadcn block libraries comes in. These libraries provides real-world patterns like hero sections, dashboards, or pricing pages built entirely with Shadcn components and Tailwind.

At GridPixels, we’ve been using Shadcn across all our Next.js templates. We’ve explored almost every block library out there, and here are 12 of the best Shadcn UI block libraries worth checking out in 2025.

1. Skiper UI

A strong starting point for anyone building SaaS apps or landing pages. Skiper UI offers beautiful, production-ready blocks that just feel “right” in modern design systems.

Pros

Collection unique and beautiful components.
Smooth animations
Consistent Shadcn + Tailwind integration

Cons

Limited customization in a few blocks
Some animations rely on Framer Motion

Suggestion:

Perfect for quick landing page builds or polished SaaS UIs.

2. Shadcndesign

Unlike most, Shadcndesign focuses purely on Figma blocks for Shadcn. Best for design first workflows. It bridges design and dev, offering clean Shadcn-ready layouts in Figma format.

Pros

Large Figma block collection
Great for visual prototyping
Design consistency with Shadcn

Cons

No code blocks Figma only
Some layouts feel visually heavy

Suggestion:

Use it when you want to design your Shadcn layout first, then translate it into code.

3. Aceternity

Aceternity is easily one of the most popular Shadcn-based block kits. It’s beautifully built, with interactive blocks and thoughtful motion, perfect for modern SaaS products.

Pros

Gorgeous animation and transitions
Clean, responsive design
Various components.
Extensive documentation

Cons

Some effects feel overused
Can be heavy for minimal apps

Suggestion:

Start with Aceternity if you love polished, animated UIs that feel premium.

4. SmoothUI

SmoothUI is what it sounds like, smooth, well-crafted, and focused on real usability. It’s less flashy, more practical.

Pros

Clean Tailwind implementation
Excellent performance
Works out-of-the-box
Components with Micro-interactions

Cons

Smaller library
Limited to essential patterns

Suggestion:

Ideal for startups or devs who value simplicity over visual effects.

5. Cult-UI

Cult-UI is a hidden gem. It blends Shadcn components with creative layouts and unique animations that stand out from typical boilerplates.

Pros

Unique visual direction
Beautiful use of motion
Well-organized blocks

Cons

Some blocks lack responsiveness
A few animations can clash with minimal themes

Suggestion:

Use it when you want your site to feel distinct, not just functional.

6. Blocks.so

Blocks.so is a collection of minimalist shadcn/ui blocks. It follows the default shadcn style, adding more blocks for building web apps.

Pros

Simple shadcn/ui blocks
Regularly updated
Essential sections.

Cons

Some designs are generic
No animation, default shadcn style.

Suggestion:

Go with Blocks if you want to build an MVP or you wanna put together something quickly. It’s best for building fast without focusing on making it pretty.

7. Kibo

Kibo feels like that underrated GitHub repo you find at 2 a.m. Small but surprisingly good.

It offers thoughtfully built Shadcn blocks that actually work out of the box.

Pros

Clean, minimal setup
Developer-focused
Lightweight and responsive

Cons

Smaller collection
Limited animation options

Suggestion:

Perfect for lean builds and MVPs where speed and simplicity matter.

8. Shadcraft

Shadcraft offers a collection of Shadcn/UI Figma components and UI blocks, perfect for designing MVPs quickly.

You can prototype fast and refine the design later to match your brand.

Pros

Large collection of components and blocks
Free and premium components.

Cons

Only Figma version available

9. Shadcnblocks

Shadcnblocks is a premium block library built specifically for Shadcn UI, Tailwind, and React.

It includes over 800+ responsive, production-ready blocks designed and reviewed by professionals, ready to copy, paste, or install via the Shadcn CLI.

Pros

Massive library with 800+ high-quality blocks
Professionally designed and fully responsive
Easy to integrate via copy-paste or CLI
Regularly updated and maintained

Cons

Some blocks feel visually similar
Few free blocks and components.

Suggestion:

Use Shadcnblocks if you want to build polished UIs fast. Perfect for SaaS founders, agencies, and devs.

10. Tailark

Tailark is a notion inspired clean shadcn block libraries. It comes with a huge collection of components and blocks.

Pros

Solid design for marketing and SaaS sites
Tailwind + Shadcn combination works smoothly
Consistent layout spacing
Notion inspired design.

Cons

Not many app or dashboard blocks
Some designs look quite similar

Suggestion:

Use Tailark if you want a fast way to build landing pages without heavy customization. Best for building SaaS landing pages.

11. Solace UI

Solace UI focuses on tasteful, production-ready design. It offers clean sections, subtle animations, and full-page templates built with Next.js, Tailwind CSS, and Framer Motion.

Pros

Elegant and minimal design language
Includes animated and full-page templates
Well-built with modern frameworks (Next.js, Tailwind, Framer Motion)

Cons

Smaller component collection
Limited motion variety
Still in beta.

Suggestion:

Use Solace UI if you prefer calm, balanced, and modern UIs that look great out of the box — ideal for product sites, SaaS pages, and startups that value simplicity.

12. Magic UI

Magic UI is a free, open-source library packed with 150+ animated components and effects built using React, TypeScript, Tailwind CSS, and Framer Motion. It’s designed to work seamlessly alongside Shadcn/UI, making it a perfect add-on for adding motion and interactivity.

Pros

150+ prebuilt animated components and effects
Fully open-source and actively maintained
Works perfectly with Shadcn/UI projects

Cons

Some animations are heavy for production use
Limited documentation for complex effects

Suggestion:

Use Magic UI to bring life to your Shadcn projects — ideal for hero sections, interactions, and transitions that need a touch of motion without overcomplicating your setup.

Special Mention

13. Shadcn Space

Shadcn Space isn't just a block library; it’s an entire ecosystem designed for high-velocity development. It stands out by offering a massive variety of "Visual Styles" and unique architectural choices that most other libraries ignore.

Pros

Over 130+ component variants and 199+ blocks.
It’s one of the few libraries that lets you choose between Radix UI and Base UI.
Designed with Tailwind CSS and it’s ready to use via Shadcn CLI.
It includes an MCP (Model Context Protocol) Server, meaning you can pull these blocks directly into AI editors like Cursor or Windsurf with a single prompt.

Cons

Learning Curve: The sheer amount of options (Styles vs. Primitives) can be overwhelming for beginners.
Newer Player: While it has more blocks than most, it’s still rapidly evolving.

Suggestion:
Use Shadcn Space if you are building a complex SaaS or high-end dashboard. It’s the ultimate choice for developers who want to move fast with AI but still need "pro" architectural choices like Base UI.

Wrapping Up

The Shadcn ecosystem is evolving fast, and these libraries are shaping how developers build in 2025.

Whether you want production-ready dashboards, creative landing pages, or minimal starter kits, there’s a library here for every workflow.

At GridPixels, we’ve built all our saas boilerplates on top of Shadcn.

If you’re building with Shadcn, these libraries will save you hours (and help you ship faster without sacrificing design).

What about you?

Have you tried any of these Shadcn UI block libraries? Or found a new one I should check out?

Drop your favorites, I might include them in the next update.

Integrating Code Blocks with Syntax Highlighting in Sanity Blogs

Amrin — Tue, 10 Sep 2024 16:13:26 +0000

We built a complete blog with Sanity but don’t have support for code input and syntax highlight.

So, today we will integrate code input and syntax highlight on our blog.

Let’s get started.

Install the package

To enable code input on Sanity Studio install the sanity/code-input package

npm install @sanity/code-input

or

yarn add @sanity/code-input

For syntax highlight install react-syntax-highlighter

npm install react-syntax-highlighter

or

yarn add react-syntax-highlighter

Add the plugin

Once the installation is complete, add the plugin to the sanity.config.ts file.


import { codeInput } from "@sanity/code-input";

const config = defineConfig({
  //..
  plugins: [structureTool(), codeInput()],
  schema: { types: schemas },
});

export default config;

Update the Schema

To enable code code input we need to update the BlockContent Schema.

Open up blockContent.ts file from sanity→schemas and add the Code Block schema in the array.

const blockContent = {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    ...

    {
      type: "code",
      name: "code",
      title: "Code Blocks",
      options: {
        languageAlternatives: [
          { title: "", value: "" },
          { title: "Javascript", value: "javascript" },
          { title: "HTML", value: "html" },
          { title: "CSS", value: "css" },
          { title: "React", value: "react" },
          { title: "Node", value: "node" },
          { title: "MySql", value: "mysql" },
          { title: "ZH", value: "zh", mode: "sh" },
        ],
        withFilename: false,
      },
    },
  ],
};
export default blockContent;

This will enable the code block option on the block content editor.

Now you can add code snippets to your blog posts.

To add a code snippet click the Code Blocks button and enter your code.

Choose the language from the drop-down menu. Once you are done, close the modal, which will save the code snippet.

We have the code snippet on the post body, but it will not appear on the post because the code snippet is unknown to the RenderBodyContent component.

We have to update the RenderBodyContent component to render the code snippet.

Update RenderBodyContent component

To render the code snippet import these on top of the file.

import SyntaxHighlighter from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";

Then create the Code component as shown below:

const Code = ({ value }: any) => {
  return (
    <div className="my-10">
      <SyntaxHighlighter language={value.language} style={dracula}>
        {value.code}
      </SyntaxHighlighter>
    </div>
  );
};

Finally, update the components with code components.

const components = {
  types: {
    image: ImageComponent,
    code: Code,
  },
};

This will generate the code snippet on the post.

This is how it looks:

If you want to change the theme you can do that very easily.

Just import the theme of your choice and update the style.

import { dark } from "react-syntax-highlighter/dist/esm/styles/hljs";

const Code = ({ value }: any) => {
  return (
    <div className="my-10">
      <SyntaxHighlighter language={value.language} style={dark}>
        {value.code}
      </SyntaxHighlighter>
    </div>
  );
};

You can find themes from here:

Themes: react-syntax-highlighter

Check out this repo for more information on syntax highlighter

GitHub - react-syntax-highlighter/react-syntax-highlighter

Resources:

Conclusion

In this tutorial, we successfully integrated code blocks with syntax highlighting into our Sanity-powered blog. I hope you found the guide helpful and informative.

If there's a specific topic you'd like to see covered in the next article, feel free to share your suggestions. I'm always open to feedback and new ideas!

Connect With Me
Twitter/x

Github

Happy Coding.

Build a Modern Blog with Next.js 14 & Sanity: A Step-by-Step Guide

Amrin — Mon, 19 Aug 2024 04:53:37 +0000

A blog without a CMS can lead to endless frustration and wasted time. Sanity.io simplifies the entire process, allowing you to focus on your content.

In today's article, you will learn how to build a blog with Sanity CMS and Next.js 14.

By the end of this guide, you'll have a fully functional and easily manageable blog up and running.

Prerequisite

To follow along with this article you have to have the following skills:

Knowledge of HTML, CSS, and JavaScript
Fundamentals of Next.js and TypeScript
Basic understanding of Tailwind CSS
And Node.js Installed on your machine.

What is Sanity?

Sanity is a headless CMS that makes content management straightforward and efficient. With Sanity Studio's intuitive dashboard, you can easily create, edit, and organize your content the way you want.

Sanity also offers a flexible API and webhook support, giving you full control over how and where your content is delivered. Whether it's a website, mobile app, or any other platform, Sanity ensures your content is always up-to-date and accessible.

Initialize Next.js project

We are integrating Sanity into a Next.js project. So, we need to set up a next.js project first.

To create a next.js project run this command below:

npx create-next-app@latest

Follow the instructions on the terminal and choose the name, after that, you can go with the default suggestion.

This will generate a bare-bone Next.js project.

Now, let’s open the project on our code editor.

cd sanity-blog
code .

Now run the dev command to open up the project on Localhost:3000

npm run dev

Setup Sanity Studio

Sanity Studio is the dashboard where you manage your content.

You can build the Studio and deploy it independently. But we will embed the Studio inside our Next.js project. It’s easy to maintain and use.

So, we will create a Sanity project and then integrate it within our Next.js project.

Run this command to initialize a Sanity project.

npm create sanity@latest

When you run this command you will be asked to login to Sanity. If you already have an account then choose a provider and login to your account.
If you don’t have an account go ahead and create an account and run the installation command once again.

Once you run this command it will ask you a bunch of questions to configure your project.

You can go with the default options.

We only need the name of the project and the rest is not that important.

Looks like you already have a Sanity-account. Sweet!

✔ Fetching existing projects
? Select project to use Create new project
? Your project name: sanity-blog
Your content will be stored in a dataset that can be public or private, depending on
whether you want to query your content with or without authentication.
The default dataset configuration has a public dataset named "production".
? Use the default dataset configuration? Yes
✔ Creating dataset
? Project output path: /home/amrin/Desktop/writing/sanity-blog
? Select project template Clean project with no predefined schema types
? Do you want to use TypeScript? Yes
✔ Bootstrapping files from template
✔ Resolving latest module versions
✔ Creating default project files
? Package manager to use for installing dependencies? npm
Running 'npm install --legacy-peer-deps'

Install the dependencies

Before we integrate sanity studio into our Next.js blog we need to install these dependencies.

npm install sanity next-sanity --save

Integrate Sanity Into Next.js project

To integrate Sanity into Next.js we need the projectName and the projectID. We can get that from the Sanity dashboard.

Go to sanity.io/manage you will see all the projects there.

Click on the project title to see the details.

You will see something like this:

Go ahead and copy the project name and the ProjectID and add those to your .env file

NEXT_PUBLIC_SANITY_PROJECT_TITLE = "";
NEXT_PUBLIC_SANITY_PROJECT_ID = "";

Now create the config file on the root of your project folder. And name it sanity.config.ts

import { defineConfig } from "sanity";
import {structureTool} from "sanity/structure";
import schemas from "@/sanity/schemas";

const config = defineConfig({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID as string,
  title: process.env.NEXT_PUBLIC_SANITY_PROJECT_TITLE as string,
  dataset: "production",
  apiVersion: "2023-06-18",
  basePath: "/admin",
  plugins: [structureTool()],
  schema: { types: schemas },
});

export default config;

Here’s a quick overview of what’s in the config file:

First import the required functions and files. Then define the Config. The config comes with many options:

projectId: It is the Sanity project ID you created earlier.

title: Your Sanity project title.

dataset: Defining dataset for the Studio.

basePath: The path for the Studio. We are using the /admin route to access the Studio. You can choose any route you want.

schema: These are the schemas for the content. A schema defines how a document will look like, and what fields it will have. We will have Schema for Posts and Authors, Categories, and others.

We don’t have the schema yet, we will create it in a while.

Setup the Studio

To set up the studio first we need a route. Navigate to src/app then create a route group and name it studio. We are grouping this to separate the site from the studio route.

Inside the studio create an admin folder and inside that add a catch-all route.

└── (studio)
    ├── admin
        └── [[...index]]
            └── page.tsx

Include this code in the admin route. We are getting the sanity.config we created earlier and NextStudio from sanity Studio to initialize the Studio.

"use client";

import config from "../../../../../sanity.config";
import { NextStudio } from "next-sanity/studio";

export default function AdminPage() {
  return <NextStudio config={config} />;
}

We are almost done setting up the studio.
Lastly, we need to write the schemas for the content. After that, we can take a look into the studio.

Create The Schema

A Schema defines the structure of a document in the Studio. We define schema with properties.

Some of the properties are required and some are not.

The common properties are:

name: Name of the Schema. We will use this name to fetch the data.

title: Human readable title for the Schema. It will be visible in the Studio.

type: A valid document type.

fields: An array of all the properties of the document. If it’s a post schema the fields will have properties like Title, slug, body, meta description, etc. These properties will show up as input fields on the Studio.

Since we are building a blog we will have multiple Schemas such as:

Post
Author
Category

To learn more about Sanity Schema Visit the documentation.

Post Schema

Create a folder named sanity inside the src directory.

Inside that create another folder named schemas and create index.ts and post.ts file

Here’s what the post Schema looks like.

const post = {
  name: "post",
  title: "Post",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule: any) => Rule.required(),
    },
    {
      name: "metadata",
      title: "Metadata",
      type: "string",
      validation: (Rule: any) => Rule.required(),
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        unique: true,
        slugify: (input: any) => {
          return input
            .toLowerCase()
            .replace(/\s+/g, "-")
            .replace(/[^\w-]+/g, "");
        },
      },
      validation: (Rule: any) =>
        Rule.required().custom((fields: any) => {
          if (
            fields?.current !== fields?.current?.toLowerCase() ||
            fields?.current.split(" ").includes("")
          ) {
            return "Slug must be lowercase and not be included space";
          }
          return true;
        }),
    },
    {
      name: "tags",
      title: "Tags",
      type: "array",
      validation: (Rule: any) => Rule.required(),
      of: [
        {
          type: "string",
          validation: (Rule: any) =>
            Rule.custom((fields: any) => {
              if (
                fields !== fields.toLowerCase() ||
                fields.split(" ").includes("")
              ) {
                return "Tags must be lowercase and not be included space";
              }
              return true;
            }),
        },
      ],
    },
    {
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "author" },
      validation: (Rule: any) => Rule.required(),
    },
    {
      name: "mainImage",
      title: "Main image",
      type: "image",
      options: {
        hotspot: true,
      },
      // validation: (Rule: any) => Rule.required(),
    },
    {
      name: "publishedAt",
      title: "Published at",
      type: "datetime",
      validation: (Rule: any) => Rule.required(),
    },
    {
      name: "body",
      title: "Body",
      type: "blockContent",
      validation: (Rule: any) => Rule.required(),
    },
  ],

  preview: {
    select: {
      title: "title",
      author: "author.name",
      media: "mainImage",
    },
    prepare(selection: any) {
      const { author } = selection;
      return Object.assign({}, selection, {
        subtitle: author && `by ${author}`,
      });
    },
  },
};
export default post;

Copy the schema over to the post.ts file.

To save time we are not going to see the other schemas, you can get them from the repository.

Load the schemas

Open up the index.ts file and add this code snippet.

import author from "./author";
import blockContent from "./blockContent";
import category from "./category";
import post from "./post";

const schemas = [post, author, category, blockContent];

export default schemas;

We are importing all the schema in this file and creating an array to load the schema on the studio.

Now you can add posts from the studio.

To create a new post, go to localhost:3000/admin you will see all the schemas there. Go ahead and create a few posts.

Query the content with GROQ

We integrated the Studio and created a few posts. Now we need a way to fetch those posts and render them on the home page.

We will use GROQ to do exactly that. GROQ is a query language designed to query large schema-less JSON data collection. With GROQ expressive filtering we can fetch data the way we want to use it. It can join and fetch from multiple documents.

To start using GROQ we need to create the config file and the queries.

Go ahead and create these files inside the sanity folder.

└── sanity
    ├── config
    │   └── client-config.ts
    ├── sanity-query.ts
    ├── sanity-utils.ts

Paste this code into the client-config.ts file.

import { ClientPerspective } from "next-sanity";

const config = {
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID as string,
    dataset: "production",
    apiVersion: "2023-03-09",
    useCdn: false,
    token: process.env.SANITY_API_KEY as string,
    perspective: 'published' as ClientPerspective,
};

export default config;

This is the config for fetching the data with the GROQ query.

Here’s a quick break-down of the config options:

apiVersion: It’s the Sanity API version. You can use the current date.

useCDN: Used to disable edge cache. We are setting it to false as we will integrate webhook. It will deliver updated data.

token: Sanity API key. Required for webhook integration. (We will integrate webhook in the next section)

perspective: To determine the document status. If it’s set to published it will only query the published documents otherwise it will fetch all the document drafts and published.

Now we will write the queries. We are going to keep the Queries and the Fetch functions in separate files.

Here are the queries, copy these into the sanity-query.ts file.

import { groq } from "next-sanity";
const postData = `{
  title,
  metadata,
  slug,
  tags,
  author->{
    _id,
    name,
    slug,
    image,
    bio
  },
  mainImage,
  publishedAt,
  body
}`;

export const postQuery = groq`*[_type == "post"] ${postData}`;

export const postQueryBySlug = groq`*[_type == "post" && slug.current == $slug][0] ${postData}`;

export const postQueryByTag = groq`*[_type == "post" && $slug in tags[]->slug.current] ${postData}`;

export const postQueryByAuthor = groq`*[_type == "post" && author->slug.current == $slug] ${postData}`;

export const postQueryByCategory = groq`*[_type == "post" && category->slug.current == $slug] ${postData}`;

At the top, is the postData object, which defines all the properties we want to fetch.

Then the actual queries. Each query has the query first then the postData object.

These queries are self-descriptive, but for clarity here’s a quick explanation for the postQueryBySlug:

_type: The name of the document.

slug.current: Checking the slug of each of the documents if it matches with $slug (We will pass $slug with the fetch function).

postData: Filtering out the data we want to get i.e. the title, mainImage, and description.

We will use these queries to fetch the data from Sanity Studio.

Copy these codes into the sanity-utils.ts file.

import ImageUrlBuilder from "@sanity/image-url";
import { createClient, type QueryParams } from "next-sanity";
import clientConfig from "./config/client-config";
import { postQuery, postQueryBySlug } from "./sanity-query";
import { Blog } from "@/types/blog";

export const client = createClient(clientConfig);
export function imageBuilder(source: string) {
  return ImageUrlBuilder(clientConfig).image(source);
}

export async function sanityFetch<QueryResponse>({
  query,
  qParams,
  tags,
}: {
  query: string,
  qParams: QueryParams,
  tags: string[],
}): Promise<QueryResponse> {
  return (
    client.fetch <
    QueryResponse >
    (query,
    qParams,
    {
      cache: "force-cache",
      next: { tags },
    })
  );
}

export const getPosts = async () => {
  const data: Blog[] = await sanityFetch({
    query: postQuery,
    qParams: {},
    tags: ["post", "author", "category"],
  });
  return data;
};

export const getPostBySlug = async (slug: string) => {
  const data: Blog = await sanityFetch({
    query: postQueryBySlug,
    qParams: { slug },
    tags: ["post", "author", "category"],
  });

  return data;
};

Here’s a quick overview of what’s going on here:

client: creating a Sanity client with the config we created earlier. It will be used to fetch the data with GROQ.

imageBuilder: To use the post image. The images are provided from sanity cdn and it requires all these configs.

sanityFetch: It’s the function to fetch data with cache. ( We could just use fetch too but we are configuring this now so that we can just add the webhook and we are good to go. )

Create the type for the post

Since we are using typescript we need to write the Type for the post. You can see we are using Blog type on the query functions.

Create a blog.ts file inside the types folder and copy this type:

import { PortableTextBlock } from "sanity";

export type Author = {
  name: string,
  image: string,
  bio?: string,
  slug: {
    current: string,
  },
  _id?: number | string,
  _ref?: number | string,
};

export type Blog = {
  _id: number,
  title: string,
  slug: any,
  metadata: string,
  body: PortableTextBlock[],
  mainImage: any,
  author: Author,
  tags: string[],
  publishedAt: string,
};

All the types are normal, the PortableTextBlock is from sanity. It defines the type of the post body.

All the setup is done!

Let’s fetch the posts and render them on our Next.js project.

Render the content on the Next.js project

First, we will fetch all the posts and create the blog page. Then we will fetch the post by slug for the single post page.

Post Archive

Create the Blog component app/components/Blog/index.ts and add this code.

import { Blog } from "@/types/blog";
import Link from "next/link";
import React from "react";

const BlogItem = ({ blog }: { blog: Blog }) => {
  return (
    <Link
      href={`/blog/${blog.slug.current}`}
      className="block p-5 bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 my-8"
    >
      <article>
        <h3 className="mb-1 text-2xl font-bold tracking-tight text-gray-700">
          {blog.title}
        </h3>
        <p className="mb-3 font-normal text-sm text-gray-600">
          {new Date(blog.publishedAt).toDateString()}
        </p>

        <p className="mb-3 font-normal text-gray-600">
          {blog.metadata.slice(0, 140)}...
        </p>
      </article>
    </Link>
  );
};

export default BlogItem;

Remove all the styles and code from globals.css (keep the tailwind utils) file and page.tsx file

Now add this to the page.tsx file inside (site)

import { getPosts } from "@/sanity/sanity-utils";
import BlogItem from "@/components/Blog";

export default async function Home() {
  const posts = await getPosts();

  return (
    <div className="py-5">
      {posts?.length > 0 ? (
        posts.map((post: any) => <BlogItem key={post._id} blog={post} />)
      ) : (
        <p>No posts found</p>
      )}
    </div>
  );
}

First import the getPosts function and BlogItem. Inside the Home component fetch the posts and render them.

We need a navbar to navigate between pages.

To save time I already created the Header file and loaded it inside the layout.tsx file.

Check out the source code and copy the Header component from there.

import Header from "@/components/Header";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  return (
    <>
      <Header />
      <main className="max-w-[1000px] mx-auto px-10 md:px-24">{children}</main>
    </>
  );
}

This is how it looks:

Single post

Now we need to create a single post page so that we can read the post.

Create the single post page inside blog/[slug]/page.tsx and paste this code snippet.

import React from "react";
import { getPostBySlug } from "@/sanity/sanity-utils";
import RenderBodyContent from "@/components/Blog/RenderBodyContent";

const SingleBlogPage = async ({ params }: { params: any }) => {
  const post = await getPostBySlug(params.slug);

  return (
    <article className="my-10">
      <div className="mb-5">
        <h1 className="text-3xl py-2">{post.title}</h1>
        <p className="pb-1">
          <span className="font-medium">Published:</span>
          {new Date(post.publishedAt).toDateString()}
          <span className="font-medium pl-2">by </span>
          {post.author.name}
        </p>

        <p>{post.metadata}</p>
      </div>

      <article className="prose lg:prose-xl">
        <RenderBodyContent post={post} />
      </article>
    </article>
  );
};

export default SingleBlogPage;

First import getPostBySlug and RenderBodyContent (we will create it in a while).

Fetch the post by slug and render the post with RenderBodyContent.

Render body content

It’s a custom component to render the post body.
Create RenderBodyContent.tsx file inside the components/Blog folder*.*

import config from "@/sanity/config/client-config";
import { Blog } from "@/types/blog";
import { PortableText } from "@portabletext/react";
import { getImageDimensions } from "@sanity/asset-utils";
import urlBuilder from "@sanity/image-url";
import Image from "next/image";

// lazy-loaded image component
const ImageComponent = ({ value, isInline }: any) => {
  const { width, height } = getImageDimensions(value);
  return (
    <div className="my-10 overflow-hidden rounded-[15px]">
      <Image
        src={
          urlBuilder(config)
            .image(value)
            .fit("max")
            .auto("format")
            .url() as string
        }
        width={width}
        height={height}
        alt={value.alt || "blog image"}
        loading="lazy"
        style={{
          display: isInline ? "inline-block" : "block",
          aspectRatio: width / height,
        }}
      />
    </div>
  );
};

const components = {
  types: {
    image: ImageComponent,
  },
};

const RenderBodyContent = ({ post }: { post: Blog }) => {
  return (
    <>
      <PortableText value={post?.body as any} components={components} />
    </>
  );
};

export default RenderBodyContent;

This component will handle special types differently. We are only handling Images here.

You can include code blocks, embeds, and many more. You can find more information on Sanity plugins on Sanity.

Here’s what it looks like.

To make the post look like this install the tailwind/typography plugin and load that inside the tailwind.config.ts file.

npm install @tailwindcss/typography

Webhook Integration

We will integrate Sanity webhook to fetch the data on time. Otherwise, you will have to deploy the site every time you write a post.

We already added revalidation on the fetch functions. Right now we need to generate the Keys and create the Webhook endpoint.

Generate the API key

Go to sanity.io/manage and navigate to API→Tokens then click on the Add API token button.

Give your API a name then choose Editor and save.

You will get an API key and save it on the env file

SANITY_API_KEY = "YOUR_API_KEY";

Create the Webhook endpoint

First, create the webhook endpoint app/api/revalidate/route.ts and add this code snippet.

import { revalidateTag } from "next/cache";
import { type NextRequest, NextResponse } from "next/server";
import { parseBody } from "next-sanity/webhook";

export async function POST(req: NextRequest) {
  try {
    const { body, isValidSignature } = await parseBody<{
      _type: string;
      slug?: string | undefined;
    }>(req, process.env.NEXT_PUBLIC_SANITY_HOOK_SECRET);

    if (!isValidSignature) {
      return new Response("Invalid Signature", { status: 401 });
    }

    if (!body?._type) {
      return new Response("Bad Request", { status: 400 });
    }

    revalidateTag(body._type);
    return NextResponse.json({
      status: 200,
      revalidated: true,
      now: Date.now(),
      body,
    });
  } catch (error: any) {
    console.error(error);
    return new Response(error.message, { status: 500 });
  }
}

We are using tag-based revalidation in this webhook.

This endpoint will be called by the webhook every time you create, delete, or update a document from Sanity Studio.

Generate the Webhook Secret

Navigate to sanity.io/manage API→Webhooks. Click on the Create Webhook button.

You will get a modal with a form. Fill in the form with the following pieces of information:

Name: Name of the Webhook

Description: Short description of what the webhook does (This is an optional field).

URL: Set the URL to https://YOUR_SITE_URL/api/revalidate

Dataset: Choose your desired dataset or leave the default value.

Trigger on: Set the hook to trigger on "Create", "Update", and "Delete".

Filter: Leave this field blank.

Projections: Set the projections to {_type, "slug": slug.current}
Status: Check the enable webhook box.

HTTP Method: POST.

Leave HTTP headers, API version, and Draft as default.

Secret: Give your webhook a unique secret and copy it.

Hit save to create your webhook.

Save your webhook in the .env file under this variable name.

SANITY_HOOK_SECRET=YOUR_SECRET

Testing the webhook: Go ahead and change the content of an Article and publish it. After that hard reload your website you should see the changes in real time.

Note: You can test webhook from the live site or you can choose tools like ngrok to expose the localhost URL and use that to test it.

Conclusion

That’s it you built a blog with Sanity CMS. Congrats! 🥳

Even though this guide looks so long, it’s just the beginning. Sanity has more features and options, you can build cool things.
It’s impossible to cover everything in a single article.

I will suggest you to checkout these resources to learn more and improve your blog

Connect With Me

I hope you enjoyed the post, if you want to stay conntected with me checkout my socials.
Would love to talk to you!

Twitter/x

Github

Happy Coding.

Internationalizing Next.js: A Comprehensive Guide to i18n Integration

Amrin — Sun, 07 Jul 2024 18:00:00 +0000

Internationalization (i18n) is a crucial feature for any modern web application that seeks to reach a global audience. It enables you to deliver content in various languages, making your application accessible and user-friendly to people from different linguistic backgrounds.

In today’s guide, you will learn how to integrate internationalization to a Next.js application using next-intl.

Let’s get started.

Prerequisite

To make the most out of this guide, here’s what you should have under your belt:

Understanding of Next.js app router and TypeScript.
Knowledge of how Next.js Middleware works.

Install Next.js

To integrate multi-language support you need a Next.js project.

Let’s create a brand new project with create-next-app.

npx create-next-app@latest

Run the above command and go with all the default options. You can choose the options according to your requirements.

Once you are done, you will have the Next.js project ready to integrate multi-language support.

Write the Translations

Before we proceed to configure next-intl we need the translation for the different languages.

We will keep all the translations in the messages folder. You can name it anything you want.

Translations are stored as JSON objects. We only have a title for this example.

Go ahead and add all your text and their corresponding translations in these files.

Configure next-intl

First, you have to install next-intl

Run this command to install the package:

npm install next-intl

Once done, create a new route named [locale] inside the app directory.

And move all the routes under [locale], we will use this to get the locale and show the text in that language.

Now that we have all set up, let’s configure next-intl.

#1: Create a config file on the root of your project's directory and name it: i18n.ts.

Paste this code snippet into that file:

import { notFound } from "next/navigation";
import { getRequestConfig } from "next-intl/server";

export const locales = ["en", "de", "fr"];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

In this code snippet, set up the locales for your project and validate the incoming locale parameter. If the locale is not on your list, redirect it to the not-found page. If it matches one of the locales, return the message for that locale.

#2: Create middleware.ts file on the root of your project.

Copy this code snippet over to your middleware

import createMiddleware from "next-intl/middleware";
import { locales } from "./i18n";

export default createMiddleware({
  // A list of all locales that are supported
  locales: locales,

  // Used when no locale matches
  defaultLocale: "en",
  // Removes the locale when it's default
  localePrefix: 'as-needed',
});

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/(de|en|fr)/:path*"],
};

Import the locales from the i18n config file you created earlier and the CreateMiddleware function from next-intl.

Inside the CreateMiddlware function, you can specify all the options you want to have.

Check out the next-intl documentation for more information.

Use the Translation

All the configurations are done.

Now, let’s see how to use the translation on a Client Component.

Client component

To use the translation on a Client Component, you must wrap your Layout with NextIntlClientProvider.

And pass the messages as props to use on the Client components.

import "./globals.css"
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import LangSwitcher from "@/components/LangSwitcher";

export default async function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          <LangSwitcher />
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Here is an example of using translation on a client component.

import { useTranslations } from "next-intl";

export default function Index() {
  const t = useTranslations("Index");

  return (
    <div className="container text-center my-5 mx-auto">
      <h1 className="text-3xl font-bold">{t("title")}</h1>
    </div>
  );
}

First, import the useTranslations hook from next-intl and ****then call it by the object name.
It will provide the associated translations.

You can add more translations like this:

{
  "Index": {
    "title": "Hallo Welt"
  },
  {
   "About": {
       "title": "About Us"
       ...
   }
  }
}

This way you can use the translations on a Client Component.

Let’s see how to use the translation on a Server Component.

Server component

For the server component, you don’t have to configure anything else.

Just import getTranslations and call it with the translation object key.

import React from "react";
import { getTranslations } from "next-intl/server";

const AboutPage = async () => {
  const t = await getTranslations("About");
  return (
    <div className="container text-center my-5 mx-auto">
      <h1 className="text-3xl font-bold">{t("title")}</h1>
    </div>
  );
};

export default AboutPage;

This is how you can use translations on a Server Component.

Now to test our translations let’s create a language switcher.

Language switcher

Create a file named LangSwitcher.tsx in the components folder.

And paste this code into that file.

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { locales } from "@/i18n";

const LangSwitcher = () => {
  const pathName = usePathname();

  const redirectedPathName = (locale: string) => {
    if (!pathName) return "/";
    const segments = pathName.split("/");
    segments[1] = locale;
    return segments.join("/");
  };

  return (
    <div className="flex space-x-10 justify-center my-5">
      {locales.map((locale) => (
        <Link
          key={locale}
          href={redirectedPathName(locale)}
          className="capitalize hover:underline hover:text-blue-500"
        >
          {locale}
        </Link>
      ))}
    </div>
  );
};

export default LangSwitcher;

This is the language switcher for your Next.js application. It dynamically generates links for each locale in the locales array, modifying the current path to reflect the selected locale.

When a user clicks on a locale link, they are redirected to the same page but in the chosen language.

Resources:

Documentations: https://next-intl-docs.vercel.app/docs/getting-started

Source code: https://github.com/Coderamrin/next14-i18n-integration

Conclusion

This article showed you how to integrate multi-language support into your Next.js projects.

If you followed this article step by step you should have i18n integrated on your Next.js project.

Comment below if you have any questions or suggestions.

Connect With Me

Twitter/x

Github

Happy Coding.

Next.js 14 and NextAuth v4 : Credentials Authentication A Detailed Step-by-Step Guide

Amrin — Sun, 30 Jun 2024 16:20:05 +0000

Authentication is a crucial feature in web applications, and it can also be challenging to implement correctly. In this article, you'll learn how to integrate authentication in Next.js using NextAuth (v4).

Let’s get started.

Prerequisites

To make the most out of this guide, here’s what you should have under your belt:

A basic understanding of HTML, CSS, and JavaScript.
Some familiarity with Next.js and TypeScript.
Experience using Tailwind CSS, even if it’s just the basics.
Node.js installed on your computer. If unsure, check by running node -v in your terminal!

Install Next.js

To get started you need a Next.js project. You can skip this part if you want to integrate NextAuth into your existing Next.js project.

Run this command to initialize a bare-bone next.js project.

npx create-next-app@latest

Follow the prompts and go with the default.

This will generate a Next.js project with all the necessary files/folders and dependencies.

After the installation cd into the project directory and run this command:

npm run dev

This will open your project on localhost:3000

Database Configuration

For authentication, you have to store the user data on a Database.

So, before configuring NextAuth configure the database.

In this guide, we will use Postgresql with Prisma.

Install all these dependencies for integrating NextAuth with a Database.

npm install prisma next-auth @next-auth/prisma-adapter bcrypt

Create the Database Schema

On the root of your project folder create the schema file prisma → schema.prisma

Now, copy this over to that file.

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  password      String?
  image         String?
  accounts      Account[]
  sessions      Session[]
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

model Account {
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?
  access_token      String?
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?
  session_state     String?

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@id([provider, providerAccountId])
}

model Session {
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model VerificationToken {
  identifier String
  token      String
  expires    DateTime

  @@id([identifier, token])
}

The first two blocks of code connect the database with Prisma.

So, we need the DATABASE_URL to make it work.

There are a lot of PostgreSQL providers available for example:

Neon
Supabase
Xata

After you generate the DATABASE_URL update the .env file

DATABASE_URL="YOUR_DATABASE_URL"

Migration commands

Now, run these commands to create the tables on the database.

npx prisma generate
npx prisma db push

Create the Prisma client

Now create the Prisma Client to perform all the database-related operations.

Inside the app directory create libs/prismaDB.ts file and paste this code.

import { PrismaClient } from "@prisma/client";

const globalForPrisma = global as unknown as { prisma: PrismaClient };

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient({
    log: ["query"],
  });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Now you can import prisma from anywhere on the project and use it to run the Database queries.

Configure NextAuth

Now we have to create the authOptions config.

Create the authOptions object inside the libs/auth.ts file ****and paste this code.

import { prisma } from "@/app/libs/prismaDB";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import bcrypt from "bcrypt";
import { NextAuthOptions } from "next-auth";

export const authOptions: NextAuthOptions = {
  pages: {
    signIn: "/auth/signin",
  },
  session: {
    strategy: "jwt",
  },
  adapter: PrismaAdapter(prisma),
  secret: process.env.SECRET,
  providers: [
    // the providers goes here
  ],

  // debug: process.env.NODE_ENV === "development",
};

In this code snippet, we imported the Prisma client, PrismaAdapter, and NextAuthOptions from next-auth.

And created authOptions object, which contains all the nextAuth-related configs.

Here’s the break-down:

pages: It defines the page for auth. Used for redirects and fallback.

session: Defines the session strategy. We will use JWT.

adapter: Defines the adapter to manage Database operations. We will use Prisma.

secret: A secret for the Session.

providers: An Array of all the providers. We will use the Credentials provider. ****

Configuring Credentials Provider

Now, let’s configure the Credentials provider.

Go to auth.ts file and import the Credentials provider from nextAuth

import CredentialsProvider from "next-auth/providers/credentials";

Now, add this code snippet inside the providers array:

CredentialsProvider({
      name: "credentials",
      id: "credentials"
      credentials: {
        email: { label: "Email", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
        username: {
          label: "Username",
          type: "text",
          placeholder: "John Smith",
        },
      },
      async authorize(credentials) {
        // check to see if email and password is there
        if (!credentials?.email || !credentials?.password) {
          throw new Error("Please enter an email and password");
        }

        // check to see if user exists
        const user = await prisma.user.findUnique({
          where: {
            email: credentials?.email,
          },
        });

        // if no user was found
        if (!user || !user?.hashedPassword) {
          throw new Error("No user found");
        }

        // check to see if password matches
        const passwordMatch = await bcrypt.compare(
          credentials.password,
          user.hashedPassword
        );

        // if password does not match
        if (!passwordMatch) {
          throw new Error("Incorrect password");
        }

        return user;
      },
    }),

Here’s the breakdown of the credentials config:

Name: The name of the credentials provider. If only one Credentials provider is used, it is specified in the signIn function.

Id: A unique identifier for the credentials provider. When you have more than one credentials provider, you must use this identifier in the signIn function instead of the name.

Credentials: Specify the values required for signing in.

Authorize: A callback function that uses the provided credentials to perform the authorization operations.

Configure User Registration

You need a registered user on the Database to be able signIn

Let’s set up user registrations.

Create the register route in api→auth→register→route.ts and paste this code.

import bcrypt from "bcrypt";
import { NextResponse } from "next/server";
import { prisma } from "@/app/libs/prismaDB";

export async function POST(request: any) {
  const body = await request.json();
  const { name, email, password } = body;

  if (!name || !email || !password) {
    return new NextResponse("Missing Fields", { status: 400 });
  }

  const exist = await prisma.user.findUnique({
    where: {
      email,
    },
  });

  if (exist) {
    throw new Error("Email already exists");
  }

  const hashedPassword = await bcrypt.hash(password, 10);

  const user = await prisma.user.create({
    data: {
      name,
      email,
      hashedPassword,
    },
  } as any);

  return NextResponse.json(user);
}

To register users, create a POST route that gets the user data from the request body.

Check if any required fields are missing; if they are, send an error message.

Next, fetch the user with the provided email. If the user already exists, return an error message and prompt them to log in or try a different email. If no user is found, create a new user with the provided credentials and return the user.

Sing Up Form

Let’s create the sign-up form to register User.

Create the Sign-Up route in app → auth → signup → page.tsx and paste this code.

"use client";
import Link from "next/link";
import React from "react";
import axios from "axios";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";

const Signup = () => {
  const router = useRouter();

  const [data, setData] = useState({
    name: "",
    email: "",
    password: "",
    rePassword: "",
  });

  const { name, email, password, rePassword } = data;

  const handleChange = (e: any) => {
    setData({ ...data, [e.target.name]: e.target.value });
  };

  const registerUser = async (e: any) => {
    e.preventDefault();

    if (!name || !email || !password) {
      return toast.error("Something went wrong!");
    }

    axios
      .post("/api/auth/register", {
        name,
        email,
        password,
      })
      .then(() => {
        toast.success("User has been registered.");
        router.push("/auth/signin");
        setData({
          name: "",
          email: "",
          password: "",
          rePassword: "",
        });
      })
      .catch(() => toast.error("Something went wrong"));
  };

  return (
    <form
      onSubmit={registerUser}
      className="w-[300px] mx-auto flex flex-col justify-center h-screen"
    >
      <h1 className="text-3xl font-bold mb-5">Sign Up</h1>
      <div className="mb-6">
        <label
          htmlFor="name"
          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
        >
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={data.name}
          onChange={handleChange}
          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          placeholder="jhon doe"
          required
        />
      </div>
      <div className="mb-6">
        <label
          htmlFor="email"
          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
        >
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          value={data.email}
          onChange={handleChange}
          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          placeholder="john.doe@company.com"
          required
        />
      </div>
      <div className="mb-6">
        <label
          htmlFor="password"
          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
        >
          Password
        </label>
        <input
          type="password"
          id="password"
          name="password"
          value={data.password}
          onChange={handleChange}
          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          placeholder="•••••••••"
          required
        />
      </div>
      <button
        type="submit"
        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      >
        Submit
      </button>

      <div className="mt-5">
        <p>
          Already have an account?{" "}
          <Link className="text-blue-700" href="/auth/signin">
            Signin
          </Link>{" "}
          or Go to{" "}
          <Link className="text-blue-700" href="/">
            Home
          </Link>
        </p>
      </div>
    </form>
  );
};

export default Signup;

It is a simple sign-up form. To keep it simple I put it right into the route. You can keep your sign-in, and sign-up form inside the components folder.

I’ve also used toast to show the message. Check out the Setup the Session Provider section to see how to configure toast notification.

Sign In Form

Lastly, we need this sign-in form.
Just like the sign-up route create the sign-in route and paste this code into it.

"use client";
import Link from "next/link";
import React, { useState } from "react";
import { signIn } from "next-auth/react";
import toast from "react-hot-toast";

const Signin = () => {
  const [data, setData] = useState({
    email: "",
    password: "",
  });

  const { email, password } = data;

  const handleChange = (e: any) => {
    setData({ ...data, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const result = await signIn("credentials", {
      redirect: false,
      email,
      password,
    });
    if (result?.ok) {
      toast.success("Logged in successfully");
      setData({
        email: "",
        password: "",
      });
      window.location.href = "/";
    } else {
      toast.error("Invalid credentials");
    }
  };

  return (
    <div className="w-[300px] mx-auto flex flex-col justify-center h-screen">
      <h1 className="text-3xl font-bold mb-5">Sign in</h1>

      <form onSubmit={handleSubmit}>
        <div className="mb-6">
          <label
            htmlFor="email"
            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={handleChange}
            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="john.doe@company.com"
            required
          />
        </div>
        <div className="mb-6">
          <label
            htmlFor="password"
            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >
            Password
          </label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={handleChange}
            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="•••••••••"
            required
          />
        </div>
        <button
          type="submit"
          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Submit
        </button>

        <div className="mt-5">
          <p>
            Don&#39;t have an account?{" "}
            <Link className="text-blue-700" href="/auth/signup">
              Signup
            </Link>{" "}
            or Go to{" "}
            <Link className="text-blue-700" href="/">
              Home
            </Link>
          </p>
        </div>
      </form>
    </div>
  );
};

export default Signin;

So, we have a simple sign-in form. We used state to store the form data.

And handled the form submission slightly differently, we didn’t call our auth/sign-in API instead we used the signIn function from NextAuth.

The sign function takes two arguments, first the name of the provider and then a callback function to check the response. (Just like our API)

Setup the Session provider

Lastly, you have to wrap the whole application with the SessionProvider.

The SessionProvider will allow you to use useSession on your application.

Inside the app directory create providers→index.tsx and paste this code into it.

"use client";
import { SessionProvider } from "next-auth/react";
import { Toaster } from "react-hot-toast";

const Proveiders = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <div className="z-[99999]">
        <Toaster position="top-center" reverseOrder={false} />
      </div>
      <SessionProvider>{children}</SessionProvider>
    </>
  );
};

export default Proveiders;

In this provider's file, you can add any of the providers you need to use, it will help you keep layout.tsx file clean.

At the top of the session provider, I added Toaster for the toast notification.

Don’t forget to install react-hot-toast to show the toast notification.

Now, import Providers inside the layout.tsx and wrap children inside it.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Proveiders from "./providers";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Proveiders>{children}</Proveiders>
      </body>
    </html>
  );
}

Getting the User Session in a Client Component

Now you can see the logged-in user’s data from the Session.

Here’s an example of how to get the session with useSession hook:

"use client";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { signOut } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();

  return (
    <main className="flex flex-col items-center justify-between p-24">
      {session?.user && (
        <div>
          <p className="text-3xl">Welcome, {session.user.name}</p>
          <div className="mb-5">{JSON.stringify(session?.user, null, 2)}</div>

          <button
            onClick={() => signOut()}
            className="bg-black hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
          >
            Logout
          </button>
        </div>
      )}

      {!session?.user && (
        <div className="mt-5 space-x-3">
          <Link
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            href="/auth/signin"
          >
            Signin
          </Link>

          <Link
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            href="/auth/signup"
          >
            Signup
          </Link>
        </div>
      )}
    </main>
  );
}

Retrieve the user session using the useSession hook and render the user data. If the session is empty, the user is not logged in. Ask the user to sign in or sign up to view the session.

Getting the User Session in a Server Component

Getting a user session on a Server component is a bit different than a Client component because you can’t use useSession hook on a server component.

Here’s how you can get the logged-in user session on the Server component.

import React from "react";
import { authOptions } from "../libs/auth";
import { getServerSession } from "next-auth";
import Link from "next/link";

const UserPage = async () => {
  const session = await getServerSession(authOptions);
  return (
    <main className="flex flex-col items-center justify-between p-24">
      {session?.user && (
        <div>
          <p className="text-3xl">Welcome, {session.user.name}</p>
          <div className="mb-5">{JSON.stringify(session?.user, null, 2)}</div>
          <Link href="/">Go back to home</Link>
        </div>
      )}

      {!session?.user && (
        <div className="mt-5 space-x-3">
          <Link
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            href="/auth/signin"
          >
            Signin
          </Link>

          <Link
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            href="/auth/signup"
          >
            Signup
          </Link>
        </div>
      )}
    </main>
  );
};

export default UserPage;

First, import authOptions from auth.ts file and import getServerSession from next-auth

Inside the component call the getServerSession function with authOptions.

It will return the current user session.

You have the user session on the Server Component.

Congrats!

You successfully integrated Authentication on your Next.js App.

Resources

Source code: https://github.com/Coderamrin/nextauth-integration-v4/tree/credentials-signin
Documentation: https://authjs.dev/getting-started/authentication/credentials

Conclusion

In this article, you learned how to integrate NextAuth in the Next.js 14 app. We covered the Credentials provider only, In the next part we will cover Social login and Magic link.

Follow me to get notified when the next part is published.

Connect With Me

Twitter/x

Github

Happy Coding.

How content creation helped me land my first tech job?

Amrin — Sun, 23 Jun 2024 01:54:58 +0000

Getting the first job is the hardest. It is also frustrating when you apply for countless jobs but don't hear back.

Even if you get a call back you have to face countless meetings and assessments.

But, it doesn’t have to be that way.

Nowadays, you can build your presence on social media. It shows what you are capable of doing.

That way instead of you applying for the job, the job will find you!

In this article, I will share my story of how I managed to land my first job by creating content.

So, let’s get started.

The Beginning

In the beginning, I started with the traditional approach. Applying to hundreds of jobs and never getting a callback.

Even If I got a few callbacks, I would get an assessment, and after I submitted they would never call (Skill issues 🤣🤣)

So, I was going nowhere. Then I decided not to apply and do the assessment for free. I started to create videos on YouTube and write articles (I had free time I could do all).

Then I would share my videos and articles on Twitter.

While doing all these I was taking freelance projects here and there.

The Big day

As I focused on creating and sharing content, something unexpected happened. I received a call from a potential employer, who found my work online.

Initially, I thought it was a friend, but it turned out to be a job opportunity.

They asked me to create a video for their product.

After creating a video for their product, they offered me a position as a Support Engineer. I started part-time, handling client queries and updating documentation.

Two months later, I transitioned to a front-end developer role in the same company.

Creating Content

Now, you might be wondering what type of content to create. It doesn't have to be complicated.

If you love being in front of a camera you can create videos, if you don’t like that you can start a blog.

If blogging sounds too much effort start by tweeting.

Once you choose the platform your question might be what should I write/create videos about?

Here are a few ideas to get you started:

Build projects and write about them.
Write about the problem you solved.
Share what you learn every day.
Write about a book you read.
Share your take on a new tech.

The ideas are endless. You just have to start.

Once you start creating content you will get endless ideas.

Don’t forget to share your content on Twitter or any other social media you are active on.

Conclusion

If you are applying for jobs and going nowhere, then try this approach.

Improve your skills and create content. Your content doesn’t have to be perfect. You have to start. Day by day you will get good at it.

Start today and share your content in the comment section, even if it’s just a tweet or a simple article.

Connect With Me

Twitter/x
Github
LinkedIn

Happy Coding.

Tailwind CSS for Beginners: Build a Social Link Project

Amrin — Tue, 16 May 2023 16:18:39 +0000

Hello everyone, welcome to the Tailwind for Beginners Tutorial. In this tutorial, we will go over the fundamentals of Tailwind CSS and we build a social link project.

So, let’s get started.

If you prefer video, check it out here:

What is Tailwind?

Tailwind CSS is a utility-first CSS library. It offers tousands for utility classes. You can build anything using these classes without leaving the Markup.

Tailwind offers all types of styles as utility classes. For example, flex, grid, margin, padding, colors and all the css property you can think of.

Now that you know that what Tailwind Css is, let’s explore how you can use it.

Tailwind Basics: How does it work?

As we said before Tailwind CSS offers all types of styles as utility classes.

Here’s a quick explanation of how it works and how to use it.

The Text Styles

You can style the text with Tailwind CSS classes, you can increase the font sizes, change the colors, change the font weight, and all the styles you can add with vanilla CSS.

Here’s a quick example of a text styled with Tailwind CSS

<h1 class="text-3xl font-bold">Thomas</h1>

This text has a font size of 1.8rem and a font weight of bold.

Adding Spacing

It’s very easy to add spacing with Tailwind CSS. You can add margin, padding and border with Tailwind.

For padding you have to use the p class, after that, you have to prefix the side you want to add the padding to.

Here’s an example

<div class="pr-5"> Test </div>

This div has a padding-right of 5, this way you can add padding or margin to all the sides.

You can learn more on Tailwind CSS docs.

Now that you got an idea of how Tailwind CSS works let’s move on and build a simple social link project.

Build a Social Link Project

We are going to build a simple social link project. In the end it’ll look like this:

It’s a simple project that includes all the social links and a short description of a developer. 😊

To get started, first of all we will have to setup a Tailwind CSS project with HTML.

You can follow this tutorial to setup a Tailwind CSS project.

So, the project setup is done. Now we are going to start building the project.

We’ll start out by writing the HTML.

The Html

The HTML here includes Fontawesome CDN link and the compiled stylesheet we got after running the build command.

After that, we got the Card Header which includes an avatar and a short description of the person.

And after that we got all the social links. The social links has an icon and a name.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social Links</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./dist/output.css" />
  </head>
  <body>
    <div class="">
      <div class="card">
        <div class="card-header">
          <img
            src="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/279.jpg"
            alt=""
            class=""
          />
          <h1 class="">Thomas</h1>
          <p>Frontend Developer</p>
        </div>
        <div class="card-links">
          <div class="card-item">
            <p class="name">Github</p>
            <div class="icon">
              <i class="fa-brands fa-github"></i>
            </div>
          </div>
          <div class="card-item">
            <p class="name">Twitter</p>
            <div class="icon">
              <i class="fa-brands fa-twitter"></i>
            </div>
          </div>
          <div class="card-item">
            <p class="name">Facebook</p>
            <div class="icon">
              <i class="fa-brands fa-facebook-f"></i>
            </div>
          </div>
          <div class="card-item">
            <p class="name">YouTube</p>
            <div class="icon">
              <i class="fa-brands fa-youtube"></i>
            </div>
          </div>
          <div class="card-item">
            <p class="name">Email</p>
            <div class="icon">
              <i class="fa-regular fa-envelope"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

So the markup is done, let’s go ahead and add the stylings.

The Styles

We will start out by adding the background color to the body. Which we will add using the Tailwind CSS @apply directive.

Add this to your styles.css file.

body {
    @apply bg-gradient-to-r from-cyan-500 to-blue-500; 
}

After adding the background color we’ll center the card horizontally and vertically. And then we style the card header.

<div class="flex justify-center items-center h-screen">
    <div class="card bg-white p-10 rounded-lg w-[30%]">
       <div class="card-header text-center pb-5">
         <img
            src="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/279.jpg"
            alt="image avatar"
            class="rounded-full m-auto"/>
         <h1 class="text-3xl font-bold ">Thomas</h1>
         <p>Frontend Developer</p>
     </div>
</div>

Here we styled the card links. It’s not some fancy design, we just added flex box to take them on the same line and added some padding and background color to make it look cool.

<div class="flex justify-center items-center h-screen">
        ............

         <div class="card-links">
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Github</p>
            <div class="icon">
              <i class="fa-brands fa-github"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Twitter</p>
            <div class="icon">
              <i class="fa-brands fa-twitter"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Facebook</p>
            <div class="icon">
              <i class="fa-brands fa-facebook-f"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">YouTube</p>
            <div class="icon">
              <i class="fa-brands fa-youtube"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Email</p>
            <div class="icon">
              <i class="fa-regular fa-envelope"></i>
            </div>
          </div>
        </div>
      </div>
</div>

Here’s all the code at once.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social Links</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./dist/output.css" />
  </head>
  <body>
    <div class="flex justify-center items-center h-screen">
      <div class="card bg-white p-10 rounded-lg w-[30%]">
        <div class="card-header text-center pb-5">
          <img
            src="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/279.jpg"
            alt=""
            class="rounded-full m-auto"
          />
          <h1 class="text-3xl font-bold ">Thomas</h1>
          <p>Frontend Developer</p>
        </div>
        <div class="card-links">
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Github</p>
            <div class="icon">
              <i class="fa-brands fa-github"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Twitter</p>
            <div class="icon">
              <i class="fa-brands fa-twitter"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Facebook</p>
            <div class="icon">
              <i class="fa-brands fa-facebook-f"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">YouTube</p>
            <div class="icon">
              <i class="fa-brands fa-youtube"></i>
            </div>
          </div>
          <div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
            <p class="name">Email</p>
            <div class="icon">
              <i class="fa-regular fa-envelope"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

This is it we got a beautifully styled Social Link Project. Now you can use it to show all your social link at once.

Conclusion

In this article, we covered the fundamentals of Tailwind CSS and built a simple project with Tailwind.

Hope it was helpful.
If you want to read Tailwind CSS-related tutorials and articles make sure to follow me.

Twitter: https://twitter.com/CoderAmrin

YouTube: https://www.youtube.com/@coderamrin

Github: https://github.com/Coderamrin

Until next time happy coding.

Responsive Navbar with Tailwind CSS: Step-by-Step Tutorial

Amrin — Wed, 03 May 2023 15:27:49 +0000

Hello everyone today we are going to build a navbar with tailwind css. It’s a responsive animated navbar.
You can use it with your web projects.

so, let’s get started.

If you prefer video, you can watch it here

Pre Requieste:

To follow along you don’t have to be an expert at anything. All you have to know is the fundamentals.

The fundamentals of HTML & CSS
The fundamentals of JavaScript.
And some Tailwind CSS

Install Tailwind CSS

Before we start coding first we need to set up a Tailwind CSS project. You can set up a Tailwind CSS project by following the documentation.

Go ahead and set up a Tailwind CSS project.

Starter HTML

Here is the starter HTML code for the project. It has the output.css file linked and Font Awesome CDN linked.

And at the end we linked the Script.js file. Which will have the JavaScript we need for the toggler.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link href="./dist/output.css" rel="stylesheet" />
  </head>
  <body>

    <script src="./script.js"></script>
  </body>
</html>

Go ahead and copy it to your Index.html file.

The Navbar

The navbar is wrapped inside a header tag. And inside the header we got logo, navbar and the mobile toggler button.

We’ve used flexbox on the header to get everything on the same line. And justify-content to move them to the end.

On the mobile we used the right-[-50%] class to hide the navbar. And we used javascript to remove it and added the right-0 class when the user click on the toggler button.

<header class="header flex justify-between px-5 py-2 font-serif">
      <a href="/" class="logo text-4xl text-blue-500 font-bold">Studio</a>

      <nav
        class="nav absolute flex flex-col shadow-md w-[50%] h-full right-0 bg-white px-4 md:static md:h-auto md:w-auto md:flex-row md:shadow-none duration-500"
      >
        <button
          class="close-nav relative top-0 right-0 text-right text-3xl md:hidden"
        >
          <i class="fa-solid fa-xmark"></i>
        </button>

        <a
          href="#"
          class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400 text-blue-400 font-bold"
          >Home</a
        >
        <a href="#" class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400"
          >About</a
        >
        <a href="#" class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400"
          >Services</a
        >
        <a href="#" class="nav-link text-2xl mb-2 md:mr-4 hover:text-blue-400"
          >Contact</a
        >
      </nav>

      <button class="show-nav text-3xl cursor-pointer">
        <i class="fa-solid fa-bars"></i>
      </button>
    </header>

The JavaScript

So, in our HTML we two Buttons, one is the ShowNav Other on is the CloseNav. Here we are getting the buttons using querySelector.

And after that we’ve added the event listener.

const showNav = document.querySelector(".show-nav");
const closeNav = document.querySelector(".close-nav");
const nav = document.querySelector(".nav");

closeNav.addEventListener("click", () => {
  nav.classList.remove("right-0");
  nav.classList.add("right-[-50%]");
});

showNav.addEventListener("click", () => {
  nav.classList.remove("right-[-50%]");
  nav.classList.add("right-0");
});

Conclusion

In this article we created a responsive navbar with tailwind css. It’s a responsive navbar, you can use it with your web projects.

Hope you liked the article if you want to read more articles like this follow me.
You can find me here:

Twitter: https://twitter.com/coderamrin

YouTube: https://www.youtube.com/@coderamrin

Thanks for reading. Untill next time Happy Coding.

How to build a Portfolio website with HTML, CSS & JavaScript

Amrin — Fri, 07 Apr 2023 10:28:34 +0000

Hello everyone, today we are going to build a portfolio website with HTML, CSS & JavaScript.

We will not use any other library or framework, just vanilla CSS & JavaScript.

So, let’s get started.

If you prefer video content then check this one out.:

Prerequisite:

To follow along you don’t need to be a pro at anything, all you need is the fundamentals:

The fundamentals of Html & CSS
The fundamentals of JavaScript.

Setup:

Before we start we’ll have to set up the project. For the setup, you won’t have to do much.

Just create these files:

Index.html
Styles.css
Script.js

and then include this code snippet in the Index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

        <script src="./script.js"></script>
  </body>
</html>

Then add this to the styles.css file:

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --primary: #03011c;
  --secondery: #1c1847;
  --accent: #0cb8c2;
  --text: #fff;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--primary);
  font-family: Poppins, sans-serif;
}

a {
  text-decoration: none;
  color: var(--text);
}

img {
  width: 100%;
}

Also include the utility classes too:

/* utility classes */
.container {
  padding: 4rem 2rem;
  color: var(--text);
}

.highlighted {
  color: var(--accent);
}

.hidden {
  display: none;
}

.btn {
  background-color: var(--accent);
  color: var(--text);
  padding: 0.5rem 3rem;
  border-radius: 5rem;
  display: inline-block;
  margin-top: 2rem;
  border: 2px solid var(--accent);
}

.btn:hover {
  background-color: transparent;
  color: var(--accent);
}

So, the setup is done!
Let’s start building.

The Sections:

Before we start let’s look at how I structured the project.

Our portfolio website has 5 sections.

Home
About
Services
Projects and
Contact

1. Home:

This section includes the header and the hero section.

Let’s build the header first.

Header HTML:

The header consists of the logo, nav links, and mobile menu toggler.

    <header>
      <nav class="nav">
        <a href="/" class="logo"> <span class="highlighted"> O</span>liver</a>

        <div class="nav-links">
          <a href="#home" class="nav-item nav-item-active">Home</a>
          <a href="#about" class="nav-item">About</a>
          <a href="#services" class="nav-item">Services</a>
          <a href="#projects" class="nav-item">projects</a>
          <a href="#contact" class="nav-item">contact</a>
        </div>

        <div class="toggler">
          <span class="line"></span><span class="line"></span
          ><span class="line"></span>
        </div>
      </nav>
    </header>

One quick note before we move on to CSS. We are going to follow the mobile-first approach here, we will at the desktop design at the end.

Header CSS:

/* Header style */
.nav {
  background-color: var(--secondery);
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  position: fixed;
  width: 100%;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
}

.nav-links {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 50px;
  background-color: var(--secondery);
  width: 100%;
  left: -200%;
  padding: 1rem;
  transition: left 0.5s ease;
}

.nav-active {
  left: 0;
}

.nav-item {
  font-size: 0.8rem;
  opacity: 0.7;
  display: block;
  text-align: center;
  margin-bottom: 1rem;
  text-transform: capitalize;
  position: relative;
}

.nav-item::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgb(56, 56, 56);
  margin-top: 0.5rem;
}

.nav-item:hover {
  opacity: 1;
}

.nav-item-active::after {
  background-color: var(--accent);
  opacity: 1;
}

.toggler .line {
  width: 30px;
  height: 2px;
  display: block;
  background-color: var(--text);
  margin: 5px;
}

Header JavaScript:

We have to add the javascript to make the toggler and the nav-item’s active state work.
Here’s the code, add it to the script.js file.

const toggler = document.querySelector(".toggler");
const navLinks = document.querySelector(".nav-links");
const navItems = document.querySelectorAll(".nav-item");

// show and hide navbar in mobile
toggler.addEventListener("click", () => {
  navLinks.classList.toggle("nav-active");
});

// add active class on click to nav-items
navItems.forEach((item) => {
  item.addEventListener("click", function () {
    navItems.forEach((i) => i.classList.remove("nav-item-active"));
    this.classList.add("nav-item-active");

    navLinks.classList.toggle("nav-active");
  });
});

That’s the section. Let’s add the hero section.

Hero HTML

<section class="hero container" id="home">
       <div class="hero-info">
        <h1 class="title">Oliver <span class="highlighted">Queen</span></h1>
        <p class="hero-description">Web developer based in Starling City.</p>
        <a href="#services" class="btn hero-btn">Services</a>
      </div>

      <div class="hero-img">
        <img src="./images/hero-img.png" alt="Oliver Queen" />
      </div>
 </section>

Hero CSS:

/* Hero styles */
.hero {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  color: var(--text);
}

.hero-img {
  padding-top: 2rem;
}

.hero-info {
  text-align: center;
  padding-top: 3rem;
}

.title {
  font-size: 2.5rem;
}

.hero-description {
  opacity: 0.7;
}

2. About

Here is the HTML of About section:

<section class="about container" id="about">
      <div class="about-img">
        <img src="./images/about-img.png" alt="Oliver Queen" />
      </div>

      <div class="about-info">
        <h2 class="secondery-title">About Me</h2>

        <p class="description">
          Dolorem facere perspiciatis voluptatibus qui placeat ut eum est autem.
          Deleniti eius repellendus dolorum id illo. Quasi autem dolorem est eos
          autem magni. Tempore consequuntur ullam enim molestias fugit
          voluptatibus sed sit aut.
        </p>

        <p class="description">
          Ex veritatis vitae nam autem sint natus odio perspiciatis autem.
          Dolorem quos dicta culpa quod dolores vel sunt eligendi iste.
          Voluptate ut voluptatum beatae sint ut saepe impedit tempora id. Eaque
          tempore cum officia porro consequatur. Quis eos nostrum eos a commodi.
        </p>

        <p class="description">
          Officiis dolores asperiores inventore ut est delectus. Vel voluptatem
          quae omnis sunt nihil et iste consectetur. Sint rerum totam optio
          tempora et doloremque id.
        </p>

        <a href="#" class="btn btn-secondery">More</a>
      </div>
    </section>

About CSS:

/* About style */
.about {
  color: var(--text);
}

.about-info {
  padding-top: 2rem;
}

.description {
  opacity: 0.7;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.secondery-title {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.secondery-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.5rem;
  background-color: var(--accent);
}

3. Services

Services Html

<div class="services container" id="services">
      <div class="services-header">
        <h2 class="secondery-title">Services</h2>
      </div>

      <div class="grid services-grid">
        <div class="grid-item services-item">
          <i class="fa-solid fa-computer"></i>
          <h3>Webdesite Design</h3>
          <p class="description">
            Qui sunt id nemo voluptatem. Cum veritatis reiciendis rem dolores at
            unde harum sit omnis.
          </p>
        </div>
        <div class="grid-item services-item">
          <i class="fa-solid fa-meteor"></i>

          <h3>SEO & Marketing</h3>
          <p class="description">
            Dolores minus suscipit rerum neque. Et vitae rerum et ratione.
            Nesciunt ut dolores neque.
          </p>
        </div>
        <div class="grid-item services-item">
          <i class="fa-solid fa-pen-nib"></i>
          <h3>UI/UX Design</h3>
          <p class="description">
            Architecto et aliquid totam quam sit quibusdam ipsam. Dolorem
            dolores fuga rerum quidem. A odio et qui quia harum.
          </p>
        </div>
      </div>
    </div>

Services section CSS:

/* Services styles */
.services-item {
  background: var(--secondery);
  border-radius: 10px;
  text-align: center;
  padding: 2rem 1rem;
  margin-bottom: 1.5rem;
}

.services-item i {
  font-size: 4rem;
  color: var(--accent);
  margin-bottom: 2rem;
}

4. Projects

Projects Section Html:

<section class="projects container" id="projects">
      <div class="projects-header">
        <h2 class="secondery-title">Projects</h2>

        <div class="projects-tab">
          <button class="projects-tab-btn projects-tab-btn-active" id="all">
            All
          </button>
          <button class="projects-tab-btn" id="design">Design</button>
          <button class="projects-tab-btn" id="seo">SEO</button>
          <button class="projects-tab-btn" id="ui-ux">UI/UX</button>
        </div>
      </div>

      <div class="grid projects-grid">
        <div class="grid-item projects-item all design">
          <img src="./images/project-1.png " alt="" />
        </div>
        <div class="grid-item projects-item all design">
          <img src="./images/project-2.png" alt="" />
        </div>
        <div class="grid-item projects-item all seo">
          <img src="./images/project-3.png" alt="" />
        </div>
        <div class="grid-item projects-item all seo">
          <img src="./images/project-4.png" alt="" />
        </div>
        <div class="grid-item projects-item all ui-ux">
          <img src="./images/project-5.png" alt="" />
        </div>
        <div class="grid-item projects-item all ui-ux">
          <img src="./images/project-6.png" alt="" />
        </div>
      </div>
    </section>

Projects Section CSS:

/* Projects styles */
.projects-header {
  padding-bottom: 2rem;
}

.projects-tab-btn {
  background-color: transparent;
  border: 2px solid var(--accent);
  color: var(--text);
  padding: 0.3rem 1.5rem;
  border-radius: 5rem; 
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.projects-tab-btn-active {
  background-color: var(--accent);
}

.projects-item {
  margin-bottom: 1rem;
}

.projects-item img {
  border-radius: 10px;
}

Project section JavaScript

const projectsTabBtns = document.querySelectorAll(".projects-tab-btn");
const projectsItems = document.querySelectorAll(".projects-item");

// filter projects
projectsTabBtns.forEach((btn) => {
  btn.addEventListener("click", function () {
    projectsTabBtns.forEach((btn) =>
      btn.classList.remove("projects-tab-btn-active")
    );

    this.classList.add("projects-tab-btn-active");

    projectsItems.forEach((item) => {
      if (item.classList.contains(btn.id)) {
        item.classList.remove("hidden");
      } else {
        item.classList.add("hidden");
      }
    });
  });
});

5. Contact

Contact section HTML:

<section class="container contact" id="contact">
      <div class="contact-info">
        <h2 class="secondery-title">Contact</h2>
        <div class="info-container">
          <div class="contact-info-item">
            <div class="contact-info-icon">
              <i class="fa-solid fa-location-dot"></i>
            </div>
            <div class="contact-info-data">
              <h3>Address</h3>
              <p>Alec Brook 243</p>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">
              <i class="fa-solid fa-envelope"></i>
            </div>
            <div class="contact-info-data">
              <h3>Email</h3>
              <p>Oliver@gmail.com</p>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">
              <i class="fa-solid fa-phone-volume"></i>
            </div>
            <div class="contact-info-data">
              <h3>Phone</h3>
              <p>333-423-889</p>
            </div>
          </div>
        </div>
      </div>
      <div class="contact-form">
        <form>
          <input type="text" placeholder="Name" />
          <input type="text" placeholder="Email" />
          <textarea
            name="message"
            id=""
            cols="30"
            rows="10"
            placeholder="Message"
          ></textarea>
          <button class="btn submit-btn">Send Message</button>
        </form>
      </div>
    </section>

        <footer class="footer">
      <p>&copy; 2023 Oliver Queen All Right Reserved</p>
    </footer>

Contact section CSS:

/* contact styles */
.contact-info-item {
  display: flex;
}

.contact-info-icon {
  width: 50px;
  height: 50px;
  background-color: var(--accent);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  margin-bottom: 1rem;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

input,
textarea {
  background: var(--secondery);
  border: none;
  border-radius: 10px;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
}

.footer {
  color: var(--text);
  text-align: center;
  padding: 2rem 0;
}

This is the mobile design.
Now we will add the desktop design inside the media query.

/* Desktop Design */
@media screen and (min-width: 700px) {
  .container {
    padding: 4rem 6rem;
  }

  .description {
    font-size: 1rem;
  }

  /* grid */
  .grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .grid-item {
    width: 30%;
  }

  /* nav */
  .nav {
    padding-left: 6rem;
    padding-right: 6rem;
    justify-content: space-between;
    align-items: center;
  }

  .toggler {
    display: none;
  }

  .nav-links {
    position: static;
    flex-direction: row;
    padding: 0;
    width: auto;
  }

  .nav-item {
    margin: 0 0.5rem;
  }

  .nav-item::after {
    position: absolute;
    top: 30px;
    margin: 0;
    background: none;
  }

  .nav-item-active {
    opacity: 1;
  }

  .nav-item-active::after {
    background: var(--accent);
  }

  /* hero */
  .hero {
    flex-direction: row;
    justify-content: space-between;
  }

  .hero-info {
    text-align: left;
  }

  .title {
    font-size: 5rem;
  }

  /* About */
  .about {
    display: flex;
    justify-content: space-between;
  }

  .about-img {
    width: 40%;
  }

  .about-info {
    width: 55%;
  }

  /* contact */
  .contact {
    display: flex;
    justify-content: space-between;
  }

  .contact-form {
    width: 55%;
  }

  .submit-btn {
    font-size: 1.5rem;
  }
}

That’s it, you got a complete portfolio website built with HTML, CSS, and JavaScript.

If you want to see more tutorials like this follow me:

Twitter: https://twitter.com/coderamrin

YouTube: https://www.youtube.com/@coderamrin

Build a Complete Website from Scratch with Tailwind & TailGrids

Amrin — Fri, 31 Mar 2023 09:52:10 +0000

Hello everyone, today we are going to build a complete website with Tailwind CSS and + Tailgrids.
TailGrids is a Tailwind CSS component library which makes the process of building websites super fast and easy.

Today we are going to build a website from scratch using Tailwind & TailGrids.
So, let’s get started.

If you prefer video content, check this out

#1: Setup a Tailwind Project

1: Install tailwind and create init file

To build a project with Tailwind, you must first install it and crate tailwind css config file. Run the following commands to install:

npm install -D tailwindcss
npx tailwindcss init

2: Configure your template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3: Add the Tailwind directives to your CSS

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

4: Start the Tailwind CLI build process

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

The build command is too long. So, for simplicity let’s add it to package.json file as a script.

"dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"

Now, whenever you want to start the project just run:

npm run dev

It’ll start the build command easily.

5: Include the output.css file in html

Create an Index.html file in the dist. Then include the output.css file to it.

Note: you name anything you like it doesn’t have to be output.css

#2: Setup TailGrids

So, we got Tailwind setup done. Now, we need to get TailGrids.
To get the access to TailGrids All you have to do is purchage the Library. It has three plans, go ahead and get the one you need.

#3: Build the website

All the setup is done!
Now, let’s build the site. To build the site all you have to do is, go to TailGrids site and go to components tab. And then choos the components you like to add to your website.

Copy the code and then customize the contents and the images.

That’s it that’s how you can build a website super fast using Tailwind CSS and TailGrids.

Here’s a site I built from scratch using Tailwind CSS and TailGrids.

Link:

Conclusion

In this article I showed you how to build a website from scratch using Tailwind Css and TailGrids.

Hope you enjoyed this short article. If you want to see more articles or tutorials like this follow me.

YouTube: coderamrin

Twitter: https://twitter.com/CoderAmrin

How to build a Drum Kit with javascript

Amrin — Mon, 13 Mar 2023 16:43:20 +0000

Hello everyone, today we are going to build a Drum Kit with JavaScript.

Let’s get started.

Prereq:
To build the project you must have the knowledge of:

Css Fundamentals
JavaScript fundamentals

If you prefer video, check it out here:

What you’ll learn

At the end of this project, you’ll learn how to work with JavaScript DOM Keyboard events. And How to work with HTML5 Audio elements.
You’ll also learn how to use Flexbox to center divs 🙂

Step#1: Setup

Download the starter files from here, and download the audio from here.

Create a project folder and copy over all the files from the starter and audio. And open it up in your code editor.

Now that we have the files ready, let’s write the markup.

Step#2: Html

In HTML we have three parts, Header, Screen, and Keyboard.

Let’s write them down.

<div class="container">
   <h1>Keyboard</h1>
   <div class="screen"></div>
   <div class="keyboard">
   </div>
</div>

This is the base markup. Let’s add the keyboard keys.

            <div class="keyboard">
        <div class="row">
          <div class="key" id="q">
            q
            <audio src="./sound/1.wav"></audio>
          </div>
          <div class="key" id="w">w <audio src="./sound/2.wav"></audio></div>
          <div class="key" id="e">e <audio src="./sound/3.wav"></audio></div>
          <div class="key" id="r">r <audio src="./sound/4.wav"></audio></div>
          <div class="key" id="t">t <audio src="./sound/6.wav"></audio></div>
          <div class="key" id="y">y <audio src="./sound/6.wav"></audio></div>
          <div class="key" id="u">u <audio src="./sound/7.wav"></audio></div>
          <div class="key" id="i">i <audio src="./sound/8.wav"></audio></div>
          <div class="key" id="o">o <audio src="./sound/9.wav"></audio></div>
          <div class="key" id="p">p <audio src="./sound/10.wav"></audio></div>
        </div>
        <div class="row">
          <div class="key" id="a">a <audio src="./sound/11.wav"></audio></div>
          <div class="key" id="s">s <audio src="./sound/12.wav"></audio></div>
          <div class="key" id="d">d <audio src="./sound/13.wav"></audio></div>
          <div class="key" id="f">f <audio src="./sound/14.wav"></audio></div>
          <div class="key" id="g">g <audio src="./sound/15.wav"></audio></div>
          <div class="key" id="h">h <audio src="./sound/16.wav"></audio></div>
          <div class="key" id="j">j <audio src="./sound/17.wav"></audio></div>
          <div class="key" id="k">k <audio src="./sound/18.wav"></audio></div>
          <div class="key" id="l">l <audio src="./sound/19.wav"></audio></div>
        </div>
        <div class="row">
          <div class="key" id="z">z <audio src="./sound/20.wav"></audio></div>
          <div class="key" id="x">x <audio src="./sound/21.wav"></audio></div>
          <div class="key" id="c">c <audio src="./sound/22.wav"></audio></div>
          <div class="key" id="v">v <audio src="./sound/23.wav"></audio></div>
          <div class="key" id="b">b <audio src="./sound/24.wav"></audio></div>
          <div class="key" id="n">n <audio src="./sound/25.wav"></audio></div>
          <div class="key" id="m">m <audio src="./sound/26.wav"></audio></div>
        </div>
        <div class="space">Space</div>
      </div>

These are all the markups we will need.

Let’s move on to add the stylings.

Step#3: CSS

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: 2rem 0;
}

.screen {
  width: 65%;
  height: 150px;
  background-color: lightgray;
  border-radius: 5px;
  margin: 1rem 0;
  padding: 1rem;
}

.keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
}

.key,
.space {
  background-color: black;
  border: 4px solid black;
  width: 70px;
  height: 60px;
  color: white;
  margin: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.key:hover,
.space:hover {
  border-color: orange;
}

.space {
    width: 60%;
}

We started out by adding the reset styles. Then centered everything horizontally and vertically with a flexbox.

And at the end, we styled the keyboard and screen.

Step#4: JavaScript

const screen = document.querySelector(".screen");

window.addEventListener("keydown", (e) => {
  const key = document.getElementById(e.key);

  if (e.key === " ") {
    screen.textContent = screen.textContent + e.key;
  }

  if (!key) {
    return;
  }

  key.children[0].play();
  screen.textContent = screen.textContent + e.key;
});

The JavaScript is simple. First, we got the screen. And then, we added a key-down event on the window object.

So, when any of the keys are clicked we get the button associated with the key. And then add the text to the screen and play the audio of the button.

That’s it.

We got a musical keyboard built with JavaScript.

Conclusion:

In this article, we’ve built a musical keyboard with Html, CSS, and JavaScript.

Hope you enjoyed the article.
If you want more articles like these, don’t forget to follow me and like the post.

Twitter: https://twitter.com/CoderAmrin