https://github.com/zenpai6996/flowstate-frontend
Frontend for my project manager app
https://github.com/zenpai6996/flowstate-frontend
reactrouterv7 tailwindcss typescript zod
Last synced: 23 days ago
JSON representation
Frontend for my project manager app
- Host: GitHub
- URL: https://github.com/zenpai6996/flowstate-frontend
- Owner: zenpai6996
- License: mit
- Created: 2025-06-05T04:32:20.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-21T04:44:16.000Z (11 months ago)
- Last Synced: 2025-06-27T17:05:23.869Z (11 months ago)
- Topics: reactrouterv7, tailwindcss, typescript, zod
- Language: TypeScript
- Homepage: https://flowstate-omega.vercel.app
- Size: 6.08 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Streamline your workflow, boost productivity, and achieve that perfect flow state with our intuitive project management platform.
**[🚀 Live Demo](https://flowstate-omega.vercel.app/)** •
**[🐛 Report Bug](https://github.com/zenpai6996/FlowState-Frontend/issues)** •
**[💡 Request Feature](https://github.com/zenpai6996/FlowState-Frontend/issues)**
[](https://github.com/zenpai6996/FlowState-Backend)
## ✨ 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**
```bash
git clone https://github.com/zenpai6996/FlowState-Frontend.git
cd FlowState-Frontend
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Set up environment variables**
```bash
cp .env.example .env.local
```
Update the `.env.local` file with your configuration:
```env
VITE_API_BASE_URL=http://localhost:5000/api
VITE_APP_NAME=FlowState
```
4. **Start the development server**
```bash
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](LICENSE) file for details.
---
⭐ If you found this project helpful, please give it a star!
Crafted with 💛 by Souharda