132 lines
4.0 KiB
Markdown
132 lines
4.0 KiB
Markdown
# Web Platform Documentation
|
|
|
|
> **Platform:** Web (React + Ionic + TypeScript)
|
|
> **Core Business Logic:** See `../../PRD.md`
|
|
|
|
This folder contains **web-specific implementation details** for the Karaoke App.
|
|
|
|
---
|
|
|
|
## 📁 File Structure
|
|
|
|
```
|
|
docs/platforms/web/
|
|
├── PRD-web.md # Web-specific implementation guide
|
|
└── README.md # This file - quick reference
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### **For AI-Assisted Development:**
|
|
1. **Read the main PRD:** `../../PRD.md` (core business logic)
|
|
2. **Read this web PRD:** `PRD-web.md` (web implementation details)
|
|
3. **Follow the implementation guide** in the main PRD
|
|
4. **Reference design assets:** `design/`
|
|
|
|
### **For Human Developers:**
|
|
1. **Review business requirements** in main PRD
|
|
2. **Study web implementation** patterns in `PRD-web.md`
|
|
3. **Set up development environment** using provided configs
|
|
4. **Follow component architecture** and state management patterns
|
|
|
|
---
|
|
|
|
## 📋 What's Included
|
|
|
|
### **PRD-web.md Contains:**
|
|
- **UI/UX Behavior** - Web-specific patterns and interactions
|
|
- **Component Architecture** - React/Ionic component structure
|
|
- **State Management** - Redux Toolkit implementation
|
|
- **Development Setup** - Project configuration and environment
|
|
- **Design Assets** - Web-specific visual references
|
|
- **Toolset Choices** - Technology rationale and migration notes
|
|
- **Implementation Notes** - Critical web-specific patterns
|
|
- **Migration Guide** - How to adapt to other platforms
|
|
|
|
### **Key Web Technologies:**
|
|
- **React 18** + **TypeScript** for component architecture
|
|
- **Ionic React** for mobile-first UI components
|
|
- **Redux Toolkit** for state management
|
|
- **Firebase Realtime Database** for backend
|
|
- **Vite** for build tooling
|
|
|
|
---
|
|
|
|
## 🔗 Cross-References
|
|
|
|
### **Main PRD Sections:**
|
|
- **Business Logic:** See `../../PRD.md#business-logic`
|
|
- **Data Models:** See `../../PRD.md#data-models`
|
|
- **User Roles:** See `../../PRD.md#user-roles`
|
|
- **Feature Specs:** See `../../PRD.md#feature-overview`
|
|
|
|
### **Design Assets:**
|
|
- **Web Mockups:** See `design/`
|
|
- **30+ Visual References** for all features
|
|
|
|
### **Implementation Guide:**
|
|
- **Core Requirements:** See `../../PRD.md#implementation-guide`
|
|
- **Web-Specific Details:** See `PRD-web.md#implementation-notes`
|
|
|
|
---
|
|
|
|
## 🛠️ Development Workflow
|
|
|
|
### **1. Setup Project:**
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Set up environment
|
|
cp .env.template .env.local
|
|
# Edit .env.local with your Firebase config
|
|
|
|
# Start development server
|
|
npm run dev
|
|
```
|
|
|
|
### **2. Follow Architecture:**
|
|
- **Components:** Use React functional components with TypeScript
|
|
- **State:** Use Redux Toolkit for global state
|
|
- **Styling:** Use Ionic components with custom CSS variables
|
|
- **Data:** Use Firebase Realtime Database with custom hooks
|
|
|
|
### **3. Reference Patterns:**
|
|
- **Firebase Integration:** See `PRD-web.md#firebase-integration`
|
|
- **Real-time Listeners:** See `PRD-web.md#real-time-listeners`
|
|
- **Error Handling:** See `PRD-web.md#error-handling`
|
|
|
|
---
|
|
|
|
## 🔄 Migration Paths
|
|
|
|
### **To Other Web Frameworks:**
|
|
- **Vue.js:** Replace React with Vue, Redux with Pinia
|
|
- **Svelte:** Replace React with Svelte, Redux with Svelte stores
|
|
- **Keep:** All business logic and Firebase integration
|
|
|
|
### **To Mobile Platforms:**
|
|
- **React Native:** Replace Ionic with React Native components
|
|
- **Native iOS/Android:** Replace React with native UI frameworks
|
|
- **Keep:** All business logic and Firebase integration
|
|
|
|
---
|
|
|
|
## 📚 Additional Resources
|
|
|
|
### **Documentation:**
|
|
- **Main PRD:** `../../PRD.md` - Core business logic
|
|
- **Design Assets:** `design/` - Visual references
|
|
- **Type Definitions:** `../../types.ts` - Data models
|
|
|
|
### **External Resources:**
|
|
- **Ionic React:** https://ionicframework.com/docs/react
|
|
- **Redux Toolkit:** https://redux-toolkit.js.org/
|
|
- **Firebase:** https://firebase.google.com/docs
|
|
- **React:** https://react.dev/
|
|
|
|
---
|
|
|
|
_This document provides web-specific implementation details. For core business logic and platform-agnostic requirements, see the main `../../PRD.md`._ |