Next.js Work Management Tool - Mongo DB , Ant-D , Tailwind

Build authentication on the home page by showing sign in and sign up forms within the same route, using a client component, public routes, and an entity draw element.

Explore Clerk, an npm authentication library for Next.js apps, compare it with generic UI libraries, and review alternatives like building from scratch or using Firebase authentication and auth.js.

Set up clerk authentication in a Next.js app by creating a clerk account, enabling email login, installing the clerk library, and wrapping the layout with the Clerk provider.

Render sign-in and sign-up forms with the Clerc authentication library in a Next.js app, implement conditional rendering via URL form type, and configure post-login redirects to accounts/projects.

Test sign-up, sign-in, and sign-out flows with verification codes, verify the user info popover and sign-out navigation, and validate error handling for invalid emails in clerk authentication.

Protect private routes in a Next.js app with Clerk middleware. Configure public and private route matchers and env vars to redirect unauthenticated users to the home page.

Retrieve the current logged-in user information in object format using the Clerk current user function, extract id, name, email, and profile picture, and prepare to store these properties in MongoDB.

Style authentication components, shaping sign-in and sign-up forms with no box shadow, adjusted height, borders, and primary-colored buttons using tailwind config. Preview MongoDB connection and how it stores user data.

Set up a MongoDB connection in a Next.js app using mongoose. Save current users data into the MongoDB users collection and configure the database URL in env.

Define the MongoDB user model with mongoose, including name, email, profile picture, Clerk user id, and flags isAdmin and isActive, and explain storing this data for persistence across authentication libraries.

Implement a save current user server action in MongoDB to create or fetch the user using the current user data, avoiding duplicates by email.

Build a shared private-route layout in a Next.js app by wrapping pages in a layout provider with a header and sidebar, rendering only for account-related paths.

Style the header, add a public logo, and use Lucid React icons to display the current user name with a future hamburger menu.

Learn to build a toggleable menu items component in a layout provider for a Next.js app, with project, profile, all tasks, and help center options, active-route highlighting, and Clerk sign-out.

design a spinner component and integrate it into the layout provider to show a centered loading state while setting up the global store for the logged-in user information.

Learn to store the logged in user data in a global store using a state management tool, enabling access from any page or component via a set method.

Define the project model with name, description, status, and logo, then structure roles, task statuses, and a team array with user references and permissions, for crud actions.

Manage projects with server actions in a Next.js work tool by creating, updating, deleting, and reading projects via a MongoDB-backed project model, with owner id filtering for the current user.

Create a reusable page title component for the Next.js project form, standardizing titles across create and edit private routes and enabling consistent navigation and layout.

Create and update a multi-tab project form in a Next.js app by building a reusable client component with three tabs: basic info, roles and task statuses, and team members.

Explore how the basic tab in the project form captures name, description, status, and logo using vertical layout, form items, validation rules, and an upload component with MongoDB attribute alignment.

Explore building a roles and task statuses tab in a Next.js project form, enabling comma-separated input, adding, displaying as tags, and soft deleting roles and statuses with live state updates.

Illustrates integrating supabase storage with a Next.js app to upload a logo as a url and save project form data to MongoDB, including env vars and client setup.

Learn to upload files from a Next.js app to Supabase storage, create a bucket with permissions, and obtain a public URL to store in MongoDB.

Build the create project payload from form values and current user id, upload the logo to obtain a url, and call create or update project; on success, navigate to account/projects.

Showcases owner projects in a responsive grid of cards with logo, name, and description, with owner-only edit and delete actions that navigate to the project edit page.

Update the edit project workflow by loading existing data, pre-populating the form with initial values, handling logo uploads, and submitting updates via the update project server action.

Implement delete project functionality with a loading state, server action integration, and a confirmation modal, plus cache invalidation via revalidate path to refresh project data.

Learn to implement a team member form in a Next.js project, with conditional visibility of the team members tab in edit mode and a modal for adding or editing members.

Create and validate a team member form that collects email, role, and permissions, renders a permissions checkbox list with role options, and supports add and edit actions.

Implement a server action to add a project team member by validating the email, building a payload with email, role, and permissions, and updating the team's MongoDB record.

Display and populate project team members by fetching the project record, populating the member object, and rendering a table with name, role, permissions as tags, and edit/delete actions.

Explore displaying allocated projects for team members by applying owner and team member permissions, enabling view and edit access while hiding the delete button based on user roles.

Edit team member in a next.js project, populate the form from the selected member, restrict email edits, update role and permissions in Mongo DB, and reflect changes in the UI.

Delete a team member from a Next.js project by filtering the team members array and updating the project by id, while managing loading state and displaying the response message.