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.

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.

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.

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.

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.

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.

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.

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 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.