Nextjs 14 Vehicle Rental App - MongoDB , AntD , Tailwind

Demonstrate authentication and authorization on the Next.js vehicle rental home page by building a single route for login and registration with a drawer, plus public routing and a header-hero design.

Explore Clerk authentication in Next.js apps, including sign in, sign up, user info, and logout components, and compare alternatives like building from scratch or using Firebase authentication.

Install and integrate Clerk with your Next.js 14 vehicle rental app, create a Clerk project, enable email login, and configure middleware and provider for authentication.

Learn to integrate clerk authentication components to render a sign in and sign up drawer from the homepage header, controlled by a show authentication state and form type query parameters.

Test sign up, sign in, and sign out with Clerk authentication components, navigate to /vehicles on success, and display the logged-in user via the user button.

Implement Clerk middleware to protect private routes in Next.js 14, restricting access to the vehicles page for unauthenticated users, and configure redirect behavior to the home page.

Fetch the logged-in user data as an object using clerk's currentUser in a Next.js server component. Extract id, first name, last name, and email address for MongoDB storage.

Override the default Clarke component styling for sign in and sign up by updating global CSS inputs and buttons, removing box shadows via CL card box.

connect MongoDB in a Next.js app with mongoose, configure MONGODB_URL in .env for the shea vehicle rentals database, implement a config/mongodb connect function, and call it on startup.

Store clerk user data in the MongoDB users collection to ensure future authentication migrations. Rely on your own database because export options are not available in clerk user interface.

Create and export the default mongoose user model in a dedicated src/models folder, defining name, email, profile pic, is active, and is admin, with a clerk user reference for MongoDB.

Implement a Next.js server action to store and retrieve clerk user data in MongoDB, checking for existing records by clerk user id and creating a new user if absent.

Build a common layout for private pages in a Next.js vehicle rental app, featuring a header with logo and a role-based hamburger menu for admin and normal users.

Build a private layout in next.js 14 by creating a custom layout and a private layout, wrapping private pages and adjusting tailwind config for the new layout folder.

Fetch and display the logged-in user data in the private layout header by querying the current user from MongoDB within a useEffect, and handle loading and error states.

Implement a hamburger menu in a private layout using lucid react to open an entity drawer with menu items for normal users and admins, toggled by onClick.

Render admin and user menu items based on the logged-in user role in a Next.js 14 vehicle rental app, using route paths, icons, and active route highlighting.

Add a logout button to the menu items, call the sign out function from useAuth, clear local storage, and navigate to the home page with a success message.

Move the logged in user data from local component state to a global store to enable cross-page access and reduce redundant API calls.

Develop a reusable spinner component to depict the loading state during API responses in the private layout of a Next.js vehicle rental app, with Tailwind styling and dynamic loading.

Explore the vehicles module intro with admin crud operations, routes for listing, adding, and editing vehicles, and reusable vehicle form and page title components to standardize the user interface.

Build a vehicle form with a vertical entity form, responsive grid, and fields for name, category, brand, model, rent per hour, and image upload, including required validation and finish callback.

Integrate Firebase storage with a Next.js vehicle rental app to upload vehicle images, retrieve their urls, and store them as strings in MongoDB's vehicles collection, using secure env variables.

Learn how to upload multiple images to firebase storage, obtain download URLs, and store them in the mongodb vehicles collection via the vehicle form.

Define the vehicle model with a Mongoose schema, including name, category, brand, model, rent per hour, media, and the is active and status fields, then export the model.

Create the add vehicle server action with a partial I vehicle payload, import the vehicle model, save to MongoDB, and navigate to admin/vehicles on success.

Display admin vehicles list by fetching all vehicles via server action and rendering a client table with columns for category, name, model, brand, rent per hour, added on, and actions.

Navigate to the edit page using next navigation, fetch the vehicle by id, prepopulate the form, save updates via a server action, and revalidate the vehicles view.

Pre-populate the vehicle form's media upload with existing and uploaded images by converting URLs to a file list structure. Implement editing, deleting, and saving, updating the database accordingly.

Implement delete by id in the vehicle module with server action logic and loading state management, plus uppercase category and currency formatting tweaks for the UI.

Implement loading states for server components in next.js 14 by using a loading file or suspense, display a spinner during asynchronous mongo db data fetch, and reuse a server components spinner.

Learn to build a responsive vehicle form in a Next.js 14 app by using md and lg grid spans, ensuring mobile full width fields and full width actions.

Prototype the home and vehicle booking pages by fetching and displaying vehicles, enabling category filtering and sorting, then route to the booking page with a carousel and payment modal.

Learn to build the vehicle booking page by fetching vehicle details by id, displaying a three-column grid with a media carousel and a booking panel for details, dates, and availability.

Build a category filter on the homepage, using eight vehicles across four categories and png icons, and update the url parameter when a category is selected to enable server-side filtering.

Explore category filtering on the homepage by passing category in search parameters, building a dynamic query server action to return cars or all vehicles, with clear user feedback.

Sort vehicles on the home page by rent per hour, from low to high or high to low, with a none option, updating the URL via next router.