Streamline your workflow, boost productivity, and achieve that perfect flow state with our intuitive project management platform.

🚀 Live Demo • 🐛 Report Bug • 💡 Request Feature

✨ Features

🎯 Core Functionality

Feature	Description
🏠 Project Dashboard	Get a bird's-eye view of all your projects
✅ Task Management	Create, assign, and track tasks with ease
👥 Team Collaboration	Real-time updates and team communication
📊 Progress Tracking	Visual progress indicators and completion metrics
⏰ Deadline Management	Never miss important deadlines again

🔥 Advanced Features

Feature	Description
📋 Kanban Boards	Visualize your workflow with drag-and-drop boards
⏱️ Time Tracking	Monitor time spent on tasks and projects
📢 Activity Feed	Stay updated with real-time project activities
🔧 Custom Workflows	Tailor the system to your team's needs

💎 User Experience

Feature	Description
📱 Responsive Design	Works seamlessly on desktop, tablet, and mobile
🎨 Multiple Themes	Choose your preferred theme
🎯 Intuitive Interface	Clean, modern design for maximum productivity
⚡ Fast Performance	Optimized for speed and efficiency

---

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• Styling: Tailwind CSS + Custom Components
• Build Tool: Vite for lightning-fast development
• State Management: React Context API / Redux Toolkit
• Routing: React Router v6
• HTTP Client: Axios for API communication
• Form Handling: React Hook Form with Zod validation
• Icons: Lucide React / Heroicons
• Animations: Framer Motion

---

🏗️ Project Structure

FlowState-Frontend/
├── .react-router/         # React Router cache
├── app/                   # Main app directory
│   ├── assets/           # Static assets (images, icons, etc.)
│   ├── components/       # Reusable UI components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility libraries
│   ├── provider/         # Context providers
│   ├── routes/           # Route definitions
│   ├── types/            # TypeScript type definitions
│   ├── welcome/          # Welcome page components
│   ├── app.css          # Global app styles
│   ├── root.tsx         # Root component
│   └── routes.ts        # Route configuration
├── public/              # Public static files
├── .env                 # Environment variables
├── .gitignore           # Git ignore file
├── banner1.svg          # Project banner
├── components.json      # Component configuration
├── LICENSE              # License file
├── package-lock.json    # Lock file
├── package.json         # Package configuration
├── react-router.config.ts # React Router configuration
├── README.md            # Documentation
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite build configuration

---

📸 Screenshots

Landing	Dashboard

Workspace	Projects

Tasks	Kanban

---

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/zenpai6996/FlowState-Frontend.git
   cd FlowState-Frontend

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env.local

   Update the .env.local file with your configuration:

   VITE_API_BASE_URL=http://localhost:5000/api
   VITE_APP_NAME=FlowState

4. Start the development server

   npm run dev
   # or
   yarn dev

5. Open your browser

   Navigate to http://localhost:5173 to see the application running.

---

🎨 Design System

FlowState follows a consistent design system with:

• Colors: Modern palette with primary, secondary, and accent colors
• Typography: Clear hierarchy with readable fonts
• Spacing: Consistent spacing scale using Tailwind CSS
• Components: Reusable components with consistent styling
• Icons: Consistent icon set from Lucide React

---

📱 Mobile Support

FlowState is fully responsive and provides an excellent experience across all devices:

• Desktop: Full-featured interface with advanced functionality
• Tablet: Optimized layout for touch interactions
• Mobile: Streamlined interface with essential features

---

🤝 Contributing

We welcome contributions! Please follow these steps:

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.

---

⭐ If you found this project helpful, please give it a star!

Crafted with 💛 by Souharda