Key Features and Implementation

1. API Fetching with External Sources

The platform integrates with external APIs to provide real-time sneaker data. For instance, product details like pricing, availability, and images are dynamically fetched from external services, ensuring up-to-date information.

Example Implementation:

• Next.js API Routes: External APIs are consumed using fetch within custom Next.js API routes to handle external data fetching securely.

• Caching Mechanism: The system employs caching techniques to reduce redundant API calls, optimizing performance.

2. Data Management with Prisma ORM and SQLite

SneakTer Store uses Prisma ORM for seamless database interactions. The data is stored in an SQLite database, providing simplicity and scalability. The system manages CRUD operations effectively:

• Create: Admins can add new sneakers to the store via the admin dashboard.

• Read: Users can view sneaker collections and filter by price, size, and category.

• Update: Admins can modify existing sneaker details like pricing or images.

• Delete: Outdated products can be removed with a single click.

  Example Prisma Schema:

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String
  role      String   @default("user")
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

}

model Product {
  id        String   @id @default(cuid())
  name      String
  price     Float
  image     String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

}

3. User Authentication and Role-Based Views

The system includes secure user authentication with role-based access:

• Admins: Full access to product management (add, edit, delete) and order tracking.

• Regular Users: Can browse products, add to cart, and place orders.

Authentication Stack:

• JWT for token-based authentication.

• Zod Library: Ensures robust input validation on both the frontend and backend, preventing malicious input.

4. Responsive and Intuitive UI with TailwindCSS

SneakTer Store is designed to work seamlessly across devices, thanks to responsive design techniques implemented with TailwindCSS:

• Mobile-First Design: Optimized for mobile viewing while scaling gracefully to larger screens.

• Reusable Components: Components like Header, Navbar, and Footer are styled using TailwindCSS utilities, ensuring design consistency.

5. Input Validation with Zod

All input elements are validated both on the client and server using the Zod library. For example, user registration ensures the email format is correct and passwords meet security criteria.

Backend Validation Example:

import { z } from 'zod';

const userSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8, "Password must be at least 8 characters long"),
});

export const validateUserInput = (data: unknown) => userSchema.parse(data);

How to Use SneakTer Store

1. Registration and Login

1. Navigate to the Signup page to create an account.

2. Enter your email, password, and confirm the details.

3. Once registered, use the Login page to access your account.

2. Browsing Products

1. Visit the Shop page to explore the latest sneakers.

2. Use the search bar to find specific products by name.

3. Filter options allow users to narrow results by price, size, or other criteria.

3. Adding Products to the Cart

1. On the product card, specify the quantity and size of the sneaker.

2. Click Add to Cart to save the item.

3. View the cart via the dedicated Cart page to review or update items.

4. Admin Dashboard

Admins can:

• Add new products with details like name, price, and image URL.

• Edit existing product information.

• Delete outdated or unwanted products.

5. Logout

To log out, simply click the Logout button on the main page. And it will return to login page.

Click Here!! to see my GitHub: https://github.com/Ter2004/p_one.git