Next.Js 14 Freelance Services Marketplace App

Build a Freelancers Service Marketplace App using latest version of nextjs , tailwindcss , mongodb , clerk , ant design.

What you'll learn

Next JS 14 Latest Features

Using Antd , Tailwind CSS , Mongo DB in Next JS

Building real time project with latest technolgies

Next JS Client and server components

Requirements

Next JS 13 Basics

Description

Building a Freelance Service Marketplace with Next.js 14In this comprehensive course, you will dive into the world of building a Freelance Service Marketplace using Next.js 14, incorporating cutting-edge technologies like Ant Design (Antd), Tailwind CSS, and MongoDB. This course is designed for aspiring developers who want to create modern and user-friendly platforms for freelancers and clients to connect and collaborate effectively.Course Overview:Next.js 14 Latest Features: Explore the latest features of Next.js 14, including Turbopack for enhanced performance, Server Actions for simplified data mutations, and Partial Prerendering for a mix of static and dynamic content delivery.Utilizing Ant Design (Antd) and Tailwind CSS: Learn how to integrate Ant Design components and Tailwind CSS for efficient styling and design customization, ensuring a visually appealing and responsive user interface for your Freelance Service Marketplace.MongoDB Integration: Understand how to integrate MongoDB as the database for your project, enabling real-time data storage and retrieval to support dynamic interactions on your Freelance Service Marketplace.Building a Real-Time Project: Implement real-time features using Next.js Client and Server components, leveraging the latest technologies to create a seamless user experience with live updates and interactions.Key Learning Objectives:Creating a Modern Freelance Service Marketplace: Develop a platform that caters to the needs of freelancers and clients, offering a seamless experience for connecting and collaborating.Optimizing for Mobile Devices: Ensure your Freelance Service Marketplace is optimized for mobile devices, allowing users to access the platform effortlessly on smartphones and tablets.Enhancing User Experience: Implement clean design elements, soft colors, and fluid UI/UX to create an engaging Freelance Marketplace experience that users will love.Real-Time Interactions: Enable real-time interactions on your platform using MongoDB and Next.js Client and Server components, providing users with dynamic and responsive features.By the end of this course, you will have the skills and knowledge to build a Freelance Service Marketplace that incorporates the latest technologies, offers real-time capabilities, and provides a user-friendly experience for both freelancers and clients. Join us on this journey to create a modern and innovative platform for the freelance industry.

Overview

Section 1: Introduction

Lecture 1 Creating A New Next app

Lecture 2 UI Library Purpose

Lecture 3 Ant Design Demo

Lecture 4 Overrding Of Ant Design Components

Section 2: Clerk User Authentication

Lecture 5 Why Third Party Library For Authentication

Lecture 6 Clerk Project Setup

Lecture 7 Integrate Clerk With Next JS

Lecture 8 Custom Sign-in and Sign-up Pages

Lecture 9 Sign-in , Sign-up and Sign-out Process

Lecture 10 Get Current User Details

Lecture 11 Styling Of Sign-in and Sign-up pages - 1

Lecture 12 Styling Of Sign-in and Sign-up pages - 2

Section 3: Configs Setup

Lecture 13 Mongo DB Setup

Lecture 14 Firebase Setup

Section 4: Create New User

Lecture 15 Why Should We Save Current User

Lecture 16 User Model

Lecture 17 Save Current User

Section 5: Layout

Lecture 18 Layout Skeleton

Lecture 19 Creating Sidebar - 1

Lecture 20 Creating Sidebar - 2

Lecture 21 Making Layout Responsive

Lecture 22 Conditional Layout

Lecture 23 Showing User Details In Layout

Lecture 24 Showing Spinner

Lecture 25 Bug Fix

Section 6: Reusable Components

Lecture 26 Page Title Component

Lecture 27 Link Button

Section 7: User Profile Update

Lecture 28 Profile Form

Lecture 29 Profile Update API

Section 8: Add Task Backend

Lecture 30 Task Model

Lecture 31 Add Task API

Section 9: Add Task Front End

Lecture 32 Task Form - Basic Info

Lecture 33 Task Form - Description

Lecture 34 Task Form - Attachments

Lecture 35 Save Task

Section 10: Show , Edit , Delete Task

Lecture 36 Show Tasks - 1

Lecture 37 Show Tasks- 2

Lecture 38 Edit Task - 1

Lecture 39 Edit Task - 2

Lecture 40 Delete Task

Lecture 41 Making Task Active/Inactive

Section 11: Homepage and Task Info Page

Lecture 42 Show Tasks In Homepage

Lecture 43 Task Info Page

Lecture 44 Show Attachments

Lecture 45 Show Loaders For Server Components

Lecture 46 Creating User Accounts

Section 12: Place Bid

Lecture 47 Place Bid UI

Lecture 48 Bid Model

Lecture 49 Place Bid Server Action

Fullstack Developers