Zello is a modern project management system inspired by tools like Trello and Jira. The frontend application provides an intuitive interface for managing projects, tasks, and team collaboration, built with React, TypeScript, and modern web technologies.
- Application is live and can be accessed here 🌐 - https://zello-frontend.onrender.com
- Short Demo 🎥 - https://vimeo.com/1050608373?share=copy
- Framework: React with TypeScript
- State Management:
- TanStack Query for server state
- Zustand for client state
- Styling: Tailwind CSS with Shadcn UI components
- Form Handling: React Hook Form with Zod validation
- API Integration: Axios with TypeScript
- Authentication: JWT-based auth with refresh token mechanism
- Backend API: C#, PostgreSQL, EF Core, ASP.NET
- User authentication (login/register)
- Workspace management
- Project creation and management
- Task tracking with Kanban boards
- Team collaboration with comments
- User feedback and system awareness
- Type-safe API integration with Zod schemas
- Error boundary implementation
- Form validation with schema enforcement
- Responsive design for all devices (⏰in-progress)
- Loading states and skeleton screens
- Centralized error handling
- API error standardization through interceptors
sequenceDiagram
participant C as 🖥️ UI Component
participant F as 🪝 Feature Hook
participant Q as 🔄 Query Client
participant S as 🛍️ Service Layer
participant A as 🔀 API Layer
participant B as 🚀 Backend
Note over C,B: Data Fetching Flow
C->>F: Call Feature Hook
F->>Q: Execute Query
Q->>S: Call Service
S->>A: Make Request
A->>B: HTTP Request
B-->>A: Response
A->>S: Transform Data
S->>Q: Return Typed Data
Q-->>F: Cache & Return
F-->>C: Render Data
Note over C,B: Data Mutation Flow
C->>F: Trigger Mutation
F->>Q: Execute Mutation
Q->>S: Call Service
S->>A: Make Request
A->>B: HTTP Request
B-->>A: Response
A->>S: Transform Data
S->>Q: Return & Invalidate
Q-->>F: Update Cache
F-->>C: Update UI
src/
├── api/ # API service layer
├── components/ # Reusable UI components
├── features/ # Feature-specific logic
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── pages/ # Route components
├── schemas/ # Zod validation schemas
├── store/ # Zustand state management
└── types/ # TypeScript type definitions
- Node.js v18 or higher
- npm or yarn
- Git
- Clone the repository:
git clone [repository-url]
cd zello-frontend- Install dependencies:
yarn install- Set up environment variables:
cp .env.example .env- Start development server:
yarn devVITE_API_URL=http://localhost:5000- Use Zod schema for all data coming from backend
- Follow ESLint and Prettier configurations
- Keep components small and focused
- Use type-based folder structure
- Use TanStack Query for server state
- Use Zustand for global client state
- Use React state for local component state
- Write unit tests for critical functionality
- Test custom hooks and utilities
- Ensure type safety with TypeScript
npm run dev- Start development servernpm run build- Build for productionnpm run lint- Run ESLint- Write unit tests for critical functionality
- Test custom hooks and utilities
- Ensure type safety with TypeScript
- Implement optimistic updates for better UX in mutations
- Add comprehensive unit testing with Vitest
- Implement drag and drop syncing with API for Kanban board Tasks
- Add end-to-end testing with Cypress
- Improve responsive design for mobile devices
- Improve workspace dashboard and show more anlytics
- Develop comment creating and management
- Implement additional CRUD operations to the entities (Workspaces, Project, List, Tasks and Comments) for user to delete and edit
- Add data filtering for task page
- Implement code splitting for better load times
- Optimize bundle size