project-cb75f904
``` Build a full-stack Task Management Web App with the following: FRONTEND (React): - Login / Signup page with JWT authentication - Dashboard showing tasks in 3 columns: To Do, In Progress, Done - Add new task modal with: Title, Description, Priority (High/Medium/Low), Due Date - Edit and Delete task buttons - Filter tasks by priority and status - Responsive design (mobile + desktop) BACKEND (Node.js + Express): - REST API: POST /auth/register, POST /auth/login - CRUD endpoints: GET/POST/PUT/DELETE /tasks - JWT middleware for protected routes - User-scoped tasks (each user sees only their own tasks) DATABASE: - PostgreSQL with tables: users (id, email, password_hash), tasks (id, user_id, title, description, status, priority, due_date, created_at) DEPLOYMENT: - Dockerized - Deploy to Stage environment Keep it minimal but fully functional. No extra features beyond what is listed. ```
Comments (0)
Sign in to leave a comment
Project Tasks40
Define Database Schema
Design and implement the PostgreSQL database schema for users and tasks, ensuring user-specific task isolation.
Setup Docker Environment
Configure Docker for local development and staging deployment.
Implement CTASection for Landing
As a frontend developer, implement the CTASection for the Landing page. This section includes a call-to-action with a title, subtitle, and two buttons linking to the Signup and Login pages. Ensure the buttons are styled with primary and secondary classes and include an arrow icon for the primary button. Page access: shared by all personas (Standard Authenticated User).
Implement Navbar for Landing
As a frontend developer, implement the Navbar for the Landing page. The navbar includes a logo and links to the Landing, Signup, Login, and Dashboard pages. Implement a toggle button for mobile view to show/hide the navigation links. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardSidebar for Dashboard
As a frontend developer, implement the DashboardSidebar section which allows users to filter tasks by status and priority. This section includes interactive checkboxes for filtering and a mobile-friendly toggle for opening and closing the sidebar. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardControls for Dashboard
As a frontend developer, implement the DashboardControls section which includes a search input for filtering tasks by title, buttons for toggling between kanban and list views, a dropdown for sorting tasks, and a button for adding new tasks. This section handles various user interactions and state changes. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardKanbanColumns for Dashboard
As a frontend developer, implement the DashboardKanbanColumns section which organizes tasks into columns based on their status ('To Do', 'In Progress', 'Done'). This section dynamically renders tasks using the DashboardTaskCards component and provides options to edit or delete tasks. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardTaskCards for Dashboard
As a frontend developer, implement the DashboardTaskCards component which displays individual task details including title, description, priority, and due date. It includes actions for editing and deleting tasks, and visually indicates overdue tasks. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardPriorityChart for Dashboard
As a frontend developer, implement the DashboardPriorityChart section which visualizes task distribution by priority using a bar chart. This section uses useMemo for efficient data processing and dynamically updates based on task data. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardStatusChart for Dashboard
As a frontend developer, implement the DashboardStatusChart section which provides a donut chart visualization of task statuses ('To Do', 'In Progress', 'Done'). This section uses useMemo for data calculations and SVG for rendering the chart. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardCompletionMetric for Dashboard
As a frontend developer, implement the DashboardCompletionMetric section which displays the completion rate of tasks using a circular progress indicator. This section uses useMemo for calculating completion metrics and SVG for rendering the visual. Page access: shared by all personas (Standard Authenticated User).
Create Database Migrations
Develop migration scripts for setting up the initial database schema for users and tasks.
Implement Auth API
Develop REST API endpoints for user registration and login with JWT authentication.
Implement Task API
Develop CRUD API endpoints for managing tasks, ensuring user-specific task access.
Implement CI/CD Pipeline
Set up a CI/CD pipeline for automated testing and deployment.
Implement FeaturesSection for Landing
As a frontend developer, implement the FeaturesSection for the Landing page. This section displays a grid of feature cards, each with an icon, title, and description. The features include Kanban Board, Priority Levels, Smart Filtering, and Due Date Tracking. Page access: shared by all personas (Standard Authenticated User).
Implement Footer for Landing
As a frontend developer, implement the Footer for the Landing page. The footer includes branding, a tagline, and links to the Landing, Dashboard, Signup, and Login pages. Ensure the links are styled appropriately and the footer is responsive. Page access: shared by all personas (Standard Authenticated User).
Implement HeroSection for Landing
As a frontend developer, implement the HeroSection for the Landing page. This section features a 3D galaxy visualization using @react-three/fiber and @react-three/drei. Each star represents a task with hover effects and task details displayed using Html components. Page access: shared by all personas (Standard Authenticated User).
Implement HowItWorksSection for Landing
As a frontend developer, implement the HowItWorksSection for the Landing page. This section outlines three steps to using TaskGalaxy, each with a number, title, and description. Ensure the steps are displayed in a visually appealing manner. Page access: shared by all personas (Standard Authenticated User).
Implement StatsSection for Landing
As a frontend developer, implement the StatsSection for the Landing page. This section displays statistics such as 'Tasks Managed', 'Active Users', 'Productivity Boost', and 'Uptime'. Ensure the stats are presented in a grid layout. Page access: shared by all personas (Standard Authenticated User).
Implement Navbar for Signup
As a frontend developer, implement the Navbar section for the Signup page. This component includes a responsive navigation bar with a toggle button to open and close the menu. It features links to Landing, Signup, Login, and Dashboard pages. Ensure that links to restricted pages are conditionally shown based on user authentication status. This component may already exist from the Landing page. Page access: shared by all personas (Standard Authenticated User).
Develop JWT Middleware
Create middleware for JWT authentication to protect API routes.
Implement API Validation
Add validation for API inputs to ensure data integrity and security.
QA Task CRUD Operations
Verify the task management CRUD operations for correctness and user-specific access.
Implement SignupHero for Signup
As a frontend developer, implement the SignupHero section for the Signup page. This section includes a badge indicating 'Free Forever', a headline 'Join TaskGalaxy', and a subheadline encouraging users to sign up. Ensure the design is responsive and visually appealing. Page access: shared by all personas (Standard Authenticated User).
Implement SignupFormContainer for Signup
As a frontend developer, implement the SignupFormContainer section for the Signup page. This component wraps the form fields and actions, providing a title 'Create Your Account' and a subtitle. It serves as a container for the form elements. Page access: shared by all personas (Standard Authenticated User).
Implement SignupBenefitsSection for Signup
As a frontend developer, implement the SignupBenefitsSection for the Signup page. This section includes a headline 'Why Choose TaskGalaxy?' and a description highlighting the app's productivity features. Page access: shared by all personas (Standard Authenticated User).
Implement Footer for Signup
As a frontend developer, implement the Footer section for the Signup page. This component includes branding, navigation links, and copyright information. Ensure links to restricted pages are conditionally shown based on user authentication status. This component may already exist from the Landing page. Page access: shared by all personas (Standard Authenticated User).
Implement LoginFormCard for Login
As a frontend developer, implement the LoginFormCard section for the Login page. This component includes form fields for email and password, with validation logic using a regex for email format. It manages state for email, password, remember me option, and error messages. The form submission triggers the onLogin callback with the user's credentials. Ensure the form is accessible and provides feedback for validation errors. Page access: shared by all personas (Standard Authenticated User).
Integrate Task API
As a Tech Lead, verify the end-to-end integration between the Task Management frontend implementation and the Task API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Ensure Task Data Persistence
As a Backend Developer, ensure that task data is correctly persisted in the PostgreSQL database, including handling of user-specific task isolation and data integrity.
Test Task CRUD Operations
As a QA Engineer, develop and execute tests for the Task CRUD operations to ensure correctness, user-specific access, and data integrity.
Test Auth Flow
As a QA Engineer, develop and execute tests for the user registration and login flow to ensure secure authentication and correct JWT handling.
QA Authentication Flow
Test the user registration and login flow to ensure secure authentication.
Implement SignupFormFields for Signup
As a frontend developer, implement the SignupFormFields section for the Signup page. This component includes input fields for email, password, and confirm password, with validation and error handling. It features a password strength meter and a toggle button to show/hide the password. Page access: shared by all personas (Standard Authenticated User).
Implement SignupBenefitsCards for Signup
As a frontend developer, implement the SignupBenefitsCards section for the Signup page. This component displays a grid of benefit cards, each with an icon, title, and description. The cards highlight features like organizing tasks, tracking progress, and meeting deadlines. Page access: shared by all personas (Standard Authenticated User).
Implement LoginFormActions for Login
As a frontend developer, implement the LoginFormActions section for the Login page. This component includes a submit button that displays a loading spinner when the form is being submitted. It also provides a link to the Signup page for users who do not have an account. Ensure the button is disabled during loading to prevent multiple submissions. Page access: shared by all personas (Standard Authenticated User).
Implement DashboardHeader for Dashboard
As a frontend developer, implement the DashboardHeader section which displays a personalized greeting based on the time of day, the current date and time, and task statistics (total, on track, overdue) for the authenticated user. This section uses useState and useEffect hooks to update the time every second. Page access: shared by all personas (Standard Authenticated User).
Integrate Auth API
As a Tech Lead, verify the end-to-end integration between the Authentication frontend implementation and the Auth API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Implement SignupFormActions for Signup
As a frontend developer, implement the SignupFormActions section for the Signup page. This component includes a checkbox for terms acceptance, a submit button with loading state, and a redirect link to the login page. Ensure the submit button is disabled until terms are accepted and form is valid. Page access: shared by all personas (Standard Authenticated User).
Master Your Tasks.
Conquer Your Day.
Organize, prioritize, and track your tasks with an intuitive kanban board. Stay on top of deadlines and boost your productivity effortlessly.
Everything You Need to Stay Organized
Powerful task management tools designed to help you focus, prioritize, and accomplish more every single day.
Kanban Board
Visualize your workflow with three clear columns: To Do, In Progress, and Done. Drag tasks between columns as you make progress.
Priority Levels
Assign High, Medium, or Low priority to every task. Focus on what matters most and never let critical items slip through the cracks.
Smart Filtering
Filter tasks by priority level or status to quickly find what you need. Cut through the noise and stay focused on your goals.
Due Date Tracking
Set due dates for every task and stay ahead of deadlines. Visual indicators help you spot overdue items at a glance.
Three Steps to Peak Productivity
Getting started takes less than a minute. Here is how TaskGalaxy transforms the way you manage your work.
Create Your Account
Sign up in seconds with your email. No credit card required. Your personal workspace is ready the moment you log in.
Add Your Tasks
Create tasks with titles, descriptions, priority levels, and due dates. Organize them across To Do, In Progress, and Done columns.
Stay Organized
Filter by priority or status, move tasks between columns, and watch your productivity soar as you conquer your task list.
Trusted by Teams Everywhere
Join hundreds of users who have transformed their task management workflow with TaskGalaxy.
Ready to Take Control of Your Tasks?
Join TaskGalaxy today and experience a smarter way to manage your work. Free to start, no credit card required.
No comments yet. Be the first!