🚀 Pocket PA - Your TikTok-Style Personal Assistant

A sleek, modern personal productivity app built with Lynx React that brings TikTok-inspired design to personal organization. Manage your tasks, calendar, finances, and health tracking all in one beautiful, animated interface.

✨ Features

🏠 Smart Dashboard

• Real-time clock display
• Quick stats overview (tasks, calories, expenses, habits)
• Motivational quotes to keep you inspired
• Quick action buttons for common tasks

📱 TikTok-Inspired Design

• Smooth animations and transitions
• Gradient backgrounds and glowing effects
• Modern glassmorphism UI elements
• Responsive mobile-first design

🎯 Core Modules (Coming Soon)

• 📅 Calendar: Event scheduling and management
• ✅ Tasks: Todo list with priority tracking
• 💰 Finance: Expense tracking and budgeting
• 🍎 Calories: Nutrition and meal logging

🛠️ Tech Stack

• Framework: Lynx React - Cross-platform mobile development
• Language: TypeScript for type safety
• Styling: CSS with modern animations and effects
• Build Tool: Rspeedy (Rsbuild + Rspack)
• Testing: Vitest with React Testing Library

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Lynx Explorer app (for mobile testing)

Installation

# Clone the repository
git clone <your-repo-url>
cd pocket-pa

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Development Workflow

1. Development: npm run dev starts the dev server with hot reload
2. Testing: Scan the QR code with Lynx Explorer to test on mobile
3. Building: npm run build creates optimized production bundle

📱 Mobile Testing

The app generates a QR code when running npm run dev. Simply:

1. Install Lynx Explorer on your mobile device
2. Scan the QR code displayed in terminal
3. Test the app directly on your phone

🎨 Design Philosophy

TikTok Meets Productivity

• Visual Appeal: Gradient backgrounds, smooth animations, and modern UI
• Engagement: Interactive elements with hover effects and transitions
  
• Simplicity: Clean, intuitive navigation with emoji-based icons
• Performance: Optimized animations and efficient rendering

📁 Project Structure

src/
├── components/
│   ├── ComingSoon.tsx      # Placeholder for upcoming features
│   ├── SimpleHomePage.tsx  # Main dashboard component
│   └── SimpleNavigation.tsx # Bottom navigation bar
├── __tests__/
│   └── index.test.tsx      # Component tests
├── App.tsx                 # Main app component
├── App.css                 # Global styles and animations
└── index.tsx              # App entry point

🧪 Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

🔧 Configuration Files

• lynx.config.ts - Lynx/Rsbuild configuration
• tsconfig.json - TypeScript configuration
  
• vitest.config.ts - Test configuration
• package.json - Dependencies and scripts

🎯 Roadmap

Phase 1: Foundation ✅

• [x] Basic app structure
• [x] Navigation system
• [x] Dashboard with stats
• [x] TikTok-inspired styling

Phase 2: Core Features 🚧

• [ ] Task management system
• [ ] Calendar integration
• [ ] Expense tracking
• [ ] Calorie logging

Phase 3: Advanced Features 📋

• [ ] Data persistence
• [ ] Notifications
• [ ] Habit tracking
• [ ] Analytics dashboard

Phase 4: Polish 🎨

• [ ] Advanced animations
• [ ] Themes and customization
• [ ] Performance optimization
• [ ] Accessibility improvements

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• Built with Lynx React for cross-platform mobile development
• Inspired by TikTok's engaging user interface design
• Icons and emojis for intuitive navigation

---

Made with ❤️ for productivity enthusiasts who love beautiful design

Built With

• css
• lynx
• rspeedy
• typescript
• vite