Next.js v13.4 Car Rental Application

Install the entity styling framework for component styling, including buttons, models, tables, and forms, and learn to balance server and client components in Next.js using use client.

Learn to override antd theme across a Next.js v13.4 app using the config provider and a client-side layout provider, setting a black primary color and global styles.

Develop a common-classes.css in a new stylesheets folder to standardize margins, padding, flex, and alignment, while reserving global.css for component-level styling for login and registration pages.

Learn to build a centered registration screen for a Next.js v13.4 app, with a bordered card, vertical form layout, and name, email, password fields, focusing on functionality over styling.

Apply form submit validations and replicate the register form for the login screen in a Next.js v13.4 car rental app, using client and server components for authentication.

Create an api folder in the app directory and implement route handlers with route.js or route.ts, returning json responses via the next response to power server-side API routes under /api.

Connect a MongoDB database in a Next.js v13.4 app by creating a config/db config.js, using a dotenv Mongo URL, and joining mongoose.connect to API routes, with a success log.

Create and export a mongoose user model and register API in Next.js, validate duplicates, hash passwords with bcrypt, and return success or error messages while preparing UI integration.

Demonstrate registration api integration by wiring a form to the /api/users/register endpoint with axios, validating name, email, and password, and handling responses with encrypted passwords in MongoDB.

Develop the login API to verify user existence, compare passwords with bcrypt, generate a jwt token with a one-day expiry, and store it as an http-only cookie on the server.

Learn to integrate the login API endpoint in a Next.js v13.4 car rental app by reusing register logic, calling the API with Axios, and managing tokens in cookies.

Explain and implement authorization with middleware for protected APIs in a Next.js v13.4 car rental app, using JWT tokens stored in cookies to validate logged-in users.

Protect APIs by performing server-side current user lookups in Next.js v13.4 car rental app. Fetch current user data on the server, pass cookies securely, and render with server components.

Protect the Next.js v13.4 car rental front end with middleware and token checks to guard protected pages, redirect unauthorized users to login, and manage public routes like login and register.

Create a default layout for protected pages with a header, project title, and dynamic user name, fetching current user data in a layout provider and routing to profile.

Implement logout API in next.js v13.4 car rental app by creating a logout route, clearing the token cookie, and confirming user logout via cookies and navigation to login.

Implement redux to store the current user in a global state, create a user slice with a set current user reducer, and provide the store for cross-page access.

Learn to show a loader during API requests by adding a Redux loader slice, dispatching set loading true on start and false on completion, and rendering a spinner in layout.

Learn to build the admin panel first, implement cards CRUD, and render profile tabs conditionally for normal users and admins in a Next.js v13.4 car rental application.

Build a modal add car form in a next.js admin panel, using client components, car fields, and an axios post to /api/cars with validation and loading feedback.

Define a Mongoose car model with fields like name, brand, fuel type, rent per hour, seating capacity, image, and is active, and implement a post endpoint to add cars.

Display cars in a table by fetching all records from the api/cars route and rendering columns for name, brand, rent per hour, seating, image, with edit and delete actions.

Explore editing a car by selecting it, opening a modal with pre-populated values, and sending a put request to update by id, then reloading the data.

Delete car by car id from query parameters in a Next.js v13.4 api route using axios delete. Handle errors, show loading, and display a success message after deletion.