top of page

STORIES OF OUR PRACTICE

Tiny Check
Team VKL Design

Team VKL Design

Apr 8, 2024

12

Premium web design, Our Practice, Online Store, Development

Tags:

Building a complete digital marketplace

Building a complete digital marketplace with Next.js 14, React, tRPC, and Tailwind CSS is an exciting project that allows you to create a modern, efficient, and visually appealing platform.


Here's a step-by-step guide to help you get started:



Step 1: Setting Up Your Next.js Project


  1. Initialize your Next.js project: npx create-next-app@latest my-marketplace

  2. Navigate to your project directory: cd my-marketplace

  3. Install necessary dependencies: npm install react react-dom swr trpc tailwindcss


Step 2: Setting Up tRPC


  1. Create a .trpc.ts file in your project root:

import { createTRPCClient } from '@trpc/client';
import { AppRouter } from '../api/_trpc';

export const trpc = createTRPCClient<AppRouter>({
  url: '/api/trpc',
});

2. Create a api/_trpc.ts file:

import { createTRPCRouter } from '@trpc/server';
import { z } from 'zod';

export const AppRouter = createTRPCRouter()
  .query('hello', {
    resolve() {
      return { text: 'Hello, World!' };
    },
  })
  .mutation('add', {
    input: z.number(),
    resolve({ input }) {
      return input + 1;
    },
  });

Step 3: Setting Up Tailwind CSS

  1. Configure Tailwind CSS:

npx tailwindcss init -p

2. Create a tailwind.config.js file in your project root:

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'

Step 4: Building Your Marketplace

  1. Create your marketplace pages in the pages directory:

  • pages/index.tsx: Homepage

  • pages/products.tsx: Products listing page

  • pages/product/[id].tsx: Product detail page

  • pages/cart.tsx: Shopping cart page

  • pages/checkout.tsx: Checkout page


// Example of pages/index.tsx

import React from 'react';

import Head from 'next/head';

import Header from '../components/Header';

import Footer from '../components/Footer';

import ProductCard from '../components/ProductCard';

import { useQuery } from '../hooks/useQuery';

const Home: React.FC = () => {

  const { data: products, error } = useQuery('products');

  if (error) return <div>Error loading products</div>;

  if (!products) return <div>Loading...</div>;

  return (

    <div>

      <Head>

        <title>My Marketplace</title>

        <link rel="icon" href="/favicon.ico" />

      </Head>

      <Header />

      <main className="container mx-auto my-8">

        <h1 className="text-3xl font-semibold mb-4">Featured Products</h1>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">

          {products.map((product: any) => (

            <ProductCard key={product.id} product={product} />

          ))}

        </div>

      </main>

      <Footer />

    </div>

  );

};

export default Home;


2. Create necessary components in the components directory:

  • components/Header.tsx: Navigation header

  • components/Footer.tsx: Footer

  • components/ProductCard.tsx: Card for displaying product information

  • components/CartItem.tsx: Cart item component


// Example of components/ProductCard.tsx

import React from 'react';

import Link from 'next/link';

const ProductCard: React.FC<{ product: any }> = ({ product }) => {

  return (

    <Link href={`/product/${product.id}`}>

      <a>

        <div className="bg-white rounded shadow p-4">

          <img src={product.image} alt={product.title} className="w-full h-48 object-cover mb-4" />

          <h2 className="text-lg font-semibold">{product.title}</h2>

          <p className="text-gray-600">${product.price}</p>

        </div>

      </a>

    </Link>

  );

};

export default ProductCard;


3. Implement tRPC hooks for data fetching:

  • Create hooks directory and add useQuery.ts and useMutation.ts files to handle data fetching and mutations respectively.

// Example of hooks/useQuery.ts

import { trpc } from '../.trpc';

import { useQuery } from 'react-query';

export const useQuery = (key: string) => {

  return useQuery(key, () => trpc.products.list());

};


4. Style your components using Tailwind CSS:

  • Utilize Tailwind CSS classes in your components to style them as desired.

// Example of components/Header.tsx

import React from 'react';

import Link from 'next/link';

const Header: React.FC = () => {

  return (

    <header className="bg-gray-800 text-white py-4">

      <div className="container mx-auto flex justify-between items-center">

        <Link href="/">

          <a className="text-xl font-semibold">My Marketplace</a>

        </Link>

        <nav>

          <ul className="flex space-x-4">

            <li>

              <Link href="/products">

                <a className="hover:text-gray-300">Products</a>

              </Link>

            </li>

            <li>

              <Link href="/cart">

                <a className="hover:text-gray-300">Cart</a>

              </Link>

            </li>

          </ul>

        </nav>

      </div>

    </header>

  );

};

export default Header;



Step 5: Running Your Project

  1. Start your development server:

npm run dev


   2. Navigate to http://localhost:3000 in your browser to view your marketplace.


By following these steps, you'll be well on your way to building a complete digital marketplace using Next.js 14, React, tRPC, and Tailwind CSS. This modern stack provides a powerful foundation for creating efficient, responsive, and visually appealing web applications. Happy coding!


By following these steps, you'll be well on your way to building a complete digital marketplace using Next.js 14, React, tRPC, and Tailwind CSS


Related stories

bottom of page