Key Features • How To Use • Download • Credits • Related • License
- 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
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 devEnsure 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-apiHere 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;You can download the latest version of the Online Store for Windows, macOS, and Linux.
This software uses the following open source packages:
MIT
GitHub @amuari · Twitter (https://twitter.com/amuaridev)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent