Focus Flow

A React-based productivity application built with TypeScript and Vite to help users manage their focus and productivity through intuitive dashboards, charts, and user management.

Features

• 📊 Interactive Dashboard
• 📈 Performance Charts & Analytics
• 👥 User Management System
• 🔐 Protected Routes & Authentication
• 📱 Responsive Design
• 🌐 Google Authentication Integration
• 👤 User Profile Management
• 📰 News Integration

Tech Stack

• ⚛️ React 18
• 📝 TypeScript
• ⚡ Vite
• 🎨 Modern UI Components
• 🔒 Context API for State Management
• 📊 Data Visualization
• 🛣️ React Router for Navigation

Prerequisites

• Node.js 18 or higher
• pnpm 8 or higher

Getting Started

1. Clone the repository:

git clone https://github.com/roshni73/focus-flow.git
cd focus-flow

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open http://localhost:3000 in your browser

Docker Support

Prerequisites

• Docker installed on your system
• Docker Buildx (for multi-platform builds)

Building and Running with Docker

1. Build the Docker image using Buildx:

docker buildx build -t focus-flow .

2. Run the container:

docker run -p 3000:80 focus-flow

The application will be available at http://localhost:3000

Docker Commands

• Build multi-platform image: docker buildx build --platform linux/amd64,linux/arm64 -t focus-flow .
• Run container: docker run -p 3000:80 focus-flow
• Stop container: docker stop focus-flow
• Remove container: docker rm focus-flow
• Remove image: docker rmi focus-flow

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Run ESLint

Project Structure

src/
├── assets/        # Icons and static assets
├── components/    # Reusable UI components
├── contexts/      # React Context providers
├── layout/        # Layout components
├── route/         # Route configurations
├── utils/         # Utility functions
└── views/         # Page components

Key Features Breakdown

Authentication

• Protected routes implementation
• Google OAuth integration
• Session management

Dashboard

• Interactive data visualization
• Performance metrics
• User activity tracking

Profile Management

• User profile customization
• Password management
• Activity history

Charts and Analytics

• Performance tracking
• Data visualization
• Progress metrics

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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.

Support

For support, please open an issue in the GitHub repository.