Next.Js Work Management Tool - Mongo Db , Ant-D , Tailwind

Master Next.js by Building a Dynamic Work Management Tool with Roles, Permissions, and Real-Time Reports

What you'll learn

Build a scalable and secure Work Management Tool using Nextjs and modern web technologies.

Implement dynamic roles, permissions, and authentication using the Clerk library.

Design modular components for tasks, teams, and reports with real-time customization capabilities.

Create and manage data for dynamic industries, enabling adaptability to different business requirements.

Gain hands-on experience with managing user dashboards, task assignments, and reporting features.

The Reports module will include reports such as Task Completion Report and Team Performance Report.

Logged-in users can see the projects they are part of on their dashboard.

Users can view all their tasks, irrespective of the project, on a separate User Tasks page, which includes a project dropdown for filtering tasks.

Requirements

Basic understanding of JavaScript, React, and Nextjs fundamentals.

Familiarity with web development concepts such as components, routing, and state management.

A code editor (like VS Code) and Nodejs installed on your system.

A willingness to learn and experiment with real-world application-building techniques!

Description

Welcome to the course on building a Work Management Tool App with Next.js! In this course, you'll learn to create a robust and scalable application featuring dynamic roles, permissions, and real-time reporting. Whether you're a beginner or an experienced developer, this course will guide you step-by-step in building a professional-grade tool. Let's get started on this exciting journey!Features of the Next.js Work Management Tool AppStrong and secure authentication system using the Clerk authentication library.Unified authentication system for all users, including owners, team members, etc.The user who creates a project will be treated as the owner of the project.Owners can add team members to the project and assign roles such as admin, developer, tester, etc.Owners can allocate permissions to team members, including edit-task, create-task, delete-task, etc.Owners can also remove team members from the project.Each project will have three high-level modules: Tasks, Team, and Reports.The Task form will include fields such as title, description, assignee, due date, priority, and status.Task status in the Task form and roles in the Team form will be completely dynamic and customizable by the owner, enabling use across different industries. For example:Software industry: Roles like developer, tester, admin.Construction industry: Roles like engineer, supervisor, manager.The Reports module will include reports such as Task Completion Report and Team Performance Report.Logged-in users can see the projects they are part of on their dashboard.Users can view all their tasks, irrespective of the project, on a separate User Tasks page, which includes a project dropdown for filtering tasks.

Overview

Section 1: Introduction

Lecture 1 Project Demo

Lecture 2 Next app setup

Lecture 3 Ant design setup

Lecture 4 Override ant design styling

Section 2: Authentication

Lecture 5 Home page

Lecture 6 Why clerk

Lecture 7 Clerk setup

Lecture 8 Render sign-in and sign-up pages

Lecture 9 Test sign-up , sign-in , sign-out

Lecture 10 Clerk middleware

Lecture 11 Get logged-in user info

Lecture 12 Auth components styling

Section 3: Mongo connection and saving user to db

Lecture 13 Mongo db connection

Lecture 14 User model

Lecture 15 Save and get clerk user to mongo db

Section 4: Private layout

Lecture 16 Layout - part 1

Lecture 17 Layout - part 2

Lecture 18 Layout - part 3

Section 5: Layout enhancements

Lecture 19 Adding spinner

Lecture 20 State management

Section 6: Projects - Backend

Lecture 21 Project model

Lecture 22 Projects crud server actions

Section 7: Projects - Frontend

Lecture 23 Project Form - Intro

Lecture 24 Create project and update project folder structure

Lecture 25 Basic fields in project form

Lecture 26 Task statuses and roles in project form

Section 8: Upload media and save project

Lecture 27 Supabase integration

Lecture 28 Upload files to supabase media

Lecture 29 Save project

Section 9: Show , edit , delete projects

Lecture 30 Show projects

Lecture 31 Edit project

Lecture 32 Delete project

Section 10: Handling project team members

Lecture 33 Team member form - part 1

Lecture 34 Team member form - part 2

Lecture 35 Add team member

Lecture 36 Show team members

Lecture 37 Show projects for team members

Lecture 38 Edit team member

Lecture 39 Delete team member

Section 11: Project Info & Task form

Lecture 40 Project info page setup

Lecture 41 Tasks module routes setup

Lecture 42 Task form - 1

Lecture 43 Task form - 2

Section 12: Save , show , edit , delete tasks

Lecture 44 Task model

Lecture 45 Tasks server actions

Lecture 46 Save task

Lecture 47 Show tasks

Lecture 48 Edit tasks

Lecture 49 Delete task

Lecture 50 View task

Section 13: Tasks filters

Lecture 51 Tasks filters - UI

Lecture 52 Tasks filters - API

Lecture 53 Assignee filter testing

Section 14: Project team members and overview

Lecture 54 Show project team members

Lecture 55 Project overview - part 1

Lecture 56 Project overview - part 2

Section 15: User tasks and profile

Lecture 57 User tasks - part 1

Lecture 58 User Tasks - part 2

Lecture 59 Profile page

Lecture 60 Loading component

Aspiring Developers looking to gain hands-on experience building real-world Nextjs applications.,Frontend and Fullstack Developers wanting to enhance their skills in authentication, role-based access, and dynamic UI development,Tech Enthusiasts curious about building modular and scalable web apps tailored to diverse industries.,Business Owners or Team Leads interested in understanding how to develop tools for project and task management.,Students or Beginners eager to learn Nextjs, even with basic web development knowledge.