Next.js 14 Lottery & Lucky Draw App

Explore Clerk authentication for the lottery app, using built-in sign-in and sign-up components with Google and email logins, which render UI, validate credentials, and save user data to Clerk database.

Add Clerk to Next.js by integrating environment variables, wrapping the app in the Clerk provider, and enforcing authentication with middleware and a prebuilt user button.

Create custom sign-in and sign-up pages on your own domain in a Next.js app using Clerk. Configure routes, environment variables, and after sign-in/out URLs to enable seamless sign-in.

Fetch the logged-in user from the clerk database with the current user function in a server component, then extract ID, name, and email for display and MongoDB storage.

Style the sign in and sign up pages by creating auth.css, centering the form, removing the watermark, applying a background image, and tuning the theme color and border radius.

Create a user model in a Next.js app using mongoose, defining name, email, clerk user id, isActive, and isAdmin with timestamps for CRUD operations.

Store the current user in MongoDB by using Next.js server actions and Clerk; create or fetch the user via a get current user function.

Build a unified layout with a layout provider, a left sidebar, header, and page content shared by admin and user areas, plus routing via a private folder.

Create a two-part layout for the Next.js lottery app with a flex container, a sidebar, and a header, and render admin menus like home, lotteries, tickets, users, and reports.

Install and integrate remix icons and the classnames library to build a responsive layout sidebar with active menu highlighting driven by the route, router, and pathname.

Display the logged-in user name and a logout icon in the layout header, use the layout provider for width, and fetch the user via server action into a global store.

Learn to build a global user store with Zustand in Next.js 14, fetch the current user from the server, and access it across client components for consistent layout behavior.

Implement a conditional header in next.js 14 by distinguishing public routes from private routes using the path name, rendering children for public routes and layout for private routes.

Design and implement a reusable loading spinner in a Next.js 14 lottery app, with height and full-screen options, centered placement, and conditional rendering during user data fetches.

Develop the lotteries crud operations on the admin side by building two reusable components—a page title and a link button—and refine the folder structure with dynamic routes and menu highlighting.

Create a reusable lottery form in Next.js 14, combining basic data, prices, and media tabs inside an entity form with validation and responsive layout.

Configure the prizes tab in the lottery form by building a prizes array with positions, cash or item prizes, media uploads, and save to database with add and delete actions.

Integrate firebase for image upload in the next.js lottery app by moving media to firebase storage. Set up a firebase project, install firebase, and configure env vars and storage rules.

Build a Firebase image upload UI by implementing an upload component in the media tab, managing uploaded files in state, enabling multiple image selection, and preparing image URLs.

Upload media to Firebase storage and return URLs using a new uploads.ts helper, employing async/await, Promise.all, and proper error handling for the lottery form.

Build a lottery module in Next.js 14, including a create lottery server action, a mongoose lottery model with media and prizes, and multi-file upload handling.

Fetches all lotteries from the database and renders them in the admin lotteries table. Demonstrates data formatting with stringify/parse and loading states for server components in Next.js 14.

Implement the edit lottery workflow in a Next.js 14 app, routing to admin/lottery/edit/[id], preloading initial data and prizes into the lottery form, and updating via server action.

Manage the edit lottery media tab by initializing existing media URLs, rendering uploaded and existing images, and enabling deletion and updates via Firebase uploads.

Teach how to delete a lottery in a Next.js 14 admin interface by wiring the delete button to a server action, with loading states and error handling.

Make the user sidebar dynamic by reading the logged-in user profile from the global store and switching menus for admin or user. Use routes like user/lotteries, user/tickets, and user/reports.

Build the home page for a next.js 14 lottery app by fetching lotteries and displaying them in a three-column grid of cards, with navigation to a lottery detail page.

Design a lottery info page displaying the lottery name, main and gallery images, and key details like ticket price, dates, and a countdown timer, with a Stripe-based buy ticket flow.

Implement the lottery details on the lottery info page with a white background and consistent styling from the home page. Include the timer and buy ticket components in upcoming steps.

Create a countdown timer component for the lottery, showing time left. Update every second with useEffect and dayjs duration, pass lottery data, and offer a buy ticket button.

Introduce Stripe payments by configuring api keys, env vars, and libraries, then create a server action to generate a dynamic payment intent client secret for lottery tickets.

Learn to implement a modal checkout with stripe elements, using the secret key and client secret to complete lottery ticket payments, including address details and confirm payment flow.

Build and validate the ticket model with user, lottery, price, and payment fields, and implement a create ticket server action that assigns a sequential ticket number after successful payment.

Implement the ticket model by invoking a create ticket server action after payment succeeds, save ticket details, then close the modal and redirect users to the user tickets page.

Select winners server action creates unique random winners for each prize by querying lottery and tickets from MongoDB, constructs winner documents, saves them, and marks the lottery as winners declared.