🚀 M.Y.F. Frontend - Project Management System

The client-side application for Manage Your Flow, a professional task and project tracking system. This project focuses on a seamless user experience, complex state management, and enterprise-level UI components.

Note

This frontend communicates with a NestJS API. For the best experience, ensure the backend is active. Initial loading might take a moment due to free-tier hosting on Render

---

🖼️ Preview

---

✨ Key Frontend Features

• Forms: Robust project and task creation using React Hook Form and Zod validation.
• Optimistic Updates: Using TanStack Query to provide an instant UI response while syncing with the server.
• Authentication Flow: Secure JWT and protected routes.
• Theming & UI: Built with Shadcn/ui and Tailwind CSS for a consistent, accessible, and responsive design.

🛠 Tech Stack

• Core: React + TypeScript + Vite
• UI Components: Shadcn/ui (Radix UI under the hood)
• Styling: Tailwind CSS
• Server State: TanStack Query (React Query) — for caching, synchronization, and error handling.
• Form Management: React Hook Form + Zod.
• Icons: Lucide React.

🏗 Frontend Architecture

The project is built using Feature-Sliced Design (FSD). This architectural methodology allows for a clear separation of concerns, making the codebase scalable, easy to test, and maintain.

Layers:

• app/ - Application logic: providers, global styles, and routing setup.
• pages/ - Composition layer that assembles widgets into full pages
• widgets/ - Large self-contained components that combine features
• features/ - User-facing actions that carry business value
• entities/ - Business logic and data models for core objects:
  • auth: Authentication state and profile logic
  • project: Project-specific data, types, and hooks
  • task: Task-related state management and components
• shared/ - Reusable, project infrastructure:
  • ui/: Design system based on Shadcn/ui
  • api/: Axios instance, interceptors, and base configurations
  • lib/: Utils, shared hooks, and context providers