DEV Community: Enodi Audu

How to Build an E-commerce Store with Sanity and Next.js

Enodi Audu — Tue, 16 Jul 2024 11:01:24 +0000

Building an e-commerce store can be daunting, especially when dealing with loads of data that don’t change often but still need to be readily available and up-to-date.

That's where tools like Sanity and Next.js come in handy. Sanity is a powerful headless CMS that allows you to manage your content effortlessly, while Next.js is a React framework that makes it easy to create fast, dynamic web applications. Together, they offer a robust solution for building and maintaining an e-commerce store efficiently.

In this article, we’ll walk through the step-by-step process of setting up an e-commerce store using Sanity and Next.js. We’ll cover everything from configuring your backend in Sanity to creating a responsive frontend with Next.js. By the end, you'll have a solid foundation for building scalable and maintainable online stores with ease.

Here is a screenshot of what the e-commerce store will look like. You can also check out the live app here. You can also review the code here

Table of Contents

Step 1: Install Nextjs
Step 2: Setup Chakra UI
Step 3: Setup Sanity Studio
Step 4: Update Content Schemas
Step 5: Query Data using GROQ
Step 6: Display Content in your Ecommerce App
Step 7: Deploy Sanity Studio
Step 8: Deploy to Vercel
Step 9: Next Steps

1. Install Nextjs

Open a terminal and run this command:

npx create-next-app@latest

This will install the latest version of Next.js.

We'll name our project sanity-nextjs-ecommerce-store but you can pick any name you like. We'll use the following options to set up our Next.js app.

✔ What is your project named? … nextjs-sanity-ecommerce-store
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes

This will install the required dependencies including TailwindCSS which we will use to style our web app.

To see the application, run the commands below:

cd nextjs-sanity-ecommerce-store

npm run dev

This should start a server on port 3000. Open your browser and go to localhost:3000 to see it in action.

2. Setup Chakra UI

Chakra UI is a React component library that provides customizable, accessible, and reusable UI components to build responsive web applications.

Chakra UI offers ready-to-use, reusable components, and we will be using some of them in our application, like the Drawer and Button components.

In your root directory, run this command or follow this documentation to set up Chakra in your Next.js project (App Router).

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

This will install all the necessary dependencies to run Chakra UI.

Setup Provider

In the src directory, create a folder named lib, and inside it, create another folder named chakra. Then, create a file called ChakraProvider.tsx within the chakra folder.

Copy and paste this code into ChakraProvider.tsx.

//src/lib/chakra/ChakraProvider.tsx

"use client";
import { ChakraProvider as Provider } from "@chakra-ui/react";

import { theme } from "@/lib/chakra/theme";

export function ChakraProvider({ children }: { children: React.ReactNode }) {
  return <Provider theme={theme}>{children}</Provider>;
}

Create a file named theme.ts inside the chakra folder, then copy and paste this code into theme.ts.

//src/lib/chakra/theme.ts

import { extendTheme } from "@chakra-ui/react";

export const theme = extendTheme({
  fonts: {
    heading: 'var(--font-lato)',
    body: 'var(--font-lato)',
  }
});

Create another file named fonts.ts inside the chakra folder, then copy and paste this code into fonts.ts.

//src/lib/chakra/fonts.ts

import { Lato } from 'next/font/google'

const lato = Lato({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-lato"
})

export const fonts = {
  lato
}

These files instruct Chakra to use the Lato font as the default font for the application.

Use Chakra Provider

Navigate to the layout.tsx component within your src/app folder and use Chakra Provider within the layout component.

This is what it will look like:

//src/app/layout.tsx

import type { Metadata } from "next";

import "@/app/globals.css";
import { fonts } from "@/lib/chakra/fonts";
import { ChakraProvider } from "@/lib/chakra/ChakraProvider";

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

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

3. Setup Sanity Studio

Sanity Studio is Sanity's open-source UI tool for managing website content. It allows you to add, edit, and delete data like text, images etc within Sanity.

If you don't have a Sanity account, create one here and create a new project.

Log into Sanity from your terminal

If you already have an account and have logged in previously from your terminal, you can skip this step. Otherwise, run this command in your terminal:

npx sanity login

This will authenticate you using the sanity.io API.

Install Sanity Studio

Within your project directory, run this command:

npm create sanity@latest

If you created a project during your account setup, you can continue using that project or create a new one from your terminal. In this article, we'll use an existing project that was set up when creating a Sanity account. You can configure your project using the options provided below.

? Select project to use: **ecommerce-store**
? Select dataset to use: **production**
? Would you like to add configuration files for a Sanity project in this Next.js folder? **No**
? Project output path: /Users/USER/Desktop/nextjs-sanity-ecommerce-store/**studio**
? Select project template Clean project with no predefined schema types
? Do you want to use TypeScript? **Yes**
? Package manager to use for installing dependencies? **npm**

After completing the setup, Sanity Studio will be installed locally. To view the studio, run these commands:

cd studio

npm run dev

Navigate to localhost:3333. Log in using the same method you used to create your account, and you should see the studio running locally.

4. Update Content Schemas

If you've successfully set up and logged in to Sanity Studio locally, you should see a display similar to the screenshot below:

Currently, our studio is empty because we haven't defined any schemas yet. Next, we'll define our schemas.

Schemas are like blueprints that outline how different types of content should be structured. They describe what fields each piece of content can have and what kind of information those fields can hold. This helps keep content organized and manageable.

For this e-commerce store, we create two schemas: one for Product and another for Category.

Product Schema: This schema defines how a product is structured within our store.
Category Schema: This schema defines how product categories are structured within our store.

Product Schema

Create a file named product.ts inside the schemaTypes directory located within the studio directory.

Copy and paste the code below into product.ts file

//studio/schemaTypes/products.ts

import { defineType, defineField } from "sanity";

export const productType = defineType({
  title: "Product",
  name: "product",
  type: "document",
  fields: [
    defineField({
      title: "Product Name",
      name: "name",
      type: "string",
      validation: (Rule) => Rule.required()
    }),
    defineField({
      title: "Product Images",
      name: "images",
      type: "array",
      of: [
        {
          type: "image",
          fields: [
            {
              name: "alt",
              title: "Alt Text",
              type: "string",
            },
          ],
        },
      ],
    }),
    defineField({
      title: "Product Description",
      name: "description",
      type: "text",
      validation: (Rule) => Rule.required()
    }),
    defineField({
      title: "Product Slug",
      name: "slug",
      type: "slug",
      validation: (Rule) => Rule.required(),
      options: {
        source: "name"
      }
    }),
    defineField({
      title: "Product Price",
      name: "price",
      type: "number",
      validation: (Rule) => Rule.required()
    }),
    defineField({
      title: "Product Category",
      name: "category",
      type: "reference",
      to: [{ type: "category" }]
    })
  ]
})

Category Schema

Create a file named category.ts inside the schemaTypes directory located within the studio directory.

Copy and paste the code below into category.ts file

//studio/schemaTypes/category.ts

import { defineType, defineField } from "sanity";

export const categoryType = defineType({
  title: "Category",
  name: "category",
  type: "document",
  fields: [
    defineField({
      title: "Category Name",
      name: "name",
      type: "string",
      validation: (Rule) => Rule.required()
    })
  ]
})

Update index.ts to look like this:

//studio/schemaTypes/index.ts

import { productType } from "./product"
import { categoryType } from "./category"

export const schemaTypes = [
  productType,
  categoryType
]

Each schema and field needs to include the name, and type properties. Here's a quick overview of each property's role:

The name property serves as the identifier for referencing the schema in query language contexts. It must be unique to prevent schema conflicts.
Type indicates the specific schema type being defined. Setting it to document instructs the studio to enable the creation of new documents.

Visit your studio

Navigate to the studio directory from your terminal and run npm run dev.

Open your browser and go to localhost:3333.

This is what it should now look like:

Populate your Schemas

Begin by creating categories, followed by creating products within those categories. Create as many categories and products as you want.

This is what it should now look like:

Next, we will query the product and category data to use within the application.

5. Query Data using GROQ

GROQ (Graph-Relational Object Queries) is the query language developed by Sanity for querying structured content in their backend. It enables retrieval and manipulation of data stored in Sanity's content lake.

To query product and category data, we'll use a library named @sanity/client. This library offers methods for querying, creating, updating, and deleting documents in Sanity. It is designed for use in both server-side and client-side JavaScript applications.

In the lib directory, create a new directory named sanity, and within it, create a file called client.ts.

Then, copy and paste the code below into client.ts.

//src/lib/sanity/client.ts

import { createClient, type ClientConfig } from "@sanity/client";

const config: ClientConfig = {
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  useCdn: false
};

const client = createClient(config);

export default client;

Replace process.env.NEXT_PUBLIC_SANITY_PROJECT_ID and process.env.NEXT_PUBLIC_SANITY_DATASET with the correct projectId and dataset values.

projectId: This is your project's ID. You can obtain it by running the command npx sanity projects list in your terminal or by visiting the projects page in your Sanity account. See the screenshot below.
dataset: This is the name of your project's dataset. By default, it is production, but if you create a new dataset, you should update it to reflect your dataset name.

Create 3 new files named product-query.ts, category-query.ts, and types.ts. Copy and paste the following code into it:

//src/lib/sanity/product-query.ts

import { groq } from "next-sanity";
import client from "./client";

export async function getProducts() {
  return client.fetch(
    groq`*[_type == "product"] {
      _id,
      "categoryName": category->name,
      description,
      name,
      price,
      "productImage": {"alt": images[0].alt, "imageUrl": images[0].asset->url},
      "slug": slug.current
    }`
  );
}

export async function getSelectedProducts(selectedCategory: string) {
  return client.fetch(
    groq`*[_type == "product" && category->name == $selectedCategory] {
      _id,
      "categoryName": category->name,
      description,
      name,
      price,
      "productImage": {"alt": images[0].alt, "imageUrl": images[0].asset->url},
      "slug": slug.current
    }`,
    {selectedCategory}
  );
}

The getProducts function retrieves all products, whereas the getSelectedProducts function fetches specific products based on the chosen category.

//src/lib/sanity/category-query.ts

import { groq } from "next-sanity";
import client from "./client";

export async function getCategories() {
  return client.fetch(
    groq`*[_type == "category"] {
      _id,
      name,
    }`
  );
}

The getCategories function retrieves all categories.

You'll notice that the GROQ query begins with an asterisk (*), representing all documents in your dataset, followed by a filter in brackets. The filter used here returns documents with a _type of "product" or "category".

//src/lib/sanity/types.ts

export type ProductType = {
  _id: string,
  name: string,
  productImage: {
    alt: string,
    imageUrl: string
  },
  slu: string,
  categoryName: string,
  description: string,
  price: number,
};

export type CategoryType = {
  _id: string,
  name: string,
};

The ProductType and CategoryType define the structure of the Product and Category objects.

6. Display Content in your E-commerce App

It's now time for us to display the content within the e-commerce application.

Begin by stripping all styles from the globals.css file, leaving only essential Tailwind imports at the beginning. Next, erase the contents of your root page.tsx file in your Next.js application and replace it with the following code:

//src/app/page.tsx

"use client";

import { useDisclosure } from "@chakra-ui/react";
import { Fragment, useEffect, useState } from "react";

import Hero from "@/app/components/hero/Hero";
import Cart from "@/app/components/cart/Cart";
import Navbar from "@/app/components/navbar/Navbar";
import Products from "@/app/components/products/Products";
import { getCategories } from "@/lib/sanity/category-query";
import { ProductType, CategoryType } from "@/lib/sanity/types";
import { getProducts, getSelectedProducts } from "@/lib/sanity/product-query";

export default function Home() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [products, setProducts] = useState<ProductType[]>([]);
  const [categories, setCategories] = useState<CategoryType[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string>("");

  const [cartItems, setCartItems] = useState<ProductType[]>([]);
  const [cartItemsCount, setCartItemsCount] = useState<number>(0);

  const localStorageCartItem =
    typeof window !== "undefined" && localStorage.getItem("cart");
  const parsedCartItems =
    localStorageCartItem && JSON.parse(localStorageCartItem);
  const itemsInCart = cartItems.length > 0 ? cartItems : parsedCartItems;

  const localStorageCartItemCount =
    typeof window !== "undefined" && localStorage.getItem("cartCount");
  const cartCount: number =
    localStorageCartItemCount && JSON.parse(localStorageCartItemCount);
  const itemCount = cartItemsCount || cartCount;

  useEffect(() => {
    async function fetchProducts() {
      const allProducts: ProductType[] = await getProducts();
      setProducts(allProducts);
    }
    fetchProducts();
  }, []);

  useEffect(() => {
    async function fetchCategories() {
      const allCategories: CategoryType[] = await getCategories();
      setCategories(allCategories);
    }
    fetchCategories();
  }, []);

  const handleDrawerOpen = () => onOpen();

  const handleProductFilter = async (category: string) => {
    let product: ProductType[] = [];
    if (!!category) {
      product = await getSelectedProducts(category);
    } else {
      product = await getProducts();
    }
    setProducts(product);
    setSelectedCategory(category);
  };

  const addCartItem = (product: ProductType) => {
    let cart: ProductType[] = [];
    const count = cartCount + 1;
    const products = [];
    products.push(product);

    if (!!itemsInCart) {
      cart = [...itemsInCart, ...products];
    } else {
      cart = [...products];
    }

    setCartItems(cart);
    setCartItemsCount(count);

    updateLocalStorage(count, cart);
  };

  const removeItemFromCart = (product: ProductType) => {
    const count = cartCount - 1;
    const filteredItems = itemsInCart.filter(
      (item: ProductType) => item._id !== product._id
    );

    setCartItems(filteredItems);
    setCartItemsCount(count);

    updateLocalStorage(count, filteredItems);
  };

  const updateLocalStorage = (count: number, cart: ProductType[]) => {
    if (typeof window !== "undefined") {
      localStorage.setItem("cartCount", JSON.stringify(count));
      localStorage.setItem("cart", JSON.stringify(cart));
    }
  };

  return (
    <Fragment>
      <Navbar handleDrawerOpen={handleDrawerOpen} itemCount={itemCount} />
      <main>
        <Hero
          categories={categories}
          handleProductFilter={handleProductFilter}
        />
        <Products
          products={products}
          selectedCategory={selectedCategory}
          addCartItem={addCartItem}
        />
      </main>
      <Cart
        isOpen={isOpen}
        onClose={onClose}
        itemsInCart={itemsInCart}
        removeItemFromCart={removeItemFromCart}
      />
    </Fragment>
  );
}

//src/app/globals.css

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

Please review this repository for additional components like Navbar, Hero, Products, and Cart used in page.tsx.

Add `localhost:3000` to CORS Origin

After setting up your frontend application and including all necessary components, launch your Next.js application with npm run dev.

This will start your Next.js app on port 3000. Open your browser and navigate to localhost:3000. You'll encounter a CORS error preventing your application from loading.

To resolve this issue, include localhost:3000 to the list of allowed hosts that can connect to your project's API.

You can achieve this via the terminal using npx sanity cors add http://localhost:3000, or by logging into your Sanity account and adding localhost:3000 to the CORS origin list. Refer to the screenshot below for guidance.

Now, restart your application, and you should see a list of products that were added through your Sanity Studio.

You have the option to add products to your cart, remove them, and filter the product list by category.

7. Deploy Sanity Studio

Once your application is up and running locally, you can synchronize your schemas with your remote Sanity Studio by running npx sanity deploy. This ensures that your remote studio reflects the latest changes made locally.

8. Deploy to Vercel

To make your e-commerce store accessible online, deploy it using Vercel. Vercel provides seamless deployment for Next.js applications, ensuring your site is fast and reliable. Simply link your GitHub repository to Vercel and trigger automatic deployments with every push to your main branch. Once deployed, your store will be live and accessible to users worldwide.

9. Next Steps

While this tutorial has provided a solid foundation, there are numerous ways to further enhance your e-commerce store using Sanity.

Thank you for reading! Remember to like, share, and follow for future updates and more insightful content. Until next time, happy coding!

Docker Cheatsheet: Essential Commands You Need to Know

Enodi Audu — Tue, 09 Jul 2024 15:16:50 +0000

Docker has become a go-to tool for developers, simplifying the process of creating, deploying, and running applications using containers. Here’s a handy cheat sheet of essential Docker commands to help you navigate Docker like a pro.

1. Docker Basics

docker --version This shows you the current version of Docker you have installed.

  docker --version

docker info This will list detailed information about your Docker setup.

  docker info

2. Working with Images

docker pull [image] This command downloads an image from the Docker Hub.

  docker pull [image_name]

docker images List all the images you have on your system.

  docker images

docker rmi [image] Remove an image from your system.

  docker rmi [image_name] e.g docker rmi postgres

3. Managing Containers

docker run [image] Create and start a new container from an image.

  docker run [image_name]

docker ps List all running containers.

  docker ps

docker ps -a List all containers, including those that are stopped.

  docker ps -a

docker stop [container_id] Stop a running container.

  docker stop [container_id]

docker start [container_id] Start a stopped container.

  docker start [container_id]

docker rm [container_id] Remove a stopped container.

  docker rm [container_id]

4. Accessing Containers

docker exec -it [container_id] /bin/bash Access a running container with an interactive shell.

  docker exec -it [container_id] /bin/bash

5. Building Images

docker build -t [name:tag] [path] Build a new image from a Dockerfile.

  docker build -t [name:tag] [path] e.g docker build -t app:latest .

6. Docker Networks

docker network ls List all networks.

  docker network ls

docker network create [network_name] Create a new network.

  docker network create [network_name] e.g docker network create 
  backend_default

docker network rm [network_name] Remove a network.

  docker network rm [network_name]

7. Docker Volumes

docker volume ls List all volumes.

  docker volume ls

docker volume create [volume_name] Create a new volume.

  docker volume create [volume_name] e.g docker volume create 
  backend_pgdata

docker volume rm [volume_name] Remove a volume.

  docker volume rm [volume_name]

8. Docker Compose

docker-compose up Start and run your Docker Compose services.

  docker-compose up

docker-compose down Stop and remove Docker Compose services.

  docker-compose down

docker-compose build Build or rebuild services.

  docker-compose build

This cheatsheet covers the most essential Docker commands to get you started. Whether you’re managing images, containers, networks, or volumes, these commands will help you streamline your workflow and make the most out of Docker.

If you found this article helpful, please like and share it. Comment below with any other Docker commands or tips you’ve found useful. Happy coding :)

Top 5 AI-Powered VSCode Extensions Every Developer Needs

Enodi Audu — Tue, 09 Jul 2024 12:46:20 +0000

In the ever-evolving world of development, finding tools that streamline your workflow is essential. AI is transforming how we code, enhancing productivity and efficiency. In this article, we'll dive into 5 must-have AI-powered VSCode extensions that can help you write better code faster.

1. GitHub Copilot

If you're a developer, you've likely heard of GitHub Copilot. This AI-powered code completion tool from GitHub acts as an AI pair programmer, providing smart auto-complete suggestions to boost your productivity. Simply describe what you need in plain English, and Copilot will generate the code for you.

While it’s a paid service, GitHub offers a 30-day free trial to test its capabilities. Some features of GitHub Copilot include:

a. Code completions: Copilot provides autocomplete-style suggestions as you code, offering relevant suggestions as you type.

b. Chat: A chat interface for asking questions, useful for troubleshooting bugs or building new features.

c. Participants: The ability to tag domain experts in a chat, ask questions, and get responses.

d. Slash commands: Shortcuts to specific functionality via slash commands.

e. Language support: Compatible with languages like Java, PHP, Python, JavaScript, Ruby, Go, C#, C++, and more.

As of June 2024, GitHub Copilot has 1.3 million paid subscribers.

2. Tabnine

Tabnine is another powerful AI code assistant that provides AI chat and code completion for various languages such as JavaScript, Python, TypeScript, PHP, Go, and more.

Tabnine is also a paid product but offers a generous 90-day free trial. Some features of Tabnine include:

a. Code Completion: Speeds up coding by suggesting the next line or block of code, making your workflow smoother and more efficient.

b. Write Test Cases: Ask Tabnine to create tests for a specific function or piece of code in your project. It can generate actual test cases, implementations, and assertions. Tabnine can also use existing tests in your project and suggest new tests that align with your testing framework.

c. Write Documentation: Generate documentation for specific sections of your code to enhance readability and make it easier for other team members to understand.

d. Chat: Allows developers to generate code by asking questions in natural language, making it easy to get help and suggestions.

e. Custom Model: Ability to choose your own model tailored to your specific needs and preferences. Some models available to choose from include: the Tabnine model, Codestral, GPT-4o, Claude 3.5 Sonnet etc

f. Language/Library Support: Tabnine provides extensive support for languages and libraries, including JavaScript, TypeScript, Python, Java, C, C++, C#, Go, PHP, Ruby, Kotlin, Dart, Rust, React/Vue, HTML 5, CSS, Lua, Perl, YAML, Cuda, SQL, Scala, Shell (bash), Swift, R, Julia, VB, Groovy, Matlab, Terraform, ABAP, and more.

g. Supported IDEs: Tabnine works with various IDEs such as VS Code, JetBrains IDEs (IntelliJ, PyCharm, WebStorm, PhpStorm, Android Studio, GoLand, CLion, Rider, DataGrip, RustRover, RubyMine, DataSpell, Aqua, AppCode), Eclipse, Visual Studio 2022, and others.

Tabnine has over 7 million downloads.

3. Mintlify Doc Writer

Mintlify Doc Writer is a tool designed to simplify the process of writing documentation. It uses AI to generate clear, concise documentation directly from your code, saving you time and effort.

Mintlify Doc Writer is available as a paid service, but it offers a free trial to get you started. Key features include:

a. Automated Documentation: Generates documentation for your functions, classes, and modules by analyzing your code, ensuring that your documentation is always up-to-date.

b. Code Comments: Converts your inline code comments into well-structured documentation, making it easier for others to understand your code.

c. Customization: Allows you to customize the generated documentation to match your project's style and requirements.

d. Integrations: Works seamlessly with popular IDEs and code editors, allowing you to generate documentation directly within your development environment.

e. Multi-language Support: Supports a variety of programming languages, including JavaScript, Python, Java, C#, and more.

Mintlify Doc Writer helps you maintain high-quality documentation with minimal effort, improving code readability and team collaboration.

4. Red Hat Dependency Analytics

Red Hat Dependency Analytics is an AI-powered extension that helps developers manage dependencies and security vulnerabilities in their projects. It provides detailed insights and recommendations to ensure your code is secure and up-to-date.

Red Hat Dependency Analytics offers a range of features, including:

a. Vulnerability Detection: Automatically scans your project for known vulnerabilities in dependencies and provides suggestions for safer alternatives.
b. Dependency Management: Analyzes your project's dependencies and suggests updates to keep your software secure and compliant.
c. Actionable Insights: Offers detailed reports on the security and health of your dependencies, helping you make informed decisions.
d. Integration: Seamlessly integrates with popular IDEs like VS Code, allowing you to manage dependencies directly within your development environment.
e. Multi-language Support: Supports various programming languages and ecosystems, including JavaScript, Python, Java, and more.

Red Hat Dependency Analytics helps you maintain a secure and reliable codebase by providing critical insights into your project's dependencies.

5. GPT Commit

GPT Commit is an AI tool that assists developers in writing better commit messages. It leverages machine learning to analyze your code changes and suggest clear, concise, and informative commit messages.

GPT Commit is available as a paid service with a free trial option. Key features include:

a. Commit Message Suggestions: Automatically generates commit messages based on your code changes, ensuring that your commit history is clear and informative.

b. Consistency: Helps maintain consistency in your commit messages, making your project's history easier to understand.

c. Customization: Allows you to customize the format and style of the generated commit messages to match your project's conventions.

d. Integration: Works with popular version control systems like Git, integrating seamlessly into your existing workflow.

e. Language Support: Supports commit message generation for projects written in various programming languages, including JavaScript, Python, Java, C#, and more.

GPT Commit enhances your version control practices by ensuring that your commit messages are always well-written and informative, improving the overall quality of your project's history.

These tools showcase the power of AI in enhancing productivity and efficiency in software development. By integrating these AI-powered extensions into your workflow, you can streamline your coding process and produce high-quality code more efficiently.

I hope you've enjoyed this article. Comment below with any other tools you’ve found helpful. Happy coding :)

TypeScript 5.5: Exciting New Features

Enodi Audu — Wed, 03 Jul 2024 14:53:19 +0000

TypeScript has become increasingly popular among developers as a more structured alternative to JavaScript. It helps define types within your code, making it easier to catch errors like typos etc on time.

Recently, TypeScript rolled out version 5.5, introducing several new features. In this article, we’ll take a closer look at four(4) of these new features and explain them in a simple, easy-to-understand manner.

1. Inferred Type Predicates

One of the key improvements in TypeScript 5.5 is better type inference, especially with arrays and filtering.

What does this mean? As your code progresses, the type of a variable can change. With Inferred Type Predicates, TypeScript now adjusts the type definitions accordingly.

Let's look at an example:



const namesAndAges = ["Elijah", "Sophia", "Liam", "Isabella", "Mason", 23, 24];

const ages = namesAndAges.filter(age => typeof age === 'number');

ages.forEach((age) => console.log(age + 1));

In TypeScript 5.0(Previous Versions):

In this example, namesAndAges is an array of type (string|number)[]. We're filtering out non-numeric values, leaving us with an array of numbers (ages). However, TypeScript 5.0 still sees the array ages as (string|number)[], causing an error when trying to add 1 to age due to potential string types.

Previously, we might have needed to explicitly cast age to number like this:



ages.forEach((age) => console.log(age as number + 1));

TypeScript 5.5 simplifies this process:
With TypeScript 5.5, TypeScript handles this type of inference more accurately, as shown below:

This improvement makes type inference a lot better making TypeScript more intuitive and effective in catching potential errors early.

2. Control Flow Narrowing for Constant Indexed Accesses

Another significant enhancement in TypeScript 5.5 is better type narrowing for accessing object properties.

What does this mean?
Let's break it down with an example:



type ObjType = Record<string, number | string>;

function downCase(obj: ObjType, key: string) {
    if (typeof obj[key] === "string") {
        console.log(obj[key].toLowerCase());
    }
}

In TypeScript 5.0(Previous Versions):

In this example, the downCase function checks if the property's value is of type string, and if so, converts it to lowercase. However, the previous TypeScript versions can’t be sure if obj[key] is a number or a string, leading to an error when trying to use the toLowerCase method.

To avoid this in previous versions, we could do something like this:



type ObjType = Record<string, number | string>;

function downCase(obj: ObjType, key: string) {
    const value = obj[key];
    if (typeof value === "string") {
        console.log(value.toLowerCase());
    }
}

Here, an intermediary variable value is used to help TypeScript understand the type.

With TypeScript 5.5, this workaround is no longer needed. The new version automatically narrows the type correctly based on the condition typeof obj[key] === "string" as shown below:

Because Typescript is aware that the property’s value is of type string, all string methods are available for use as shown below

3. Regular Expression Syntax Checking

TypeScript 5.5 also brings a useful feature for developers working with regular expressions: syntax checking on regular expressions.

What does this mean?
Before this update, TypeScript would skip over regular expressions and not validate their syntax, potentially allowing errors to slip through unnoticed. With TypeScript 5.5, basic syntax checks are now performed on regular expressions.

Let’s explain this with an example:

In TypeScript 5.0(Previous Versions):



const regex = /hello(world/;

In the example above, the regular expression /hello(world/ has an unclosed parenthesis (. Regular expressions require that every opening parenthesis has a corresponding closing parenthesis.

In previous versions of TypeScript, this mistake would go unnoticed, and no error would be flagged.

No error was flagged in Typescript v5.0

With TypeScript 5.5, this regular expression will be flagged as an error because the syntax is incorrect due to the unmatched parenthesis.

This improvement helps catch common mistakes in regular expressions early, making your code more reliable.

An error was flagged in TypeScript 5.5

The fixed code in TypeScript 5.5

Note: TypeScript’s regular expression support is limited to regular expression literals. If you use new RegExp with a string literal, TypeScript will not check the provided string's syntax. You can read more here

4. Support for New ECMAScript Set Methods

TypeScript 5.5 has added support for the new methods introduced to the Set object in JavaScript. These methods include union, intersection, difference, symmetricDifference, and more, expanding how you can work with Sets.

What does this mean?
These new Set methods allow for more powerful and concise operations on sets, such as combining or finding common elements between them.

Let’s break this down with an example:

In previous TypeScript versions:



let primaryColors = new Set(["red", "blue", "yellow"]);
let secondaryColors = new Set(["green", "orange", "purple"]);

// Trying to use the new Set methods would result in an error
// The previous versions of TypeScript would not recognize these methods
console.log(primaryColors.union(secondaryColors)); // Error: Property 'union' does not exist on type 'Set<string>'
console.log(primaryColors.intersection(secondaryColors)); // Error: Property 'intersection' does not exist on type 'Set<string>'

Before TypeScript 5.5, attempting to use these methods would result in errors because TypeScript didn’t recognize them. This was because these methods were newly introduced in the latest ECMAScript specification and weren’t yet supported by TypeScript.

With TypeScript 5.5, these new methods are now fully supported. You can use them directly without TypeScript flagging any errors.

In TypeScript 5.5:



let primaryColors = new Set(["red", "blue", "yellow"]);
let secondaryColors = new Set(["green", "orange", "purple"]);

console.log(primaryColors.union(secondaryColors)); // Combines both sets
console.log(primaryColors.intersection(secondaryColors)); // Finds common elements

TypeScript 5.5 brings significant enhancements like improved type inference, support for new ECMAScript Set methods, and better regular expression syntax checking. Part 2 of this article will cover additional features introduced in version 5.5.

In case you're wondering, I used TypeScript Playground to test and demonstrate these updates. Explore TypeScript 5.5 features yourself on the TypeScript Playground.

If you're excited about TypeScript 5.5 like I am, drop a like or comment below to share your thoughts on these awesome new features!

Stay tuned for more updates in Part 2! Until then, happy coding!!! :)

DEV Community: Enodi Audu

How to Build an E-commerce Store with Sanity and Next.js

1. Install Nextjs

2. Setup Chakra UI

Setup Provider

Use Chakra Provider

3. Setup Sanity Studio

Log into Sanity from your terminal

Install Sanity Studio

4. Update Content Schemas

Product Schema

Category Schema

Visit your studio

Populate your Schemas

5. Query Data using GROQ

6. Display Content in your E-commerce App

Add localhost:3000 to CORS Origin

7. Deploy Sanity Studio

8. Deploy to Vercel

9. Next Steps

Docker Cheatsheet: Essential Commands You Need to Know

1. Docker Basics

2. Working with Images

3. Managing Containers

4. Accessing Containers

5. Building Images

6. Docker Networks

7. Docker Volumes

8. Docker Compose

Top 5 AI-Powered VSCode Extensions Every Developer Needs

1. GitHub Copilot

2. Tabnine

3. Mintlify Doc Writer

4. Red Hat Dependency Analytics

5. GPT Commit

TypeScript 5.5: Exciting New Features

1. Inferred Type Predicates

2. Control Flow Narrowing for Constant Indexed Accesses

3. Regular Expression Syntax Checking

4. Support for New ECMAScript Set Methods

Add `localhost:3000` to CORS Origin