Next.js 14 e-Learning and Online Courses Marketplace App

Clerk provides authentication UI components from an npm library for Next.js apps, including sign-in, sign-up, user info, and logout, and requires a Clerk project with integrated credentials.

Learn to create a Clerk account and application, configure env vars and middleware, and integrate the Clerk provider to protect Next.js routes.

Implement custom sign-in and sign-up pages for your Next.js 14 marketplace app using clerk on your localhost domain, including route paths, environment variables, and basic user detail handling.

Demonstrate sign up, sign in, and sign out flows and show how to render the logged-in user's name and email in the UI using a user button component.

Fetch the logged-in user as an object in a Next.js server component using Clerk's currentUser, extract first name, last name, and email, and capture the clerk id for database storage.

Style sign-in and sign-up pages by centering the authentication form, applying a white background with a black border, and overriding inputs and buttons to 45px height with Montserrat font.

Store logged-in user data in the MongoDB users collection to preserve registrations when changing authentication providers, and enable backend import of user details like first name, last name, and email.

Connect MongoDB with a Next.js app using Mongoose, copy the connection URL from MongoDB compass into a .env variable, and call connectMongoDB from the app layout to verify in terminal.

Create a user model and interface in a Next.js app by building a models folder, defining a mongoose user schema with name, email, Clark user ID, profile pic, and timestamps.

Learn to implement server actions in Next.js 14 to save and fetch a user in MongoDB using Clerk for authentication, preventing duplicates and returning structured data.

Create a shared layout for the next.js app with a header and profile menu. Use a layout provider and an isAdmin flag to render admin or user menus.

Style a header with a flex layout, a colored three-part project title, and a clickable home link, while fetching current user data for the header display.

Create a reusable spinner component and center an animated loader while awaiting the user response, using a conditional API call on non-auth routes and exporting it for reuse across pages.

Learn to implement global state management with zustand to store the current user data in a central store, replacing prop drilling and avoiding duplicate API calls across the app.

Implement a drawer menu opened from the logged-in user icon, rendering admin or user items based on isAdmin, using next router for navigation and active highlighting.

Implement manual logout with clerk useAuth signOut, trigger via a logout button, show a loader, and navigate to sign-in, while fetching current user data for layout decisions.

Discover the admin courses module with CRUD overview and a unified course form for new and edit, including title, price, category, promo video, cover image, and rich text curriculum.

Build a three-tab course form for the Next.js 14 e-learning marketplace app, using an entity form with basics, description, and curriculum. Implement vertical layout and grid for price and category.

Implement cover image and promo video uploads in the course form basic tab using a picture-card uploader, before-upload callbacks, and file-type restrictions, preparing for Firebase upload and URL storage.

Build the course description tab using React Quill in a Next.js course form, enabling rich text formatting, bullet points, and HTML output stored in MongoDB.

Create and manage a multi-section curriculum with sections and lectures, using a modal form to capture section names and lecture names, and organize the curriculum accordingly.

Learn to add sections to the curriculum by handling add and edit modes, pre-populating values, and updating the sections array with a new section and empty lessons.

Apply the NTD dropdown to the section card to render a click-triggered menu offering edit section, delete section, and add lesson actions.

Learn to implement the edit section flow in Next.js e-learning app by opening the section form modal, pre-populating values for the selected section, and updating the sections array by index.

Delete a section in the user interface by using the splice method on the sections array, updating state, and reflecting reindexed section numbers in the Next.js e-learning app.

Discover how to add a lesson to a section in curriculum, using a lesson form modal to enter a name and select media from the media library, with storage planning.

Display lessons within sections by rendering a lesson data component for each section’s lesson. Pass the required props—lesson, set sections, and lesson index—to enable updating, adding, and tracking lessons.

Fix lesson management in a Next.js 14 e-Learning app by disabling react strict mode in next.config.js, preventing duplicate saves, and adding lesson actions (edit, delete) via a modal.

Implement edit lesson feature by wiring the lesson form model, passing props to components, pre-populating fields from the selected lesson data, and updating sections with the edited name and video.

Master deleting lessons within a Next.js 14 e-learning and online courses marketplace app, enabling streamlined course management for instructors and curricular updates.

Set up firebase storage for the Next.js app by creating a Shea Online Courses project, configuring web app credentials, securing environment variables, and preparing for file uploads.

Build a media upload UI for the Next.js e-learning marketplace, featuring a media library admin page and a modal to upload a video to Firebase and save metadata in MongoDB.

Learn to upload media to Firebase storage, decide whether to show upload progress, implement an upload task with a progress percentage, and retrieve the download URL for storage in MongoDB's media library.

Build a MongoDB media library by saving uploaded files through a media model with url, name, and type fields, and implement server actions to save and retrieve media.

Showcases uploaded media in the admin media library with a React table featuring file, date uploaded, and action columns, including delete and preview, with data fetched via useEffect.

Create a preview modal for uploaded media, enabling a hover preview and a modal that displays the selected image or video with controls.

Learn to implement delete media in a Next.js 14 media library, including a server action API, id-based deletion, and reloading data after successful operations.

Build the save course feature for a Next.js 14 e-learning marketplace app by wiring curriculum sections, media library integration, and Firebase uploads for cover images and promo videos.

Define the course model with mongoose and implement the save course action in a Next.js 14 e-learning app, including title, subtitle, price, category, cover image, sections, and is active.

Display, edit, and delete courses in a Next.js 14 e-learning marketplace app by building a courses table, fetching all courses via server actions, and handling routing and loading indicators.

Learn to implement a loading state for server components using suspense, by creating a loading.tsx in the parent and displaying a spinner while fetching data from MongoDB via API call.

Demonstrates populating and editing course data by id in a Next.js 14 app, using server actions to fetch, update, and create courses, pre-populate forms, and invalidate admin/courses cache.

Explore populating cover image and promo video in edit mode by converting URLs to the upload component's file list structure and managing firebase uploads.

Demonstrates delete course functionality in a Next.js 14 e-learning marketplace, using a server action to delete by id and revalidate the admin/courses page, with loading and success or error feedback.

Showcases the home page and course information page for a Next.js 14 e-learning marketplace, listing courses in a grid with image, title, subtitle, and price.

Fetches all courses and renders them in a responsive grid of course cards with image, title, subtitle, and price, enabling navigation to each course's detail page.

Design the course information page hero section with a three-column layout showing the course title, subtitle, release and updated dates, enrollment metrics, and promo watching with purchase options.

Show course description on course info page using the HTML to React library, build a reusable description component that accepts the course prop and renders HTML as JSX with styling.

Create a course curriculum component on the course info page that uses an accordion to reveal sections and their lessons, rendering sections and lessons from the course data.

Develop a purchase course box on the course information page featuring an image, price, watch promo modal with a promo video, and a buy now button, with a responsive grid layout.

Integrate Stripe payment gateway into a Next.js app to enable course purchases. Create a Stripe account, obtain public and secret keys, and set env vars for client and server.

Build the Stripe backend with the payment intent API to create a payment intent for a course purchase. Learn installing Stripe and wiring the server action.

Learn Stripe frontend integration in React using the Elements provider and client secret. Build a modal checkout form, handle payment intents, and include address fields and error handling.

Build the enrollments module by defining the enrollment model and interface, then implement the save enrollments API in a server action to persist enrollments after checkout.

Integrate the save enrollment API into the checkout flow by sending course id, student id, amount, and payment id, then show toasts and navigate to enrolled courses.