---

Sorisso Online Store

A modern online store built with Next.js, TypeScript, Tailwind CSS, and Clerk for authentication.

Key Features • How To Use • Download • Credits • Related • License

Key Features

• User authentication with Clerk
• Styled with Tailwind CSS
• Built with TypeScript
• Fetch and display products from an API
• Optimized image loading with next/image
• Responsive design
• Error handling for data fetching

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/amuari/sorisso-store

# Go into the repository
$ cd my-app

# Install dependencies
$ npm install

# Run the app
$ npm run dev

Configuration

Ensure that you configure the external image domains in your next.config.js file:

// next.config.js
module.exports = {
  images: {
    domains: ['fakestoreapi.com'],
  },
};

Set up Clerk authentication by adding your Clerk frontend API key to the environment variables:

# .env.local
NEXT_PUBLIC_CLERK_FRONTEND_API=your-clerk-frontend-api

Example Code

Here is an example of how to fetch and display products:

// app/page.tsx
import Image from 'next/image';
import { Product } from '../types/Product';

async function getData(): Promise<Product[]> {
  const res = await fetch('https://fakestoreapi.com/products');

  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

const Page = async () => {
  const data = await getData();

  return (
    <div className="p-4">
      {data.map((product) => (
        <div key={product.id} className="border p-4 m-2 rounded-lg shadow-lg">
          <h2 className="text-xl font-bold">{product.title}</h2>
          <p>{product.description}</p>
          <p className="text-lg font-semibold">${product.price}</p>
          <Image
            src={product.image}
            alt={product.title}
            width={200}
            height={200}
            layout="responsive"
            className="rounded"
          />
        </div>
      ))}
    </div>
  );
};

export default Page;

Download

You can download the latest version of the Online Store for Windows, macOS, and Linux.

Credits

This software uses the following open source packages:

• Next.js
• React
• TypeScript
• Tailwind CSS
• Clerk
• FakeStoreAPI

License

MIT

---

GitHub @amuari  ·  Twitter (https://twitter.com/amuaridev)

---