README.md

SafeSwap Frontend 🔄

A modern web marketplace built with Next.js, leveraging blockchain technology for secure escrow-based transactions.

Tech Stack 🛠

• Next.js - React framework
• Radix UI - Headless UI primitives
• shadcn/ui - Accessible components
• TailwindCSS - Utility-first CSS
• TypeScript - Type safety
• Biome - Fast formatter and linter
• Stellar - Blockchain network

Project Structure 📁

frontend/
├── app/           # Next.js App Router and pages
├── components/    # Reusable React components
│   ├── home/        # Home page components
│   ├── marketplace/ # Marketplace-related components
│   ├── products/    # Product-related components
│   ├── providers/   # Context providers (e.g., ThemeProvider)
│   ├── shared/      # Common UI elements
│   └── ui/          # shadcn/ui components
├── context/       # Global state and providers
├── fonts/         # Custom and external fonts
├── hooks/         # Custom React hooks
├── lib/           # Core utilities and configurations
│   ├── mocks/       # Mock data for testing
│   ├── schemas/     # Zod validation schemas
│   ├── types/       # TypeScript types and interfaces
├── locales/       # i18n translation files
├── public/        # Static assets (images, icons, etc.)
├── utils/         # Pure utility functions (e.g., string formatting, helpers)
docs/instructions # Project documentation and guidelines
    └── instructions.md    # Project specifications
.cursorrules      # Development standards

Development Guidelines 📋

Instructions.md

The instructions.md file serves as a blueprint for Cursor AI, defining:

• Project overview and core functionalities
• Component specifications
• Feature requirements
• Implementation details

.cursorrules

The .cursorrules file defines coding standards and development guidelines:

• TypeScript configurations and best practices
• Component structure and naming conventions
• Testing requirements
• Code formatting rules via Biome
• Project architecture patterns

Getting Started 🚀

1. Install dependencies:

npm install

2. Run development server:

npm run dev

Open http://localhost:3000

Available Scripts

• npm run dev - Start development server
• npm run build - Create production build
• npm run start - Start production server
• npm run lint - Run Biome linter

Component Usage

import { Button } from "@/components/ui/button"

// Use shadcn/ui components
<Button variant="outline">Click me</Button>

Development Guidelines

• Use TypeScript for type safety
• Follow Biome linting rules
• Components should be accessible
• Use Tailwind CSS for styling
• Prefer server components unless client interactivity needed

Learn More

• Next.js Documentation
• Radix UI Documentation
• shadcn/ui Documentation
• Stellar Documentation

License

MIT License