README.md

Curation Bot Frontend

React-based frontend application for the Curation Bot platform

Table of Contents

• Architecture Overview
  • Tech Stack
  • Application Structure
• Key Features
  • Submission Interface
  • Real-time Updates
  • Responsive Design
• Development
  • Prerequisites
  • Local Setup
• Backend Integration

Architecture Overview

Tech Stack

The frontend leverages modern web technologies for optimal performance and developer experience:

• Framework: React + TypeScript

  • Component-based architecture
  • Strong type safety
  • Excellent ecosystem support

• Build Tool: Vite

  • Lightning-fast development server
  • Optimized production builds
  • Modern development experience

• Styling: Tailwind CSS

  • Utility-first CSS framework
  • Highly customizable
  • Zero runtime overhead

Application Structure

src/
├── assets/     # Static assets
├── components/ # React components
├── types/      # TypeScript definitions
└── App.tsx     # Root component

Key Features

Submission Interface

The submission system provides:

• Intuitive submission form
• Real-time validation
• Status tracking
• Moderation feedback

Real-time Updates

• Live submission status updates
• Dynamic content loading
• Optimistic UI updates

Responsive Design

• Mobile-first approach
• Adaptive layouts
• Cross-browser compatibility

Development

Prerequisites

• Node.js 18+
• Bun (recommended) or npm
• Backend service running

Local Setup

1. Install dependencies:

bun install

2. Start development server:

bun run dev

The app will be available at http://localhost:5173

Backend Integration

The frontend communicates with the backend service through a RESTful API:

• Submission handling via /submit endpoint
• Content retrieval through /submissions
• Real-time updates using polling (future: WebSocket support)

See the Backend README for detailed API documentation.