Bounty: Add Documentation for React.js Frontend (#56)

README.md

@@ -1,41 +1,134 @@
-# vite React TypeScript tailwindcss starter
+# Kleo Connect — React Frontend
 
-Template for vite, React + tailwindcss + TypeScript projects with some tools preconfigured.
+A community engagement platform where users earn rewards for contributing data, content, and social engagement. Built with React, TypeScript, and Vite.
 
-## About
+## Tech Stack
 
-Template for vite, React + tailwindcss + TypeScript projects with some tools preconfigured.
+| Technology | Purpose |
+|------------|---------|
+| React 18 | UI framework |
+| TypeScript 4.9 | Type safety |
+| Vite 4 | Build tool & dev server |
+| Tailwind CSS 3 | Styling |
+| React Router 6 | Client-side routing |
+| Vitest | Unit testing |
+| ESLint + Prettier | Code quality |
 
-![Screenshot](assets/screenshot.png)
+## Quick Start
 
-### Libraries
+```bash
+# 1. Install dependencies
+npm install
+
+# 2. Copy environment variables
+cp .env.example .env
+# Fill in your API keys and endpoints
+
+# 3. Start development server
+npm run dev
+# Opens at http://localhost:5173
+
+# 4. Run tests
+npm test
+
+# 5. Build for production
+npm run build
+```
+
+## Project Structure
+
+```
+src/
+├── App.tsx                 # Main app component with routing
+├── main.tsx                # Entry point
+├── config.ts               # App configuration & constants
+├── interface.ts            # Shared TypeScript interfaces
+├── utils.ts                # Utility functions
+│
+├── assets/                 # SVGs, images, fonts
+├── stylesheets/            # CSS files
+│
+├── common/                 # Shared components
+│   ├── charts/             # RadarChart, MultiProgressBar
+│   ├── components/         # Navbar, Accordion, Alerts, KleoMate
+│   ├── constants/          # BrowsingHistory, Events, SignupData, UrlData, Website
+│   └── hooks/              # useBodyScroll, useDebounce, useFetch, usePhantomWallet
+│
+├── pages/                  # Page-level components
+│   ├── dashboard/          # Main dashboard (Leaderboard, MyData, Referrals, Milestones)
+│   ├── profile/            # User profile page
+│   ├── signup/             # Signup flow with Authentication
+│   └── PrivacyPolicy.tsx   # Privacy policy page
+│
+└── common/components/
+    └── KleoMate.jsx        # Inline assistant/mascot component
+```
+
+## Key Components
+
+### Pages
+
+| Route | Component | Description |
+|-------|-----------|-------------|
+| `/` | Dashboard | Main dashboard with leaderboard, data stats, referral table, milestones |
+| `/profile` | Profile | User profile with settings and activity |
+| `/signup` | Signup | Authentication via Particle Network or Phantom wallet |
+| `/privacy-policy` | PrivacyPolicy | Legal/privacy information |
+
+### Dashboard Sections
+
+- **Leaderboard** — Top contributors ranked by points
+- **My Data** — User-contributed data overview with quality scoring
+- **Points & Data** — Points earned vs data contributed
+- **Referrals** — Referral table with tracking
+- **Milestones** — Achievement tracking with circular progress bars
+- **Snapshot** — Historical data snapshots
+- **Privacy** — Privacy controls
+
+### Authentication
+
+Supports two auth methods:
+1. **Particle Network** — Web2+Web3 hybrid auth (email, social, phone)
+2. **Phantom Wallet** — Solana wallet connection via `usePhantomWallet` hook
+
+### Custom Hooks
+
+| Hook | Description |
+|------|-------------|
+| `usePhantomWallet` | Solana Phantom wallet connection state |
+| `useFetch` | Generic data fetching with loading/error states |
+| `useDebounce` | Debounces rapidly changing values |
+| `useBodyScroll` | Controls body scroll locking for modals |
+
+## Configuration
 
-- [React 18](https://reactjs.org/)
-- [React Router 6](https://reactrouter.com)
-- [tailwindcss 3](https://tailwindcss.com/)
-  - [tailwindcss forms plugin](https://tailwindcss-forms.vercel.app/)
-- [TypeScript 4.9.5](https://www.typescriptlang.org/)
-- [vite 4](https://vitejs.dev/)
-- [vitetest](https://vitest.dev/)
+Edit `src/config.ts` for app-wide settings:
+- API endpoints
+- Feature flags
+- Contract addresses
 
-### Tools
+## Environment Variables
 
-- [commitlint 17](https://commitlint.js.org)
-- [Conventional Commits 1](https://www.conventionalcommits.org)
-- [editorconfig](https://editorconfig.org/)
-- [eslint 8](https://eslint.org/)
-- [husky 8](https://typicode.github.io/husky/#/)
-- [Prettier 2](https://prettier.io/)
-- [VS Code settings](https://code.visualstudio.com/)
+| Variable | Description |
+|----------|-------------|
+| `VITE_API_URL` | Backend API endpoint |
+| `VITE_PARTICLE_APP_ID` | Particle Network app ID |
+| `VITE_PARTICLE_CLIENT_KEY` | Particle Network client key |
+| `VITE_SOLANA_RPC` | Solana RPC endpoint |
 
-## Usage
+## Contributing
 
-Create a new project from this template by clicking the "Use this template" button:
+1. Fork the repo
+2. Create a feature branch: `git checkout -b feature/my-feature`
+3. Commit with conventional commits: `git commit -m "feat: add new feature"`
+4. Push and open a PR
 
-![](assets/template-usage.png)
+## Scripts
 
 ```bash
-yarn
-yarn dev
-yarn test
+npm run dev       # Development server
+npm run build     # Production build
+npm test          # Run tests
+npm run lint      # ESLint check
+npm run preview   # Preview production build
 ```