Next.js Resume Builder App 2024 - MongoDB , Tailwind , Ant D

Explore authentication and authorization with Clerk, using sign in, sign up, and user profile components, with email, password, and social login options.

Integrate Clerk authentication into a Next.js app by configuring environment variables, middleware, and a Clerk provider, then build custom sign-in and sign-up pages with catch-all routes on the app directory.

Learn to implement custom sign-in and sign-up pages in a Next.js app, including email verification, login, logout, and displaying user details in UI and via current user function.

Style sign in and sign up pages with Tailwind, center components, and override Clerk UI styling to use a purple primary color, crafting a responsive authentication UI.

Connect MongoDB to a Next.js project using mongoose by creating a config/database.ts and a connect MongoDB function that reads the URL from .env. Verify server-side connection with a log message.

Set up a firebase project for a Next.js app, obtain config, store it in .env with next public keys, and initialize firebase in a config file for users and assets.

Store current user details in the MongoDB users collection to track users across authentication changes and capture skills, experiences, and projects for the resume builder app.

Create the user model for the resume builder app using mongoose in Next.js, defining clerk user id, name, email, profile pic, and a resume profile data object with timestamps.

Save the current user to the MongoDB users collection with a server action, checking by clerk user id and creating a new user with name, email, and profile pic.

Create a private layout for the Next.js resume app with a header displaying the project title and user info, plus a profile root for updating resume details.

Create a spinner component and display it centered during API loading in the Next.js resume builder app, wired to the layout provider and styled with tailwind.

Demonstrate the sign-out issue in the Clerk Next.js demo, where sign-out briefly navigates away before the sign-in route, a behavior seen in Clerk's official app and not from our side.

Set up a user profile update flow and a four-tab resume builder interface (basic, education, skills, experience) to collect profile data for resume generation.

Wrap the basic details tab in an entity form, apply a vertical layout, and configure responsive grid with required input and career objective fields, plus css tweaks.

Learn to build the education details tab in a resume profile form, adding dynamic education rows with qualification and year of passing.

Copy the education tab logic to build skills and experience sections, adding technology, rating, company, role, start date, end date, and roles and responsibilities, with add and delete actions.

Update the resume profile data by wiring the onFinish handler to save form values to the user document in MongoDB, with prefilled current user data and store synchronization.

Fixes a form bug in the Next.js resume builder by filling missing education, skills, and experience fields from current user data on submit, ensuring profile updates save across tabs.

Set up admin access in the Next.js resume builder by flagging admin users, showing an admin menu, and creating routes for templates, users, and subscriptions, with access restrictions for non-admins.

Implement route-level access control by restricting admin routes for normal users using a protected flag and pathname checks, returning a not authorized message when access to admin pages is attempted.

Explore the template model and complete the backend CRUD operations for templates, including fields name, thumbnail, HTML, and free or paid status, with server actions defined for the API.

practice building server actions for a template model in a Next.js app using MongoDB, including create, read, update, delete, and get by id with proper error handling.

Develop a reusable template form for adding and editing templates in the admin templates route, featuring name, thumbnail, HTML, and a subscribers-only switch, with new and edit routes.

Integrate code mirror react to capture html in the template form, wiring value and onChange, and ensure name, thumbnail, and html fields are captured for saving.

Learn to upload images to Firebase storage, get the download URL, attach it to the template document, and save templates in the Next.js resume builder app.

Build a display templates feature in a Next.js resume builder by fetching templates, rendering them in a templates table, and enabling edit or delete actions with routing to admin/template/edit/{id}.

Implement the edit template workflow by pre-populating form values from the template id and thumbnail, then switch between create and update logic with revalidation and status messages.

Learn to implement delete template with a server action, handle loading states, revalidate after deletion, and prepare for dynamic HTML injection using mustache in a Next.js resume builder.

Install and set up the mustache library in a Next.js project, render dynamic HTML with mustache.render and a data object, then display the result in a client component.

Learn to render dynamic values from arrays of objects and strings in mustache templates by looping skills, experience, and education, then style with css.

Fix the thumbnail edit bug in the template form by updating the edit logic to handle string URLs and image objects, and prepare proper thumbnails for the home page.