Next.js 14 Charity & Crowd Funding App

set up clerk authentication for a Next.js app, enabling Google and GitHub logins, configuring environment keys, and exploring clerk components like sign-in, sign-up, user profile, and private routes.

Install clerk/nextjs and wrap your Next.js app with the clerk provider, then configure environment variables and a middleware to secure routes while building custom sign-in and sign-up pages.

Configure public and private routes with clerk middleware in a Next.js 14 app, and test sign in, sign out, and protected pages.

Use clerk's current user method in a server component to access the logged in user's id, username, and email, and derive a usable username for MongoDB storage.

Connect a Next.js 14 app to MongoDB using mongoose, with a config file and env variables. Learn to check if an email exists and create new user documents during registration.

Define a Mongoose user model with clerk user id, username, email, profile pic, isAdmin, and isActive. Sanitize by checking existing users and saving new records to MongoDB using clerk data.

Create a common layout with a header and role-based menus for admin and normal users, focusing on campaigns and donations, and implement layout provider wiring across protected routes.

Learners implement a server action to fetch the current user from MongoDB, determine admin status, and render dynamic header menus in a Next.js 14 charity app.

Refactor the app layout by extracting header and content into functions, hide the header on sign in or sign up routes using path checks, and update admin and user pages.

Master admin routes for a Next.js 14 charity app by implementing campaigns creation, listing, editing, and deletion through a reusable campaign form and shared components on the admin/campaigns pages.

Design a campaign form with name, description, organizer, target amount, category, dates, and toggles for active and show donors, using a tailwind/antd grid for responsive one-column mobile and three-column lg.

Set up Firebase storage for your Next.js charity app with five gb of free storage, configure project, initialize the app, and enable image and video uploads to a storage bucket.

Develop a multi-file image upload to Firebase storage, using uploadBytes and getDownloadURL to return URLs for each image in the images folder via a Promise.all workflow.

Define a campaign model with Mongoose and a server action to save campaigns to MongoDB using the current user as creator, then redirect to the campaigns list.

This lecture demonstrates building an admin campaigns table in Next.js 14, fetching campaigns server-side, displaying with edit and delete actions, and navigating to the edit campaign route.

Edit campaigns in a Next.js 14 charity and crowd funding app by pre-populating details, handling image edits, and updating campaigns with find one and update operations.

Learn to implement the image edit flow for campaigns, showing existing images, enabling deletes, uploading new images, and merging edits on submit while handling caching and server actions.

Implement and test the delete campaign operation in a charity app, using a try‑catch flow, loading state, server action to delete by id, and revalidate admin/campaigns.

Show campaigns on the home page by fetching ordered campaign data, rendering campaign cards with images, titles, and a progress bar tracking collected versus target amounts, plus filters and routing.

Design and implement a single campaign info page in a Next.js app, fetching campaign data by id, displaying images, description, organizer, dates, and fundraising details with a donation form.

Create a client-side donation card for the campaign info page, wire amount and message inputs, display collected progress, and enable the donate button when an amount is entered.

Learn to integrate Stripe payment in a Next.js 14 charity app by creating a payment intent, obtaining a client secret, and using the payment element to process donations.

Implement and test a Stripe payment modal in a Next.js charity app by wiring the client secret, payment and address elements, and submit logic to complete donations.

Develop a donation model and server action in a Next.js charity app, link donations to campaigns and users, update campaign totals, and handle post-payment navigation.

Complete a donation payment after a technical glitch, confirm donation successful, and observe the campaign and donations pages update with the 10% donation without reloading.

Explore how to display recent donations in a Next.js 14 charity and crowd funding app: fetch and show top five donations on the campaign page, including donor usernames and messages.

Learn to implement a show all donations modal for a campaign, fetch donations with a server action, handle view all button, and render donation cards inside the modal.

Explore how to display user donations in a reusable donations table for admins and users, fetching data by user id from MongoDB and rendering campaign, amount, message, date, and time.

View all donations in the admin donations table, showing campaign, user, amount, and date. Filter by user, by campaign amount, and by date/time, and see updates after new donations.