Next.js 14 Freelance Services Marketplace App 2024

Explore why a third-party authentication library speeds up sign up, sign in, and get user functionality in a Next.js app. Clarke provides predefined styling, easy setup, and social login support.

Set up a clerk account and create a new project in the clerk dashboard, configure sign-in options, and manage project settings and users.

Integrate Clerk authentication into a Next.js app by installing the Clerk SDK, configuring environment variables, and wrapping the app with the Clerk provider and auth middleware.

Implement sign-up with otp verification via clerk, sign-in, and sign-out, render the user button and details, and protect the home page with middleware by declaring public routes.

Fetch and display the logged-in user details using the currentUser function in Clerk, extracting id, image URL, first and last name, and email from the address array.

Build a two-column sign-in and sign-up layout with a left hero title and right form, override clerk styling with a theme color, and use Montserrat fonts.

Fix font issues by using the Google fonts import for Montserrat with weights 500, 600, and 700, and implement responsive sign-in and sign-up with md grid breakpoints.

Set up MongoDB with Next.js using mongoose and Firebase for storage, configure a database URL from environment variables, establish and test the connection from the home page, and handle errors.

Set up a Firebase project and connect it to a Next.js 14 app. Initialize the Firebase app, configure next public environment variables for client and server access, including storage.

Store current Clerk user data in our MongoDB users collection to preserve registrations when migrating authentication providers, enabling future migrations to Firebase or NextAuth while avoiding third-party dependency.

Create a user model in mongoose to store clerk current user data in the MongoDB users collection, including name, email, profile pic, and clerk user id.

Register a new user via clerk and check MongoDB for existing user. If found, return it; otherwise create and save a new user with clerk data in Next.js server actions.

Create a layout skeleton for private pages with a fixed sidebar and a dynamic content area that updates by route. Implement a layout provider and a reusable sidebar.

Create a sidebar UI for a Next.js app, showing the project title and username, with menu items for home, profile, bids, tasks, and logout, plus an active highlighted state.

Organize the next app directory by grouping public and private pages with the parentheses technique, and implement a sidebar with active state for profile and tasks routes.

Learn to make the layout responsive by turning the desktop sidebar into a mobile overlay drawer with a hamburger menu, while preserving a fixed sidebar on larger screens.

Learn to implement a conditional layout in a Next.js 14 freelance marketplace app by hiding the sidebar on authentication pages and routing to sign in after logout.

Fetch the current logged in user data in the layout and store it in the zest global store so every page can access the id, name, and email without refetching.

Show a loading spinner while waiting for the current user API response, using a spinner component and a loading state to render the page once data arrives.

Fix a loader size bug by restarting the server; after refresh, width and height adjust from 20x20 to 40x40, suggesting a class read issue or Next.js issue.

Build a reusable page title component for the Next.js 14 freelance services marketplace app, styled with tailwind and an info color, applied across home, profile, and tasks pages.

Create a reusable link button component in Next.js 14 that looks like a button but navigates via the router, addressing server component constraints and ensuring consistent menu highlighting.

Build and update user profiles in a Next.js 14 freelance marketplace app by adding bio, skills, and portfolio; implement a responsive form with name and email and comma-separated skill chips.

Learn how to pre-populate a user profile form, build an update profile API with MongoDB, and connect the API to the form to save changes.

Build the back-end task model and create task API for a Next.js freelance marketplace, defining title, subtitle, deadline, skills, description, attachments, is active, and user reference.

Build create, edit, and delete task APIs in a Next.js 14 freelance marketplace app using server actions and MongoDB, with a task model and camelCase naming.

Learn to build the task creation UI with three tabs (basic, description, attachments) in a Next.js 14 app, focusing on the basic tab’s title, subtitle, deadline, and comma-separated skills.

Implement a rich text editor in the task description tab to format bullet points and bold text, using react simple wysiwyg with value and onChange handling.

Manage task attachments by adding, uploading, and replacing files as an array of objects with name and URL, uploading to Firebase, and handling both new and existing attachments.

Implement save task by uploading attachments to Firebase and returning URLs. Integrate with form values to create a new task with attachments, skills, description, and deadlines.

Display and edit tasks for the logged-in user in a Next.js 14 freelance services marketplace app by rendering a task table with delete and edit actions.

Refactor the task table to format created at dates with a date format helper, add bids received, and render active status with green and red badges.

this lecture implements the edit task feature in a next.js 14 marketplace app by creating the edit route, loading the task by id, and populating the form in edit mode.

Master the edit attachment flow by distinguishing new attachments from existing ones, populating existing attachments with URLs in the files list, and merging existing and new attachments on submit.

Implement delete task via a server action that takes the task id, revalidates the list after deletion, and shows a loading state with a trash button.

Implement an is active toggle for tasks in the basic tab by using a use state boolean, wiring a switch to update is active and pass it to the form.