CWAY Cloud-based Task Manager Tutorial

Jul 12, 2024

CWAY Cloud-based Task Manager Tutorial

Introduction

  • Presenter: CWAY
  • Topic: Developing a cloud-based task manager using the MERN stack.
  • Version: Advanced version of a regular to-do app
  • Audience: Beginners looking to improve front-end and back-end development skills
  • Reminder: Like, subscribe, turn on notifications, and share.

Overview of Project

  • Features: Admin dashboard, task management, priority charts, user details, notifications, and asset uploads.
  • Login & Dashboard: Shows total tasks, completed tasks, tasks in progress, and to-do tasks with priority charts (high, medium, low).
  • User Details: Access user details and roles through pop-up cards, update profile, change password, and log out.
  • Notifications: View and manage notifications with details.
  • Task Addition: Add tasks with options to upload assets, set priorities, and assign users.
  • Subtask Management: Add and manage subtasks with timelines and activity lines.
  • Views: Different views for tasks - board view with images and subtasks, list view with edit/delete options, and trash management.
  • User Management: Admin can add users with default email as the password, view user roles, and manage responsiveness.
  • Mobile View: Fully responsive design for mobile devices.
  • Multi-user Login: Different levels of access for admins and regular users.

Project Planning

  • Documentation: Full-stack task manager documentation covering functionalities and features.
  • Admin Features: Manage user accounts, task assignments, task properties (priority levels), and assets. Admin has full control over user management and task updates.
  • User Features: Task interaction with comments and activity updates. Change task status and add new details.
  • General Features: Authentication (using cookies), authorization, profile management, and dashboard summary.
  • Technologies Used:
    • Frontend: React, Vite, Redux Toolkit, Headless UI, Tailwind CSS
    • Backend: Node.js, Express.js
    • Database: MongoDB Atlas

Architectural Diagram

  • Components: Client (UI), Server, Database (MongoDB), admin, and user flows.
  • Front-end Interface: Users interact with front-end UI connected to the backend server, which communicates with the database.
  • Flow:
    • Admin creates an account and adds users.
    • Users interact through the front end to perform tasks.
    • Server mediates requests to and from the database.
    • Diagram of multiple clients and their interactions explained.

Project Setup

  • Installation:
    • Create project folder and initialize with Vite for React.
    • Change server port to 3000; configure proxy settings for API on port 8000.
  • Dependencies: Install required libraries and packages, including Tailwind CSS, Headless UI, Redux, React Router, Recharts, Moment.js, and Toast notifications.
  • Folder Structure:
    • Assets
    • Components
    • Pages (e.g., login, dashboard, tasks, task details, trash, users)
    • Redux (for state management)
  • Basic Setup: Some basic CSS and loading screen setup included.
  • Running the App: Instructions on how to run the app using Vite and view it in the browser.

Next Steps

  • Subsequent parts will include building out individual components and setting up the backend services.