Listify

Listify is a comprehensive project management and productivity application designed to help individuals and teams organize tasks, manage projects, and track progress efficiently. It features a dual-workspace architecture that separates personal productivity tools from team collaboration features.

Tech Stack

Frontend

• Framework: React 18
• Build Tool: Vite
• Language: TypeScript
• State Management: Redux Toolkit (with Persist)
• Routing: React Router DOM v7
• UI Components: Material UI (MUI) v6
• Styling: Tailwind CSS v4, Emotion
• Animations: Framer Motion
• Data Visualization: Recharts
• Form Handling: React Hook Form + Zod
• Drag and Drop: React DnD
• Date Handling: Day.js

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: PostgreSQL
• ORM: Prisma
• Authentication: JWT (JSON Web Tokens)
• Security: Helmet, Bcrypt, Express Rate Limit
• Validation: Express Validator

Features

Authentication & Security

• Secure user registration and login
• JWT-based authentication with refresh token rotation
• Role-based access control for team resources
• Protected routes ensuring data security

Personal Workspace

• Dashboard: Overview of personal activities and metrics.
• Projects: Create, update, and manage personal projects with detailed views.
• Tasks: Individualized task management for personal goals.
• Notes: Rich text note-taking capabilities with categorization.
• Timesheet: Track time spent on various personal activities.

Team Workspace

• Team Management: Create teams and manage settings.
• Member Management: Invite users, manage roles (Owner, Admin, Member, Viewer), and handle invitations.
• Team Projects: Collaborative project management specific to teams.
• Team Tasks: Assignable tasks within team projects.
• Sprints: Agile sprint planning and tracking.
• Analytics: Visual insights into team performance and project progress.

General Features

• Notifications: System for alerting users of important updates.
• Global Search: Find tasks and projects across workspaces.
• Responsive Design: Optimized for various screen sizes.
• Theme Support: Toggle between light and dark modes.

Current Project Status

Fully Implemented (Frontend & Backend)

• User Authentication: Complete Sign In and Sign Up flows with JWT and security practices.
• Personal Projects: Full CRUD functionality for personal projects, including detailed views.
• Personal Notes: capabilities to create and view notes (utilizing NoteCard components).
• Navigation: structured routing for both Personal and Team workspaces.

Backend Ready (Frontend Pending)

These features have fully implemented controllers, services, and database schemas but require Frontend UI implementation:

Team Workspace

• Team Management: Logic for creating teams and fetching team details exists (teamControllers.ts).
• Team Projects: API endpoints for creating and listing team projects (teamProjectControllers.ts) are ready, but the frontend is currently a placeholder.
• Team Tasks: Backend logic for team tasks (teamTaskControllers.ts) is complete; frontend integration is pending.
• Member Management: Backend support for inviting users and managing roles (teamControllers.ts).
• Invitations: Logic for handling team invites (Accept/Reject) is in place.
• Team Analytics & Sprints: Database support exists, but UI implementation is needed.

Personal Workspace

• Personal Tasks: Standalone task management logic (userTaskController.ts) exists, but the main PersonalTasks page is a placeholder.
• Timesheet: Database schema (TimeEntry) and backend support are available, but the PersonalTimesheet UI is not yet developed.

Installation

1. Clone the repository

   git clone <repository-url>
   cd Listify

2. Setup Backend

   cd server
   npm install
   # Create a .env file based on your configuration (requires DATABASE_URL, JWT_SECRET, etc.)
   # Run Prisma migrations
   npx prisma migrate dev
   # Start the server
   npm run dev

3. Setup Frontend

   cd client
   npm install
   # Start the development server
   npm run dev

Future Enhancements

• Real-time Collaboration: Implementation of WebSockets for live updates on tasks and comments.
• Advanced Reporting: Exportable reports for project status and time tracking.