🎨 Kithub - Premium PSD Marketplace

Here's a comprehensive, professional README.md for your Kithub project:

🎨 Kithub - Premium PSD Marketplace

A modern, high-performance e-commerce platform built with Next.js 15 for selling premium PSD templates. Features secure Razorpay payments, instant digital downloads, and a creator-focused interface.

✨ Features

🎯 Core Features

Instant Digital Delivery: Automated download links after successful payment
Secure Payments: Razorpay integration with proper webhook verification
PSD Preview Gallery: High-quality mockups showcasing editable layers
Category Filtering: Browse by type (YouTube, Instagram, Posters, etc.)
Responsive Design: Mobile-first approach with Tailwind CSS

🛠️ Technical Features

Next.js 15 (App Router): Server components, streaming, and edge runtime
TypeScript: Full type safety across the application
Tailwind CSS: Utility-first styling with custom design system
Razorpay SDK: Secure payment processing with webhook verification
File Delivery: Secure download system with one-time access links

👥 User Experience

Clean Product Grid: Visual cards with preview images, tags, and pricing
Detailed Product Pages: What's included, software requirements, license info
Purchase History: Track downloads and access purchased files
Trust Signals: Secure payment badges, refund policy, terms of service

🏗️ Project Structure

kithub/
├── src/
│   ├── app/                    # Next.js 15 App Router
│   │   ├── (auth)/            # Authentication routes
│   │   ├── (dashboard)/       # User dashboard
│   │   ├── products/          # Product listings & detail pages
│   │   ├── checkout/          # Payment flow
│   │   ├── success/           # Download after payment
│   │   └── api/              # API routes
│   ├── components/            # React components
│   │   ├── ui/               # Reusable UI components
│   │   ├── layout/           # Layout components
│   │   └── shared/           # Shared components
│   ├── lib/                   # Utilities & helpers
│   └── types/                 # TypeScript type definitions
├── public/                    # Static assets
└── scripts/                   # Build & utility scripts

🚀 Getting Started

Prerequisites

Node.js 18+
npm or yarn or pnpm
Razorpay account (for payments)
Git

Installation

Clone the repository

git clone https://github.com/yourusername/kithub.git
cd kithub

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up environment variables

cp .env.example .env.local

Edit .env.local with your credentials:

# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Razorpay Payments
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret
RAZORPAY_WEBHOOK_SECRET=your_webhook_secret

# Database (optional)
DATABASE_URL=your_database_url

# Authentication (optional)
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

# Storage (for PSD files)
UPLOAD_DIR=./uploads
MAX_FILE_SIZE=104857600 # 100MB

Run development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser Navigate to http://localhost:3000

📦 Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm start - Start production server
npm run lint - Run ESLint
npm run type-check - Check TypeScript types

🔧 Configuration

Razorpay Setup

Create a Razorpay account at razorpay.com
Get your API keys from Razorpay Dashboard → Settings → API Keys
Set up webhook endpoint: https://yourdomain.com/api/razorpay/webhook
Configure webhook events: payment.captured, payment.failed

Adding Products

Products are stored in src/data/products.ts (initially):

export const products = [
  {
    id: "psd-001",
    title: "YouTube Thumbnail Pack Vol.1",
    description: "10 editable YouTube thumbnail templates",
    price: 299, // in INR
    category: "youtube",
    tags: ["thumbnail", "youtube", "gaming"],
    previews: ["/previews/yt-1.jpg", "/previews/yt-2.jpg"],
    features: [
      "Fully editable PSD layers",
      "Free font links included",
      "Commercial license",
      "24/7 instant download"
    ],
    fileUrl: "/downloads/yt-pack-1.zip",
    fileSize: "45 MB"
  }
];

🌐 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# For production
vercel --prod

Environment Variables on Vercel

Add these to your Vercel project settings:

RAZORPAY_KEY_ID
RAZORPAY_KEY_SECRET
RAZORPAY_WEBHOOK_SECRET
NEXT_PUBLIC_APP_URL

Other Platforms

Netlify:

# Build command
npm run build

# Publish directory
.next

AWS Amplify:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

💳 Payment Flow

graph LR
    A[Product Page] --> B[Buy Now]
    B --> C[Create Order API]
    C --> D[Razorpay Checkout]
    D --> E{Payment Status}
    E -->|Success| F[Verify Payment]
    E -->|Failed| G[Show Error]
    F --> H[Generate Download Link]
    H --> I[Success Page + Email]
    I --> J[Download PSD]

📱 Pages Overview

1. Homepage (`/`)

Featured PSD collections
Category highlights
Trust badges & testimonials

2. Products (`/products`)

Grid layout with filtering
Search functionality
Sort by price/popularity

3. Product Detail (`/products/[id]`)

High-quality previews
"What's included" section
FAQ & requirements
Buy Now button

4. Checkout (`/checkout`)

Order summary
Razorpay integration
Secure payment form

5. Success (`/success`)

Download instructions
Access to purchased files
Email confirmation

6. Dashboard (`/dashboard`) - Optional

Purchase history
Download re-access
Account management

🎨 Design System

Colors

Primary: #8B5CF6 (Purple)
Secondary: #EC4899 (Pink)
Background: #FFFFFF (White)
Text: #1F2937 (Gray-900)
Accent: #FBBF24 (Amber)

Typography

Headings: Inter (Bold)
Body: Inter (Regular)
Accent: Gochi Hand (Handwritten)
Logo: Comic Neue (Bold)

Components

ProductCard - Product listing cards
CategoryFilter - Filter by tags/categories
PreviewGallery - Product image carousel
CheckoutButton - Razorpay integration
DownloadButton - Secure file download

🔒 Security Features

Payment Verification: All payments verified server-side via webhooks
Secure Downloads: One-time download links with expiration
Input Validation: Form validation on client and server
CORS Protection: Configured API route protection
Environment Variables: Sensitive data stored securely

🛠️ Development

Adding a New Component

# Create component structure
src/components/ui/NewComponent/
├── index.ts
├── NewComponent.tsx
└── NewComponent.test.tsx

Code Style

Use TypeScript strictly
Follow ESLint configuration
Write meaningful component names
Add JSDoc comments for complex functions

Testing

# Run tests
npm test

# Test coverage
npm run test:coverage

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

Commit Convention

feat: New feature
fix: Bug fix
docs: Documentation
style: Code style
refactor: Code refactoring
test: Adding tests
chore: Maintenance

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support

Documentation: docs.kithub.example.com
Issues: GitHub Issues
Email: support@kithub.example.com
Twitter: @KithubStore

🙏 Acknowledgments

Next.js - The React framework
Tailwind CSS - Utility-first CSS framework
Razorpay - Payment processing
Lucide Icons - Beautiful icons
Vercel - Deployment platform

📊 Analytics Integration (Optional)

// Add to src/lib/analytics.ts
export function trackEvent(event: string, data?: any) {
  if (typeof window !== 'undefined') {
    // Google Analytics
    window.gtag?.('event', event, data);
    
    // Facebook Pixel
    window.fbq?.('track', event, data);
  }
}

Made with ❤️ for creators and designers

If you find this project helpful, please give it a ⭐ on GitHub!

🚀 Quick Deployment Links

Happy designing! 🎨 If you create amazing content with our PSDs, tag us with #MadeWithKithub

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
prisma		prisma
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
prisma.config.ts		prisma.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

kkhushie/kithub

Folders and files

Latest commit

History

Repository files navigation

🎨 Kithub - Premium PSD Marketplace

✨ Features

🎯 Core Features

🛠️ Technical Features

👥 User Experience

🏗️ Project Structure

🚀 Getting Started

Prerequisites

Installation

📦 Available Scripts

🔧 Configuration

Razorpay Setup

Adding Products

🌐 Deployment

Vercel (Recommended)

Environment Variables on Vercel

Other Platforms

💳 Payment Flow

📱 Pages Overview

1. Homepage (/)

2. Products (/products)

3. Product Detail (/products/[id])

4. Checkout (/checkout)

5. Success (/success)

6. Dashboard (/dashboard) - Optional

🎨 Design System

Colors

Typography

Components

🔒 Security Features

🛠️ Development

Adding a New Component

Code Style

Testing

🤝 Contributing

Commit Convention

📄 License

📞 Support

🙏 Acknowledgments

📊 Analytics Integration (Optional)

🚀 Quick Deployment Links

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

1. Homepage (`/`)

2. Products (`/products`)

3. Product Detail (`/products/[id]`)

4. Checkout (`/checkout`)

5. Success (`/success`)

6. Dashboard (`/dashboard`) - Optional

Packages