Skip to content

Instantly share code, notes, and snippets.

@Ocean-Moist

Ocean-Moist/project_plan.md Secret

Created October 22, 2024 08:06
Show Gist options
  • Save Ocean-Moist/57c8b3d1bc8d6003f7c81c16eda55284 to your computer and use it in GitHub Desktop.
Save Ocean-Moist/57c8b3d1bc8d6003f7c81c16eda55284 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
project_plan.md

plan.md

Project Overview:

We are developing a frontend application called TaskMaster, a simple and intuitive task management tool. The technologies used are:

  • Next.js 14 with the App Router for server-side rendering and routing.
  • TypeScript for static typing and improved developer experience.
  • Zustand for state management.
  • Tailwind CSS for styling, following the design specifications in UX_Design.md.

The application will focus on simplicity, excluding features like authentication and multi-user support, and strictly adhere to the design outlined in UX_Design.md. Since this is an MVP, we won't focus on accessibility.

Architectural Framework:

  1. Project Structure:

    .
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
├── tsconfig.json
├── src
│   ├── app
│   │   ├── favicon.ico
│   │   ├── fonts
│   │   │   ├── CustomFont-Regular.woff
│   │   │   └── CustomFont-Bold.woff
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── tasks
│   │   │   ├── page.tsx
│   │   │   ├── components
│   │   │   │   ├── Sidebar.tsx
│   │   │   │   ├── TaskList.tsx
│   │   │   │   ├── TaskItem.tsx
│   │   │   │   ├── TaskDetailView.tsx
│   │   │   │   ├── AddTaskModal.tsx
│   │   │   │   ├── EditTaskModal.tsx
│   │   │   │   ├── TaskCompletionView.tsx
│   │   │   │   └── OverviewScreen.tsx
│   │   │   └── styles
│   │   │       └── tasks.module.css
│   ├── components
│   │   ├── LandingPage.tsx
│   │   └── common
│   │       ├── Header.tsx
│   │       ├── Footer.tsx
│   │       └── Button.tsx
│   ├── hooks
│   │   └── useStore.ts
│   └── lib
│       ├── api.ts
│       └── types.ts
└── UX_Design.md

  2. Routing Structure:

    • /: Landing Page
      • Component: LandingPage.tsx
    • /tasks: Task Dashboard
      • Component: TaskDashboard (located in src/app/tasks/page.tsx)

  3. Component Breakdown:

    • LandingPage.tsx:

      • Displays the landing page as per UX design.
      • Contains an input field for the user to enter their name and a "Get Started" button.
      • On submission, navigates to /tasks.

    • TaskDashboard (page.tsx in /tasks):

      • Main dashboard displaying the user's tasks and overall progress.
      • Includes:
        • Sidebar.tsx: Provides navigation options such as "All Tasks", "Completed Tasks", and "Pending Tasks".
        • TaskList.tsx: Lists all tasks with the ability to mark as complete, edit, or delete.
        • TaskItem.tsx: Represents individual tasks with status indicators and action buttons.

    • TaskDetailView.tsx:

      • Modal overlay that displays detailed information about a selected task.
      • Allows users to view and edit task details.

    • AddTaskModal.tsx:

      • Modal for adding new tasks.
      • Includes input fields for task title, description, due date, and priority.

    • EditTaskModal.tsx:

      • Modal for editing existing tasks.
      • Similar structure to AddTaskModal.tsx.

    • TaskCompletionView.tsx:

      • Overlay view that displays when a task is marked as completed.
      • Shows a congratulatory message and options to view other tasks.

    • OverviewScreen.tsx:

      • Provides a summary of tasks, including statistics on completed and pending tasks.
      • Allows the user to add new tasks or navigate to different task views.

    • Common Components:

      • Header.tsx and Footer.tsx: Consistent header and footer across pages.
      • Button.tsx: Reusable button component with styling consistent with the design.

  4. State Management with Zustand (useStore.ts):

    • Task State:

      • Stores task details, including the list of tasks and their statuses.
      • Functions to add, update, delete, and toggle completion of tasks.

    • UI State:

      • Controls the visibility of modals and overlays.
      • Manages loading states and error messages.

    • Filter Management:

      • Functions to filter tasks based on status (completed, pending).

  5. API Integration (api.ts):

    • Placeholder functions to simulate API interactions.
    • All data interactions update the global state.
    • Handle errors gracefully and update the UI accordingly.

  6. Styling with Tailwind CSS:

    • Apply the color palette and typography from UX_Design.md.
    • Use Tailwind utility classes for styling components.
    • Customize tailwind.config.ts to include custom colors and fonts as specified.

  7. Fonts and Assets:

    • Ensure custom fonts are correctly loaded and applied.
    • Place font files in src/app/fonts and import them in globals.css.
    • Include any additional assets (e.g., icons) in the appropriate directories.

  8. Error Handling:

    • Display user-friendly error messages for data interactions.
    • Use modals or toast notifications to inform users of issues.
    • Validate user inputs in forms and provide immediate feedback.

  9. Drag-and-Drop Functionality:

    • Implement using a library like Dnd Kit.
    • Ensure tasks can be reordered in the UI.
    • Update the state with the new order.

  10. Modal and Overlay Behavior:

    • Implement modals according to the design.
    • Ensure the background is appropriately dimmed when modals are open.
    • Modals should be dismissible by clicking outside or pressing the escape key.

  11. Responsive Design:

    • Ensure the application is responsive across various screen sizes.
    • Follow the design guidelines for mobile (sm: prefixes in Tailwind).

  12. Data Flow and User Interaction:

    • Landing Page Interaction:

      • User enters their name and clicks "Get Started".
      • Application navigates to the Task Dashboard.

    • Task Dashboard Interaction:

      • Display user's tasks and allow management.
      • Users can add new tasks, edit existing ones, mark as complete, and delete tasks.
      • Interactions update the global state.

    • Task Management:

      • Adding Tasks:
        • User clicks "Add Task" to open AddTaskModal.tsx.
        • Upon submission, the new task is added to the state.
      • Editing Tasks:
        • User selects a task to open EditTaskModal.tsx.
        • Changes are saved to the state.
      • Completing Tasks:
        • User marks a task as complete.
        • TaskCompletionView.tsx is displayed.

  13. Project Completion:

    • When all tasks are completed, display a congratulatory message in OverviewScreen.tsx.
    • Allow the user to add new tasks or return to the landing page.

  14. Deployment Preparation:

    • Ensure environment variables (if any) are correctly set.
    • Optimize images and assets.
    • Build the application and test for any build-time errors.
    • Prepare for deployment to platforms like Vercel.

Implementation Steps:

  1. Set Up Pages and Routes:

    • Configure the Next.js App Router with the required routes.
    • Set up the initial page components (LandingPage.tsx and TaskDashboard).

  2. Implement Global State Management:

    • Create useStore.ts using Zustand.
    • Define the state slices for task data and UI state.

  3. Develop UI Components:

    • Build the common components (Header, Footer, Button).
    • Develop the Landing Page UI according to the design.
    • Implement the Task Dashboard layout.
    • Create individual components for tasks and modals.

  4. Integrate Data Handling:

    • Use api.ts as a placeholder for data interactions.
    • Ensure that the state is updated accordingly after each interaction.

  5. Apply Styling:

    • Use Tailwind CSS classes to style components.
    • Ensure that the styling matches the specifications in UX_Design.md.

  6. Add Interaction Logic:

    • Implement form submissions and handle user inputs.
    • Add drag-and-drop functionality to the task list using Dnd Kit.
    • Manage modal open/close states and form validations.

  7. Test Application Flow:

    • Manually test each user interaction to ensure it behaves as expected.
    • Check state updates and data persistence.

Notes for the Development Team:

  • Consistency: Follow the project structure and naming conventions provided.
  • Simplicity: Do not add features beyond the defined scope.
  • Adherence to Design: Stick closely to UX_Design.md for styling and layout.
  • No Testing Required: Automated testing is not necessary for this project.
  • Fluid Plan: Feel free to adjust the plan as needed during development.
  • External Libraries: Use external libraries as needed.

By following this plan, the team should be able to develop the application efficiently, ensuring all components work together seamlessly to meet the project's objectives.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment