STORIES OF OUR PRACTICE

Team VKL Design

Apr 8, 2024

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

Initialize your Next.js project: npx create-next-app@latest my-marketplace
Navigate to your project directory: cd my-marketplace
Install necessary dependencies: npm install react react-dom swr trpc tailwindcss

Step 2: Setting Up tRPC

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

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

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>

</Head>

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

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

))}

</div>

</main>

</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 (

<a>

<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 (

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

</Link>

<nav>

<li>

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

</Link>

</li>

<li>

</Link>

</li>

</ul>

</nav>

</div>

</header>

);

};

export default Header;

Step 5: Running Your Project

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!