The text comprises excerpts from a .pdf file detailing the development of an invoicing application using Next.js, React, and various UI component libraries (such as Chakra UI and Lucid React). The author meticulously documents the creation of UI components, including tables, forms, and dropdowns, while implementing server-side and client-side validations with Zod and Form. The process covers building routes for invoice creation and editing, integrating email functionality using Mailtrap, and incorporating data fetching and display from a Prisma database. Finally, the author addresses the creation of a dashboard and landing page for the application, highlighting the transition from development to production deployment.

Project Review: Invoice Management Application

Quiz

1. What is the primary purpose of the package.json file in this project?

• The package.json file lists all the dependencies used in the project and their respective versions. It also includes scripts to run different development processes.

1. Describe the relationship between layout.tsx and page.tsx in the Next.js app structure.

• The layout.tsx file defines the overall structure of the page, and the page.tsx file represents a specific route within that layout. The layout renders its children, which are the routes.

1. Why is TypeScript used in the project, and is it required?

• TypeScript is used to add static typing, which makes the code simpler and easier to maintain, especially in large projects. However, it is not strictly required and the project can be done with JavaScript.

1. What is the purpose of the .env file, and what does it contain in this project?

• The .env file stores environment variables that are needed for the application to run. It includes a secret key used by the Auth.js library and the MailTrap token.

1. Explain the function of the off.ts file within the utils folder.

• The off.ts file is a configuration file for off.js. It defines the authentication providers, specifies custom authentication logic and the adapter, like Prisma or Magic links.

1. What is a “W Handler” in the context of Next.js?

• A “W Handler” is another word for an API endpoint that uses web request and response APIs to handle different requests, for example when signing in or out the user, or fetching data.

1. How does the requireUser hook secure routes in this application?

• The requireUser custom hook checks if a user has an active session. If there is no session, the hook redirects to the login page.

1. What is the role of the useFormStatus hook and where is it used in this project?

• The useFormStatus hook provides the status information for the latest form submission. In this project, it is used in the submit button component to track the pending state.

1. What is the purpose of the MailTrap API token in this application, and how is it used?

• The MailTrap API token is used to authenticate requests to the MailTrap email service. It’s used to send transactional emails such as the invoice reminder emails.

1. Describe the primary goal of the PDF generation functionality in this application.

• The PDF generation functionality generates downloadable invoices. This process creates a PDF with invoice details by fetching them from the database.

Essay Questions

1. Analyze the architectural decisions made in this project, particularly concerning the separation of client-side and server-side components and the use of custom hooks.
2. Discuss the role of third-party libraries (like Auth.js, Shadcn-UI, and jsPDF) in accelerating development and the potential trade-offs of relying on them.
3. Examine the implementation of authentication and authorization in the project, including the use of magic links and the protection of routes.
4. Evaluate the user experience design of the application, considering aspects like the login process, onboarding flow, and invoice management.
5. Describe the process of sending reminder emails and generating PDFs. Include the different tools and steps and how they integrate into the application.

Glossary

• pnpm: A package manager similar to npm but known for being faster and more efficient.
• TypeScript: A superset of JavaScript that adds static typing.
• ESLint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
• TND: An abbreviation that refers to Tailwind CSS, a utility-first CSS framework.
• App Router: A feature of Next.js that allows you to structure your application using a directory based routing system.
• Turbo Pack: A high-performance build system optimized for web development, often used with Next.js.
• vs code: A popular code editor.
• TS config: A configuration file for TypeScript.
• package.json: A file that lists dependencies, scripts, and other metadata for a Node.js project.
• React: A JavaScript library for building user interfaces.
• NextJS: A React framework for building web applications with features like server-side rendering.
• deps: Project dependencies, such as libraries or packages that are required for it to function.
• g ignore file: A file that specifies intentionally untracked files that Git should ignore.
• EnV: A file used to store environment variables, like sensitive information such as API keys.
• Def server: A local development server, often used during development of web applications.
• Off JS: An authentication library for web applications.
• Magic Links: An authentication method where users click a link sent to their email address.
• Radex UI: a UI component library used to speed up the development process with pre-made styled components.
• W Handler: An API route or endpoint that uses web request and response APIs.
• Prisma: A database toolkit that provides an ORM (Object-Relational Mapper).
• use client: A directive used to indicate that a component should be rendered on the client-side.
• useFormStatus: A React hook that provides information about the latest form submission status.
• Lucid react: A library providing icons for web applications.
• International API: a JavaScript API used for formatting dates, numbers, and currency according to locale-specific conventions.
• NodeJS: A runtime environment for executing JavaScript on the server-side.
• jspdf: A client-side JavaScript library for generating PDFs.
• MailTrap: A service for email testing and sending with API integration.
• Sona: A library used for notifications, also known as toast messages, in the front end.
• fetch: An API used for making network requests.
• UI.shat cn.com: The website for a popular UI library which provides components.
• Recharts: A charting library for React applications.
• Cartesian Grid: A grid used to create a space for data visualization, such as a chart.

Invoice Management Application Development

Okay, here’s a detailed briefing document summarizing the provided source, with quotes included where relevant:

Briefing Document: Invoice Management Application Development

Document Overview: This document reviews a series of transcripts detailing the development of an invoice management application using Next.js, TypeScript, and various libraries. The excerpts cover project setup, authentication implementation, UI component creation, email integration, PDF generation, data visualization, and the deployment process.

I. Project Setup and Core Technologies

• pnpm for Package Management: The developer uses pnpm for project creation, highlighting its differences from npm.
• “here let me do a pnpm create and then widespace next Das app at latest so this is how you bootstrap a project with pnpm it’s a bit different than if you would use npm…”
• Next.js as the Framework: The application is built on the Next.js framework, leveraging its features such as the app router and server components.
• TypeScript for Type Safety: TypeScript is used to enhance code maintainability and reduce bugs. While not mandatory, it’s suggested.
• “I use typescript it isn’t required you can use JavaScript that’s fine but typescript makes your life a bit simpler easier…”
• Tailwind CSS for Styling: Tailwind CSS (referred to as “tnd”) is used to style the application. A tailwind.config.js file is part of the setup.
• Project Structure:app folder: Contains most of the core application logic.
• page.tsx: Index page.
• layout.tsx: Application layout.
• api: For API routes.
• dashboard: Features dashboard-related routes.
• invoices: Folder for invoice routes.
• public: Static assets.
• utils: Utility functions and configuration.
• components: Custom and shared UI components.

II. Authentication with Auth.js

• Auth.js Implementation: The application uses Auth.js for handling user authentication.
• “for authentication as you all know there are a lot of options on the market but we will use off JS…”
• Magic Links: The authentication method is magic links, where users enter their email, and receive a login link.
• “in off JS or in combination with off JS we will use magic links this is the method we will use to authenticate the user…”
• Environment Variables: An AUTH_SECRET environment variable is crucial for Auth.js to encrypt tokens and verification hashes.
• “this means we have to add a environment vable which is the off secret this is a random value used by the library to enp tokens…”
• API Route Handler: An API route handler /api/auth/[…nextauth]/route.ts is created to manage authentication API endpoints.

III. UI Component Development

• Custom Components: The developer creates custom components within a separate components directory to distinguish between shared and custom components.
• Shadcn/UI Integration: The project integrates components from shadcn/ui for a consistent and styled user interface. Many components are installed, including card, label, input, button, select, textarea, calendar, and popover.
• Login Form: A login form is built using card, label, input, and button components.
• “…I want to now render my card uh content and in the card content I want to render my label the input and then also our submit button…”
• Pending States: The useFormStatus hook is used to display pending states on form submissions.
• “to show the pending State for the user we will have to use a hook which is called use form status this is a hook provided by react…”
• Custom Submit Button: A custom SubmitButton component is created to manage loading states.

IV. Email Integration with Mailtrap

• Mailtrap SDK: Mailtrap’s Node.js SDK is used to send transactional emails.
• “this is a relatively new feature with mail trap we have a mail trap client which we can now also Implement into our application and then we don’t have to use SMTP anymore…”
• API Token: The Mailtrap API token is stored in an environment variable (MAILTRAP_TOKEN).
• Email Templates: A no-code UI builder is used to create email templates. In this specific case, a “reminder email” template is used.
• Email Sending Logic: An email is sent after an invoice is created.
• “once the user creates an invoice I want to send a email and that’s what we will do inside of here…”
• Email Template: The mailtrap HTML UI builder is utilized to craft a visually appealing reminder email.

V. PDF Generation with jsPDF

• jsPDF Library: jsPDF library is used to generate PDF documents on the server side.
• PDF Document Setup: The PDF is configured with orientation, unit (millimeters), and format (A4).
• “let’s initialize JS PDF so let me do a constant PDF or you could call it DOC but I think PDF is a bit more uh what would you say explanatory if this makes sense and then this is equal to new jspdf…”
• Dynamic Data Rendering: Data from the invoice is dynamically used to populate the PDF. This includes invoice details, sender and receiver information, and item descriptions.
• Custom Layout: The PDF layout is customized with font sizes, text positioning, and lines.
• Content Disposition: The PDF is returned with a header indicating inline display.

VI. Data Visualization

• Recharts Library: Recharts, integrated through Shadcn/UI, is used to create a chart within the dashboard.
• Graph Component: A separate graph component is made which utilizes a JavaScript bundle and is marked as use client. This component displays a line chart representing paid invoices over the past 30 days.
• Data Preparation: The graph data is dynamically fetched and passed to the recharts components.

VII. Other Important Implementation Details

• Server Actions: Server actions were utilized for form handling and data modification.
• Custom Hooks: A custom requireUser hook was created to check if the user is authenticated for protected routes and a custom formatCurrency function was created to ensure consistency when displaying monetary values.
• Toasts: Sonner library is used to display toast notifications when there is a success or failure of actions.
• Empty State: A custom EmptyState component is displayed when no invoices are present on the dashboard.
• Dynamic Routes: Dynamic routes such as dashboard/invoices/[invoiceId] are used to handle individual invoice pages.
• Suspense Boundaries: Suspense boundaries are added for asynchronous components to improve user experience while data is loading.

VIII. Key Quotes and Takeaways

• Focus on UI Consistency: The developer emphasizes importing components from the custom components folder rather than directly from shadcn/ui to avoid errors.
• “please make sure that you import all of your components from the components folder please don’t import it from radex UI if you import it from redex UI you will get a lot of errors and you don’t want that…”
• Code Organization: Importance was placed on a clean architecture, utilizing a utils folder, separate component folders for different component types, and a custom hooks file for reusable logic.
• Importance of Error Handling: There is a consistent implementation of try-catch blocks to gracefully handle errors and display user-friendly messages.
• Data validation: There is a consistent validation of data to ensure data integrity. This includes id validation, user authorization, and checks for optional values.

IX. Next Steps

• Landing Page: The final step before deployment is creating a landing page.
• Deployment: The application is prepared for deployment.

Conclusion: The transcript highlights a detailed development process for an invoice management application using a variety of modern web technologies. It emphasizes the importance of code organization, user experience, error handling, and consistent UI. This briefing document should serve as a comprehensive overview of the development process.

Building a Next.js App with pnpm and Auth.js

1. What is pnpm and how does it differ from npm when creating a new project?

pnpm (Performant npm) is a package manager that is similar to npm (Node Package Manager), but with differences in how it creates projects. When using pnpm, you would use pnpm create followed by the desired project template (in this case, widespace next), while npm uses npm create followed by the project template. Pnpm is known for its efficient disk space usage and faster install times.

2. Why is TypeScript used in this project, and is it required?

While not strictly required, TypeScript is used in this project to make development simpler and easier by providing static typing to JavaScript. TypeScript makes it easier to catch errors and maintain the codebase. However, JavaScript is also a viable option if you are not familiar with TypeScript. The project can be followed without any prior Typescript knowledge.

3. Can you explain the folder structure of this Next.js project?

The project structure includes the following key folders and files:

• tsconfig.json: Configuration file for TypeScript.
• twin.config.js: Configuration file for Tailwind CSS (tnd).
• package.json: Contains project dependencies (e.g., React, Next.js) and scripts.
• next.config.js: Configuration file for Next.js settings, including image whitelisting.
• .gitignore: Specifies files and directories to ignore in Git.
• public/: Stores static files like images and videos.
• app/: The most important folder containing application routes and layouts.
• page.tsx: The index page of the application.
• layout.tsx: The main layout component that wraps all routes.
• globals.css: Stores CSS variables.
• fonts/: For storing custom fonts.
• api/: Contains API routes, including the authentication route (/api/auth/[…nextauth]/route.ts).
• utils/: Contains utility functions and custom hooks.
• components/: Contains reusable UI components.

4. How does the layout component work in Next.js, and how is it connected to pages?

In Next.js, the layout component, typically layout.tsx, wraps the content of all pages within the app folder. The layout renders its defined elements and then inserts the content of the current page as children via children. This means that elements rendered in the layout are persistent across all routes unless specified otherwise.

5. What is Auth.js and why is it used in this project?

Auth.js is an open-source authentication library used to implement authentication for web applications. It provides an easy way to add authentication with various methods. In this project, it’s used with magic links, where users enter their email, receive a link, and are then redirected back to the application, thus validating them as the owner of the email.

6. How is user authentication handled in this application and what is a magic link?

User authentication is handled using Auth.js in combination with magic links. A user enters their email address, and the application sends an email to that address containing a unique link. The user clicks the link, and upon returning to the application, their session is established. Magic links provide a passwordless method of authentication.

7. How is the dashboard route protected and what is the requireUser hook?

The dashboard route is protected by a custom hook called requireUser. This hook checks if a valid user session exists. If no valid session is found, it redirects the user to the login page. The hook is used on server components to ensure that unauthorized users cannot access secured routes. The requireUser hook encapsulates the logic to check if a user is authenticated and handles the redirection if a user is not.

8. How is PDF generation implemented and what libraries are used?

PDF generation is implemented using the jsPDF library. The library is used to create a PDF document programmatically, adding text, lines, and formatted data. Once the PDF document is created, it’s converted into a buffer and returned as a downloadable file (or displayed inline in this example) via the HTTP response.

Card UI Component Implementations

The sources describe various implementations of Card UI components, often using a combination of custom components and styling utilities, particularly from Shadcn UI. These cards are used to structure content, provide visual separation, and create interactive elements in web applications.

Key aspects of card UI in the sources include:

• Structure:
• Cards are often built using a card component as a base, which may include a card header, card content, and card footer.
• The card header typically contains titles, descriptions, and icons.
• The card content houses the primary content of the card, such as forms, tables, or images.
• The card footer often contains buttons or links for interaction.
• Layout and Styling:
• Cards use flexbox and grid layouts for positioning elements.
• Classes such as flex, flex-col, items-center, justify-center, grid, and grid-cols-* are used for layout.
• Spacing is controlled using utility classes like gap-*, m-*, p-*, and space-y-*.
• Cards are given a maximum width using max-w-* and are centered with mx-auto.
• Background colors, borders, and rounded corners are added using classes like bg-*, border, and rounded-*.
• Text styling includes classes for size (text-*), weight (font-*), color (text-*), and alignment (text-center).
• Custom widths can be set using array brackets, for example, w-[380px].
• Components:
• Custom components such as Card, CardHeader, CardContent, CardTitle, CardDescription, and CardFooter are used.
• These components are styled using utility classes from libraries like Shadcn UI.
• Buttons within cards are often styled using the buttonVariants method to maintain consistency.
• Icons from libraries like Lucid React are integrated within card components using components such as MailIcon, AlertCircle, ArrowLeft, Pencil, DownloadCloud, Trash, CheckCircle, DollarSign, and Users.
• Forms and inputs are created within cards, including labels, text areas, and select elements.
• Images and GIFs are also incorporated into the card.
• Specific Implementations:
• Login Form: Uses a card to contain a form with labels, inputs, and a submit button.
• Verification Page: Uses a card with an icon, title, and description to indicate email verification.
• Invoice List: Displays a card with a title, description, and a table of invoices.
• Invoice Creation Form: Uses a card to contain a multi-input form for creating new invoices.
• Delete Invoice Confirmation: Shows a card with a warning message and confirmation buttons.
• Mark Invoice as Paid Confirmation: Displays a card with a confirmation message and buttons to mark the invoice as paid.
• Dashboard Blocks: Uses multiple cards in a grid layout to display key metrics and data.
• Invoice Graph: Renders a card containing a chart to visualize invoice data.
• Responsiveness:
• Cards are designed to be responsive using grid layouts and media queries, like md: and lg: prefixes in class names.
• Cards may use a maximum width, such as max-w-sm, to limit their size on larger screens.
• The layout of card content may change based on screen size, for example using grid-cols-2 or grid-cols-3.
• Interactivity:
• Cards include interactive elements like links and buttons, often styled with the buttonVariants method.
• Some cards have popovers or dropdown menus for additional actions or information.
• Cards are frequently integrated with server actions to perform actions such as submitting forms, deleting invoices, and marking invoices as paid.
• Theming:
• Cards use CSS variables provided by Shadcn UI for consistent styling.
• Color palettes are defined in CSS and used within utility classes such as bg-muted, text-muted-foreground, and bg-primary.
• Custom colors and gradients are also implemented.

In summary, the card UI implementations in the sources are built using a combination of flexible layout techniques, custom components, styling utilities from Shadcn UI, and interactive elements. They are designed to be responsive and maintain a consistent look across the application.

Shadcn UI Button Styling Guide

The sources provide several examples of button styling, primarily using the buttonVariants method from Shadcn UI, along with other utility classes to achieve specific looks. The goal is to create consistent, accessible, and visually appealing buttons that enhance user interaction.

Key aspects of button styling include:

• buttonVariants method:
• This method is used to apply a consistent set of styles to button elements, whether they are <button> elements or <a> elements styled to look like buttons.
• It is imported from the components folder and invoked with an object that specifies style variations.
• The method allows for dynamic styling through variants and class names.
• Variants:
• The variant property is a key aspect of button styling using buttonVariants.
• Common variants include outline, secondary, ghost, and destructive.
• The outline variant creates a button with a border and transparent background.
• The secondary variant provides a button with a muted background color.
• The destructive variant is used to highlight potentially dangerous actions and often uses a red background color.
• If no variant is provided, the default style is applied.
• Class names:
• The class name property is used to add additional styling, including width, margin, and other CSS properties.
• For example, w-full makes the button take the full width of its container.
• Other classes include rounded-full for rounded corners, and text-left for aligning text to the left.
• Button components:
• Buttons are typically rendered using the <button> component from the components folder or are stylized <a> elements using the <Link> component from next/link.
• The asChild property is used to prevent the error of a button being a descendant of a button when using the Link component.
• Icons:
• Icons from libraries like Lucid React are integrated within button elements to enhance their visual appeal.
• Icons are given class names for sizing (size-*) and spacing (mr-*, ml-*).
• Dynamic Text:
• Button text can be passed as a dynamic property, allowing for the text to be changed without creating a new component.
• Styling links as buttons:
• The buttonVariants method is used to style the Link component from next/link to look like buttons, which allows for navigation while maintaining a consistent button style.
• Accessibility:
• The button styles provided by Shadcn UI are designed to be accessible, with appropriate contrast and focus states.
• Submit Buttons:The submit button component is designed to handle form submission and has a pending state with a spinner.
• The text property renders dynamic text for the submit button, and the variant property allows for different styling variations.

In summary, button styling in the sources is achieved through a combination of the buttonVariants method, utility classes, and careful integration of icons and text. This approach allows for creating visually appealing and functional buttons that provide a consistent user experience across the application, which enables styling buttons with various backgrounds, borders, text alignment, and interactive feedback.

Shadcn UI Table Rendering

The sources describe a comprehensive approach to rendering tables, primarily within the context of displaying invoice data, using a combination of custom components and styling utilities from Shadcn UI. The process involves creating a responsive and visually appealing table that can handle dynamic data and user interactions.

Key aspects of table rendering include:

• Structure:
• A table component serves as the wrapper for the entire table structure.
• The table is divided into a table header and a table body, each with distinct roles.
• The table header contains the column labels, rendered using table row and table head components.
• The table body houses the actual data rows, rendered with table row and table cell components.
• Components:
• Custom components like Table, TableHeader, TableRow, TableHead, TableBody, and TableCell are used to construct the table.
• These components are styled using utility classes from libraries like Shadcn UI, ensuring a consistent look and feel.
• The table header uses table head elements to define column labels, and the table body renders rows using table cell elements to display data values.
• Layout and Styling:
• The table is made responsive using flexbox and grid layouts.
• Classes such as flex, flex-col, items-center, justify-center are used for positioning.
• Spacing is managed using classes like gap-*, m-*, p-*.
• Text alignment is controlled with classes like text-left and text-right.
• Custom widths can be set using array brackets, for example w-[100px].
• The table uses CSS variables provided by Shadcn UI for consistent styling.
• Dynamic Data:
• Tables are designed to display dynamic data fetched from a database or an API.
• The data is typically mapped over to create table rows using the map function.
• Each data item corresponds to a row, and each property of a data item populates the table cells within that row.
• The key prop is used to uniquely identify each row when mapping over data.
• Table Header:
• The table header uses the table head component which serves as labels for the data below, for example, “invoice ID,” “customer,” “amount,” “status,” “date,” and “actions”.
• Table head elements can be styled individually, for example with text-right, to control alignment.
• Table Body:
• The table body renders rows of data with table cell elements.
• Each table cell contains a value from the fetched data, corresponding to the column it is in.
• The content of table cells is rendered dynamically, often with the help of helper functions, for example to format a date, or format currency.
• Actions Column:
• The “actions” column often includes a dropdown menu for interactions with each row.
• The dropdown is rendered with the DropdownMenu, DropdownMenuTrigger, and DropdownMenuContent components from Shadcn UI.
• The dropdown menu items are links styled to look like buttons with the buttonVariants method.
• These dropdown menus may contain interactive elements such as “edit invoice”, “download invoice”, “send reminder email”, “delete invoice”, and “mark as paid”.
• The alignment of the dropdown menu content is controlled using the align property of DropdownMenuContent.
• Responsiveness:
• Tables are designed to be responsive and adapt to different screen sizes.
• Layout changes, such as column widths, are often managed using media queries.
• Integration with other components:
• Tables are frequently integrated with other components such as cards and popovers to provide a structured user interface.
• They are often used within card components to display data within a container.
• Conditional Rendering
• Tables can be rendered conditionally based on data availability. An empty state component can be rendered if there is no data.
• A fallback can be rendered when loading table data, for example with the Suspense component.
• Dropdown menu items can be conditionally rendered, for example, the “Mark as paid” item is only shown when the invoice is not already marked as paid.

In summary, table rendering in the sources is achieved through the use of a flexible and modular structure with custom components, styling utilities from Shadcn UI, and dynamic data mapping. The resulting tables are responsive, visually appealing, and integrate well with the other UI components of the application, providing users with a clear view of their data and the ability to interact with it.

Client-Side Validation with Conform and Zod

Client-side validation is implemented in the sources using the Conform library in conjunction with Zod. This approach ensures that form data is validated on the client side before submission, providing a better user experience with immediate feedback, and also ensures that the data is safe to store in the database.

Here’s a breakdown of how client-side validation is handled:

• Zod for Schema Definition:
• Zod is used to define the schema for form data. This involves specifying the types of fields (e.g., string, number, email) and any additional constraints (e.g., minimum length, required).
• For example, a schema can specify that a “first name” field must be a string with a minimum length of two characters, and it can provide a custom error message if this rule isn’t met.
• Schemas are defined in a separate file, for example, zortSchemas.ts.
• The schemas are then imported in the components where the forms are rendered.
• Conform for Validation:
• Conform is used to validate form data against the Zod schema, on both the client side and the server side.
• The useForm hook from Conform is used to manage form state and validation. This hook is initialized with the last result from the server action, to keep the client and server state in sync.
• The useForm hook takes a validate callback that performs the actual validation using the passWithZod function.
• The passWithZod function compares the form data against the Zod schema and returns any errors.
• passWithZod Function:
• The passWithZod function is imported from @conform/zod and is used to compare form data against the Zod schema.
• It takes the form data and the Zod schema as arguments and returns a submission object that contains the validation result, including any errors.
• useActionState Hook for Server Communication:
• The useActionState hook from React is used to handle server actions and to get responses from server actions.
• It takes the server action and an initial state as arguments. It returns the last result from the server action and the server action itself. This hook is used to make a connection between the client side and server side, so that if there are server-side errors, the client can render the errors below the input fields.
• Form Setup:
• The form element is connected to Conform using the form.id and form.onSubmit properties that are returned from the useForm hook.
• The noValidate property is set on the form to prevent the browser’s default validation.
• Input Field Integration:
• Input fields are connected to Conform using the fields object returned from the useForm hook.
• Each input field uses fields.[fieldName].name, fields.[fieldName].key and fields.[fieldName].defaultValue.
• Error Display:
• Errors are displayed using fields.[fieldName].errors. This displays any errors returned by the validation process.
• Error messages are typically styled with a small red font.
• Validation Triggers:
• The shouldValidate property in the useForm hook is set to onBlur, which means the form is validated when an input loses focus.
• The shouldRevalidate property is set to onInput, which means the form is revalidated whenever the value of an input changes. This provides real-time validation as the user types.
• Reusing Schemas:
• The same Zod schemas are used for both client-side and server-side validation, ensuring consistency between the two. This reduces the risk of discrepancies in validation logic.

In summary, client-side validation in the sources utilizes Conform and Zod to provide robust, type-safe, and user-friendly form handling. This approach not only enhances the user experience by providing immediate feedback on errors but also ensures data integrity before it’s submitted to the server.

Invoice Creation Process

Invoice creation, as described in the sources, is a complex process involving multiple steps, from designing the user interface to implementing server-side logic for data storage and email notifications. The process is designed to be user-friendly, with a focus on real-time validation and a seamless user experience.

Here’s a detailed breakdown of invoice creation:

• User Interface (UI) Design:
• The invoice creation form is built using a combination of custom React components and styling from Shadcn UI.
• The form is divided into sections, each with relevant input fields, for example, a “from” section, a “client” section, a “date and due date” section and an “invoice item” section.
• Input Fields: The form includes various input fields for capturing invoice details, including:
• Text inputs for names, email addresses, addresses, invoice numbers, and descriptions.
• A date picker component for selecting the invoice date.
• A select input for choosing the due date (e.g., net 0, net 15, or net 30).
• Number inputs for quantity and rate of invoice items.
• A text area for adding a note.
• A currency selector.
• The form is structured using grid layouts to create a responsive design, adapting to different screen sizes.
• The form is styled with utility classes from Shadcn UI, for example card, input, label and button to maintain a consistent look and feel.
• Each input is linked to a Conform field, for data management and for client-side validation.
• Client-Side Validation:
• Client-side validation is implemented using the Conform library and Zod.
• Zod is used to define the schema for the invoice data. This schema specifies data types and constraints, such as required fields, minimum lengths, and valid email formats.
• The useForm hook from Conform manages form state and performs validation against the Zod schema using the passWithZod function.
• Real-time validation is triggered on blur and input changes with shouldValidate and shouldRevalidate properties in useForm, providing immediate feedback to the user.
• Errors from validation are displayed below each input field with the fields.[fieldName].errors property.
• Server-Side Action and Data Handling:
• A server action is defined to handle the form submission. This action is marked with the use server directive, indicating it will run on the server.
• The server action uses the same Zod schema for server-side validation, ensuring consistent validation logic.
• The server action first validates the data against the Zod schema using the passWithZod function. If validation fails, error messages are returned to the client.
• If validation is successful, the server action proceeds to create a new invoice record in the database using Prisma.
• Prisma is used as the ORM to interact with the database. The data is stored in the invoice model, which includes fields for all the invoice details.
• The invoice model also includes relations to the user model, allowing for tracking which user created a particular invoice.
• The server action returns a new invoice id, so the user can be redirected to the correct page.
• Email Notifications:
• After creating the invoice, an email is sent to the client.
• Mailtrap is used to send emails. The application uses the Mailtrap SDK, which is easier to implement than a generic node mailer.
• Email templates are created using Mailtrap’s HTML Builder with dynamic data rendering.
• The server action sends a custom email with the invoice details, using the created template.
• The email includes the invoice number, due date, total amount, and a link to download the invoice PDF.
• The email also includes the name of the client, so that the email is personalized.
• PDF Generation:
• A PDF document is generated from scratch using the jspdf library.
• The PDF generation process is initiated via a route handler that fetches the invoice data from the database and converts the invoice details to PDF format, enabling users to download it as a real PDF file rather than just a screenshot.
• The PDF includes key details such as the invoice number, the names of the sender and recipient, as well as the items, quantity, rate and total.
• Integration with Other Components:
• The invoice creation form is integrated into the main dashboard of the application.
• The form uses other components such as cards and popovers, to keep the layout clear and organized.
• The invoice creation form fetches the user information, including the name and address from the database, using the user id from the session.
• Error Handling:
• Both client-side and server-side validation provide error messages when form data is invalid.
• Errors are displayed next to the corresponding input fields, giving the user an idea of what needs to be corrected.

In summary, the invoice creation process is a carefully orchestrated flow involving form rendering, real-time validation, server-side logic, database interaction, and email notifications. It ensures data integrity, provides a smooth user experience, and delivers professional-looking invoices.

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!

The text details the creation of a full-stack learning management application using Next.js, Node.js, and AWS. It covers the development process step-by-step, including front-end UI construction with ShadCN components and Tailwind CSS, back-end API design with database interaction, authentication via Clerk, and payment integration with Stripe. The tutorial extensively explains the use of Redux Toolkit Query for efficient data fetching and management. Finally, it addresses features like course creation, editing, and user progress tracking.

Learning Management Application Study Guide

Quiz

1. What is the primary function of Node.js in the context of this application? Node.js is a server-side JavaScript runtime that allows JavaScript code to be executed on the server. In this application, it enables the creation of a backend that can handle requests and data management.
2. Explain the purpose of npx create-next-app in the project setup. npx create-next-app is used to create a new Next.js application with a default configuration. This provides a quick start for building the frontend of the application.
3. What are two essential VS Code extensions recommended in the source, and what are their purposes? The two essential extensions are ES7+ React/Redux/React-Native snippets, which helps create React components, and Prettier, which formats code automatically upon saving, ensuring consistent formatting.
4. Describe the role of Clerk in the application. Clerk is an authentication service that is used to handle user sign-up, sign-in, and profile management within the learning management system. It simplifies the process of managing user accounts.
5. What is Tailwind CSS, and how is it used in the project? Tailwind CSS is a utility-first CSS framework. In this application, it is used to style components by applying predefined classes, which are imported in a global CSS file, avoiding the need to write custom CSS from scratch.
6. Why is DynamoDB chosen as the database for this application, and what type of database is it? DynamoDB is chosen for its scalability, performance, and suitability for applications with fewer tables and relationships. It is a NoSQL database and allows you to store data, in this application, such as courses, transactions, and user progress.
7. What is the significance of the “non-dashboard” layout in the application? The “non-dashboard” layout is used for pages that do not require user authentication or are not part of a user dashboard. This includes the landing page, course search, and authentication pages.
8. Explain the difference between the course object and the user course progress. The course object stores core course information such as the title, description, and teacher ID. The user course progress tracks how much progress a single user has made in a specific course, including how much they’ve completed. This is a separate object to avoid a massive object in the case of multiple users.
9. What is the purpose of Shadcn UI libraries in this application? Shadcn UI libraries provide pre-built, accessible, and customizable React components. In this project, they are used to quickly build UI elements such as buttons, forms, and dropdowns with consistent styling.
10. What is a payment intent in the context of Stripe, and how does it relate to the backend? A payment intent is a Stripe object that represents a customer’s intent to pay. The backend of the application creates a payment intent, and then the frontend uses this to process payments.

Essay Questions

1. Discuss the architectural choices made in the development of this full-stack learning management system, considering the trade-offs between different technologies and approaches. How do these decisions contribute to the scalability and maintainability of the application?
2. Analyze the data modeling approach used in this application. Why were separate data structures used for course information and user course progress, and how do these choices impact the performance and complexity of the system?
3. Evaluate the use of serverless functions (AWS Lambda) in this project. What are the benefits and challenges of using this technology, and how does it align with the overall goals of the learning management application?
4. Explain the role of third-party services, such as Clerk and Stripe, in this learning management application. How do these services simplify development, and what are the potential drawbacks of relying on external providers?
5. Describe the process of deploying and managing this application on AWS and Vercel. What steps were taken to ensure the security, performance, and reliability of the deployed system?

Glossary of Key Terms

AWS (Amazon Web Services): A cloud computing platform providing various services, including storage, computing power, and databases.

API Gateway: An AWS service that acts as a front door for applications to access backend services. It helps in securing and managing APIs.

CORS (Cross-Origin Resource Sharing): A browser security mechanism that restricts web applications from making requests to a domain different from the one that served the web application.

Clerk: A third-party service for managing user authentication and authorization in web applications.

CloudFront: AWS’s content delivery network (CDN) service. It stores content and delivers it from edge locations closer to the user, improving loading times.

Container: A lightweight, standalone executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries, and settings. Docker is an example of container technology.

Docker: A platform for developing, shipping, and running applications in containers.

DynamoDB: A fully managed, serverless NoSQL database offered by AWS. It is designed for scalability and high performance.

ECR (Elastic Container Registry): A managed Docker container registry that allows developers to store and retrieve Docker container images.

Framer Motion: A library used for adding animations to React components.

IM (Identity and Access Management): A service provided by AWS that helps in managing access to resources. It is used to create roles and manage permissions.

Lambda: A serverless compute service by AWS that allows running code without provisioning or managing servers.

Middleware: Software that provides services and capabilities that can be applied across different parts of an application.

Molter: Middleware for handling multipart/form-data, which is primarily used for uploading files.

Next.js: A React framework for building full-stack web applications. It provides features such as server-side rendering and routing.

Node.js: A JavaScript runtime that allows JavaScript code to run on the server.

NoSQL: A type of database that is not based on the traditional relational model (SQL). It is suitable for handling unstructured or semi-structured data.

npm: The package manager for Node.js. It is used for installing and managing packages needed in a project.

npx: A tool that executes npm packages.

Redux Toolkit Query: A data fetching and caching solution built on top of Redux.

Shadcn UI: A library of pre-built and customizable UI components for React applications.

SQL: Structured Query Language is a language for managing and querying data in relational databases.

S3 (Simple Storage Service): A scalable object storage service by AWS.

Serverless: A cloud computing execution model where the cloud provider manages the infrastructure, and developers only focus on writing and deploying code.

Stripe: A third-party service that provides payment processing infrastructure for applications.

Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to style HTML elements.

TypeScript: A strongly typed superset of JavaScript that adds static typing to the language.

Vercel: A platform for deploying and hosting frontend web applications, with a focus on performance and ease of use.

VPC (Virtual Private Cloud): A virtual network in AWS that allows users to launch AWS resources in a logically isolated network environment.

Full-Stack LMS Application Development

Okay, here is a detailed briefing document summarizing the provided text, including key themes, ideas, and quotes:

Briefing Document: Full Stack Learning Management Application

Overall Theme: This document details the step-by-step construction of a complete, production-ready Learning Management Application (LMS). The application utilizes a Next.js frontend, a Node.js backend, and AWS for deployment, aiming to be a comprehensive portfolio piece. It stresses beginner accessibility by explaining concepts in simple terms, and the creator encourages the audience to use parts or the whole project in their own portfolios.

Key Ideas and Facts:

• Application Overview:The LMS features a landing page with animations, course listings, user signup/login (Clerk authentication), user profiles, billing, and course creation capabilities.
• The application is intended to be production-ready with its own set of use cases.
• “This application is probably one of the most extensive applications I’ve ever built on YouTube and I might even use this for my own purposes of creating a course.”
• Frontend Technologies (Next.js):Utilizes Next.js for the frontend framework, building components with React.
• Leverages Tailwind CSS for styling, with many classes pre-defined for rapid development, instead of spending time styling.
• Imports Google Fonts (DM Sans) for styling.
• Uses Shadcn for pre-built UI components and theming, enhancing the overall development process.
• Implements framer-motion for animations, primarily for transitions and loading states.
• Redux Toolkit Query is used for efficient data fetching and state management.
• “We’re just going to be using those classes for our Styles they are already using Tailwind classes we’re going to be using those and we’re just going to apply those classes directly onto Those comp components”.
• Backend Technologies (Node.js):Employs Node.js as the server-side JavaScript runtime.
• Uses Express.js for creating the API endpoints.
• DynamoDB (NoSQL) is selected as the database with data being persisted locally during development.
• Dynamus provides schema validation and database interaction for DynamoDB
• “Dynamo DB excels more so than mongod DB if you have less tables ideally you have less tables”
• The app utilizes AWS SDK for direct database access.
• Includes an environment variable configuration system with .env files.
• Utilizes Multer to handle file uploads on the backend.
• Database Design (DynamoDB):Data is modeled using three core schemas: course, transaction, and user course progress.
• A key point is the separation of user course progress from the main course object to manage large amounts of data efficiently and prevent single object bloat.
• “we do not store the progress of the user because you know how the user watches a video they are progressing through and we need to save information on how far they have gotten in that course whether they completed a certain section or a chapter that is where the user course progress is aligned.”
• The project uses DynamoDB local for development, with persistence using dbPath config.
• DynamoDB was chosen as it is well suited to the project’s data needs, as it has relatively few tables and is highly scalable.
• “Dynamo DB is much more fast and performant and skills but it is even worse than mongod DB and document DB of complex filtering and sorting.”
• Authentication (Clerk):Clerk is used for handling user authentication.
• Middleware routes are created to protect specific pages (user/teacher dashboards) based on user roles.
• Uses Clerk Provider to wrap the application for state and data management, and middleware to determine which routes require authentication.
• User roles are stored in Clerk metadata as either “student” or “teacher”.
• The project creates a separate “auth” folder for auth related pages.
• Payment System (Stripe):Integrates with Stripe for handling payments.
• The backend creates Stripe payment intents that connect directly to the front end.
• The project integrates a Stripe Provider to wrap around payment content pages.
• The project uses react-stripe-js to handle stripe functionality on the frontend.
• UI Components & Styling:Emphasizes the usage of existing styles (Tailwind) and pre-built components (Shadcn) to avoid spending too much time doing styling.
• Utilizes the Sunner library for creating toast notifications for user feedback.
• Custom UI components are built to reuse common functionalities.
• Loading screens and animations enhance the UI and user experience.

1. Course Creation and Management:

• Allows users with teacher roles to create courses by populating a course form.
• Chapters and Sections can be added to courses via modals.
• The application supports editing and deleting of courses, sections and chapters, and the ability for teachers to edit and upload videos, though this is implemented later in the series with S3 bucket.
• State Management (Redux Toolkit):Uses Redux Toolkit and RTK query for handling client state and making API requests.
• Custom base query is configured to show toast notifications from the API response.
• Redux is used to manage the application’s state, like whether modals are open.
• The project uses Redux toolkit query to handle API requests.
• AWS Deployment:Application is deployed to AWS using Lambda, API Gateway, and S3.
• Docker is used to containerize the backend application and deploy it to ECR.
• IAM roles are configured to grant necessary permissions for Lambda to access other AWS services.
• CloudFront is used for CDN to make loading video fast for users.
• Vercel is used to host the front end application because the creator faced issues using AWS Amplify.
• A basic budget system is recommended using AWS billing so that developers are not charged extra.
• “. The Lambda is going to take some time to load it’s not that much but there is a little bit of delay if someone H if you don’t have assistant users constantly using your application”
• Code Organization and Setup:The project is broken into several major directories, including client, server, and source.
• The server has different folders for utils, seed, models, routes and controllers.
• The client has different folders for components, app, lib, state and types.
• The project uses typescript for both the client and the server and has necessary types installed for various libraries.
• The project uses a custom base query to have consistent error handling across different API requests.

Important Quotes (reiterated for emphasis):

• “This application is probably one of the most extensive applications I’ve ever built on YouTube and I might even use this for my own purposes of creating a course.” (Emphasis on scope and usability)
• “We’re just going to be using those classes for our Styles they are already using Tailwind classes we’re going to be using those and we’re just going to apply those classes directly onto Those comp components.” (Emphasis on rapid development with pre-defined styling.)
• “Dynamo DB excels more so than mongod DB if you have less tables ideally you have less tables” (Reasoning behind database choice.)
• “we do not store the progress of the user because you know how the user watches a video they are progressing through and we need to save information on how far they have gotten in that course whether they completed a certain section or a chapter that is where the user course progress is aligned.” (Emphasis on data modeling best practice)
• “Dynamo DB is much more fast and performant and skills but it is even worse than mongod DB and document DB of complex filtering and sorting.” (Discussion about pros and cons of the chosen database)
• “The Lambda is going to take some time to load it’s not that much but there is a little bit of delay if someone H if you don’t have assistant users constantly using your application” (Emphasis on cold start)

Conclusion: This source provides a thorough walkthrough of building a modern web application from start to finish. It covers a broad range of technologies and best practices, making it a valuable resource for developers interested in full-stack development, cloud deployment, and understanding the interplay between various web components and services. The emphasis on production readiness and beginner accessibility makes it suitable for developers of all skill levels.

Full-Stack LMS Application Development

Frequently Asked Questions: Full-Stack Learning Management Application

• What is the purpose of this application being developed? This project aims to create a comprehensive, production-ready Learning Management System (LMS) with a Next.js frontend, Node.js backend, and deployment on AWS. It’s designed to be a full-stack application that could be used for course creation and delivery. The application provides features for user authentication, course browsing, user settings management, and billing. The creator of this project also mentions that it can be used as a reference or portfolio project for other developers.
• What technologies and tools are used in this project? The project utilizes several key technologies:
• Frontend: Next.js for the user interface and React components, along with styling using Tailwind CSS and Shadcn UI components. Additional libraries like Framer Motion are used for animations and React Player is used for video playback.
• Backend: Node.js and Express.js for the server-side logic, with AWS SDK for interacting with AWS services like DynamoDB. Data validation is done with ‘Dynamus’ and unique IDs are created using uuid.
• Authentication: Clerk is used to manage user authentication and authorization including sign-up, sign-in, profile management, and session handling.
• Database: DynamoDB (local for development and cloud-based on AWS for production) is chosen as the NoSQL database.
• Cloud: AWS is used for hosting the application, including ECR for storing Docker images, Lambda for the backend server, S3 for storage, and CloudFront for content delivery. Vercel is used for hosting the front-end application. Other tools include npx, prettier, Visual Studio Code, pesticide, redux dev tools.
• How is the user authentication handled in this application? User authentication is managed by Clerk, a third-party service that provides a comprehensive authentication platform. Clerk handles user registration, email verification, sign-in, and profile management. It also manages sessions and provides necessary components for easy integration with the frontend. The application also stores user types (student or teacher) in Clerk metadata. The application also uses a middleware that protects certain routes that can only be accessed through authentication using Clerk.
• Why was DynamoDB chosen for the database? What are its advantages and disadvantages in this context? DynamoDB, an AWS NoSQL database, was chosen for its scalability, performance, and cost-effectiveness. Its advantages include:
• Scalability and performance: DynamoDB is well-suited for handling large amounts of data and high-traffic applications with fast reads and writes.
• Cost-effectiveness: It provides a generous free tier for developers and is generally cost-effective when scaled.
• No complex relationships: This project’s schema is simple with only 3 tables, making DynamoDB a viable option. However, DynamoDB has disadvantages:
• Not ideal for relationships: It is not ideal for complex relational data structures, hence not best practice to store nested data.
• Filtering and sorting: It is not as strong at complex filtering and sorting of data compared to other NoSQL databases like MongoDB.
• Data Nesting: DynamoDB isn’t well suited for nested data and can lead to dense data structures if not handled properly.
• How is the data structured in this application (data modeling)? The data is structured with three main entities:
• Course: Stores all details of a course, including teacher ID, title, description, price, and category.
• Transaction: Contains details for each transaction or payment made including information about payment providers.
• User Course Progress: Stores a user’s progress in a specific course, including completed sections and overall progress. This is separated from the main course object to avoid a large and dense data structure. This design decision prevents excessive data in the main course object when there are multiple users associated with the same course.
• How is the backend API built and how can you test it? The backend API is built using Node.js, Express.js, and AWS SDK. It is structured with controllers containing the logic, models for the schema of our data, and routes to connect the endpoints. The setup is done by importing necessary modules and then the app is set up to use middleware such as express.json(), helmet(), and morgan() to handle and log request and security. The routes are then set up to handle different endpoints.
• Testing the backend API can be done through tools like curl (directly in the terminal) or through a UI tool like Postman for making API calls and inspecting responses. Locally, the server is run through npm run dev, while building for production runs with npm run build.
• How are payments integrated into the application? Payments are integrated using Stripe. The application utilizes the Stripe JavaScript library (stripe.js) along with @stripe/react-stripe-js. This setup is used to create payment intents on the backend, and to process payments through the client side. React context is used to manage payment information. The checkout flow involves steps to get course information, handle payment details and the creation of a client secret key, and finally the rendering of payment information before completion. This is all done with a Stripe provider.
• How is the application deployed and how is a serverless function used? The application is deployed using several AWS services and Vercel. Here’s how it works:
• Frontend Deployment: The frontend is deployed using Vercel, a platform that simplifies the deployment of front-end applications.
• Backend Deployment: The backend is packaged into a Docker container and deployed on AWS Lambda. The Docker image is stored in AWS ECR (Elastic Container Registry) and is used by the Lambda function. Lambda provides a serverless compute service that runs the application code.
• API Gateway: An API Gateway is used as a front-end for the Lambda function, providing a secure endpoint for the frontend to interact with the backend logic and routes.
• Serverless Logic: The server uses the serverless-http library for compatibility with the serverless environment. The Lambda function has permissions granted using IAM roles that are assigned for different AWS services, allowing access to DynamoDB and S3.
• S3 and CloudFront: AWS S3 is used to store static assets or files. AWS CloudFront is set up as a CDN (Content Delivery Network) to distribute the content to users for faster loading times.
• The serverless function is used by exporting the Lambda handler. The Lambda handler handles seed functions in the database and defaults to the serverless app function otherwise.

Full-Stack Learning Management Application Architecture

The sources describe a full-stack learning management application built with a Next.js frontend, Node.js backend, and deployed on AWS. Here’s a breakdown of the key components and technologies used:

Application Overview

• The application includes a landing page with animations, a course catalog, user authentication, user profiles, billing information, and course progress tracking.
• It is designed to be a production-ready application with a focus on scalability and customizability.
• The application is also responsive, adapting to different screen sizes.

Frontend Technologies

• Next.js: Used as the primary framework for building the user interface.
• Redux Toolkit: Manages the application state.
• Redux Toolkit Query: Handles API interactions with the backend.
• Tailwind CSS: Provides styling along with the Shadcn component library.
• TypeScript: Used for type checking.
• Framer Motion: Implements animations.
• React Hook Form: Handles form management and Zod for form validation.

Backend Technologies

• Node.js and Express: Used to create the backend API, separate from the Next.js frontend, to enhance scalability.
• Docker: The backend is containerized using Docker for consistent environment packaging.
• AWS Lambda: Hosts the backend, using the Docker image from ECR.
• API Gateway: Securely routes requests to Lambda functions.
• DynamoDB: Serves as the NoSQL database.
• S3: Handles storage of video content.
• CloudFront: Used as a content delivery network for videos to ensure low latency and high availability.

Authentication

• Clerk: A third-party service is used for user authentication, offering pre-built components for sign-in, sign-up, and user management. It is used instead of AWS Cognito due to its easier setup.

Deployment

• AWS: The application utilizes a serverless containerized architecture on AWS.
• Vercel: Hosts the Next.js frontend, integrating with other AWS services.

Key Features

• Course Management: Users can browse courses, view course details, and track their progress. Teachers can create and edit courses.
• User Authentication and Management: The application uses Clerk for user authentication, profiles, and roles.
• Billing: The application uses Stripe for payment processing.
• Responsive Design: The application is designed to adapt to different screen sizes.

Development Process

• The development process includes setting up Node.js, NPX, and Visual Studio Code.
• The project utilizes various libraries and extensions for React development and code formatting.
• The application also uses a custom base query to format API responses, handling data and error messages.
• The application is deployed on AWS using services such as Lambda, API Gateway, DynamoDB, S3, and CloudFront.
• The deployment also includes setting up IM roles to manage permissions for Lambda to access other AWS services.

Data Modeling

• The application uses a NoSQL database, DynamoDB, due to the nature of the data and relationships.
• The data model includes courses, sections, chapters, user progress, and transactions.
• User progress is stored separately from course data to prevent overly large data objects.

Additional Points

• The application emphasizes learning backend and deployment skills, not just frontend.
• The use of a custom base query in Redux Toolkit Query provides a way to format API responses and display toast notifications for successful mutations.
• The application also utilizes custom form fields for managing user settings.
• The application uses Shaden UI components for styling.

This detailed overview should give you a solid understanding of this full-stack learning management application.

Full-Stack Learning Management Application

The sources detail a full-stack learning management application with a variety of features and technologies. Here’s a breakdown of the key aspects:

Core Functionality

• Course Catalog: The application allows users to browse courses, view course details, and enroll in courses.
• User Authentication: Clerk is used for user authentication, offering features such as sign-in, sign-up, profile management, and user roles. User roles determine access to different parts of the application.
• Course Creation: Teachers can create and edit courses, including course titles, descriptions, categories, and prices. Courses can be organized into sections and chapters, with video content for each chapter.
• Billing: Stripe is used for handling payments and transactions.
• Course Progress: The application tracks user progress through courses, including marking chapters and sections as complete.

Key Features

• User Roles: There are distinct roles for users and teachers, each with specific access and functionalities. Teachers can create and manage courses, while users can enroll and track their progress.
• Responsive Design: The application is designed to be responsive, adapting to different screen sizes.
• Scalability: The application is built with a focus on scalability, using a separate backend to avoid tight coupling.
• Data Modeling: The application uses a NoSQL database, DynamoDB, due to the nature of the data and relationships. The data model includes courses, sections, chapters, user progress, and transactions.

Technology Stack

• Frontend:Next.js: The primary framework for building the user interface.
• Redux Toolkit: Used for state management and API interactions.
• Tailwind CSS and Shadcn: Used for styling and component library.
• TypeScript: Used for type checking.
• Framer Motion: Implements animations.
• React Hook Form and Zod: Handles form management and validation.
• Backend:Node.js and Express: Used to create the backend API.
• Docker: Used to containerize the backend.
• AWS Lambda: Hosts the backend using the Docker container.
• API Gateway: Securely routes requests to Lambda functions.
• DynamoDB: Serves as the NoSQL database.
• S3: Handles the storage of video content.
• CloudFront: A content delivery network (CDN) used to deliver videos with low latency.
• Authentication:Clerk: A third-party service for user authentication.
• Deployment:AWS: The application uses a serverless containerized architecture on AWS.
• Vercel: Hosts the Next.js frontend.

Development Highlights

• Custom Base Query: The application uses a custom base query in Redux Toolkit Query to format API responses, handle data, and display toast notifications for successful mutations.
• Form Management: Custom form fields are used for managing user settings, and react hook forms for form management and validation.
• Backend Security: The backend API endpoints are secured using Clerk middleware, which requires authentication for certain routes.
• Video Upload: Videos are uploaded to S3 using pre-signed URLs.
• IM Roles: IM roles are created for Lambda to access AWS services such as DynamoDB, S3, and API Gateway.

Additional Information

• The application prioritizes backend and deployment skills alongside frontend development.
• The choice of DynamoDB is due to the data structure, scalability, and performance requirements.
• User progress is stored separately from course data to prevent overly large data objects and improve performance.

In summary, this learning management system is a complex full-stack application with a variety of features, utilizing a modern tech stack and cloud infrastructure. It demonstrates a strong emphasis on scalability, customization, and user experience.

Serverless Learning Management System on AWS

The sources describe the deployment of a full-stack learning management application on AWS using a serverless, containerized architecture. The application leverages multiple AWS services to achieve scalability, performance, and cost-effectiveness. Here’s a detailed breakdown of the AWS deployment process:

Core AWS Services

• ECR (Elastic Container Registry): Docker images of the backend are stored in ECR.
• Lambda: The backend is hosted using AWS Lambda, running the Docker image stored in ECR. Lambda is configured with a five-minute timeout and environment variables for production use.
• API Gateway: Serves as a secure entry point for the application, routing requests to the Lambda function. It provides HTTPS endpoints without managing TLS certificates. A proxy resource is used in API Gateway to handle all requests, which are then routed to the Express server in the Lambda function.
• DynamoDB: A NoSQL database used to store application data. The data model includes courses, sections, chapters, user progress, and transactions.
• S3 (Simple Storage Service): Handles storage for video content.
• CloudFront: A content delivery network (CDN) that delivers video content from S3 with low latency and high availability.

Deployment Steps

• Dockerization: The Node.js and Express backend is packaged into a Docker container. The Dockerfile includes instructions for building, installing dependencies, and setting up the production environment.
• ECR Setup: A repository is created in ECR to store the Docker image. The Docker image is then pushed to the ECR repository using the AWS CLI.
• Lambda Configuration: A Lambda function is created using the Docker image from ECR. The Lambda function is given an IAM role with the necessary permissions to access other AWS services.
• IAM Roles: IAM (Identity and Access Management) roles are created to manage permissions for AWS services. The Lambda function is granted access to DynamoDB, S3, and API Gateway through a custom role. The IAM role includes a trust policy that allows both Lambda and API Gateway to assume the role.
• API Gateway Setup: API Gateway is configured to route requests to the Lambda function. A proxy resource is used to forward all requests to the Lambda backend, allowing the Express server to handle routing.
• S3 Configuration: S3 is set up with blocked public access, using a bucket policy to allow CloudFront read access. CORS (Cross-Origin Resource Sharing) settings are configured to allow different services to access S3.
• CloudFront Configuration: CloudFront is set up to deliver video content from S3. It uses an origin access control setting, which requires a policy to be set on the S3 bucket. CloudFront is configured to redirect HTTP to HTTPS and allow various HTTP methods.
• Environment Variables: Lambda environment variables are configured for production, including AWS region, S3 bucket name, CloudFront domain, Stripe keys, and Clerk keys.
• Seeding the Database: A seed function is included in the Lambda code, triggered by an action parameter, allowing the database to be seeded directly from Lambda.

Key Deployment Concepts

• Serverless Architecture: The application uses serverless services like Lambda and DynamoDB, which reduces operational overhead and allows for automatic scaling.
• Containerization: The backend is containerized using Docker, ensuring a consistent and portable environment for the application.
• Pre-signed URLs: S3 pre-signed URLs are used to allow the client to upload videos directly to S3, bypassing the 10MB limit on API Gateway.
• Cold Starts: Lambda functions may experience cold starts, where the first request after a period of inactivity can take longer to process.

Additional Points

• The deployment process prioritizes cost-effectiveness by utilizing free tier services on AWS, and budgets are created to monitor usage and prevent unexpected charges.
• The application is deployed using a combination of the AWS Management Console, AWS CLI, and third-party services, like Vercel for the frontend.
• The deployment emphasizes understanding the security and access requirements for each service, especially when dealing with data and video content.
• The application’s architecture on AWS uses managed services to minimize the need for complex networking configurations.

In summary, the application’s AWS deployment is a comprehensive process involving multiple services working together to create a scalable, secure, and performant learning management system. The deployment utilizes best practices for security, cost management, and efficiency, while leveraging serverless technology and containerization.

Next.js Learning Management System Frontend

The sources provide a detailed look at the Next.js frontend of a learning management application, highlighting its features, technologies, and development practices. Here’s a comprehensive overview:

Core Functionality

• User Interface: Next.js is the primary framework for building the application’s user interface. It handles routing, page rendering, and overall structure.
• Dynamic Pages: Next.js is used to create dynamic pages for course listings, search, user profiles, and course editing.
• Component-Based Architecture: The frontend uses a component-based architecture, making it easier to manage, reuse, and update the user interface.
• Server-Side Rendering (SSR): Although the application uses client-side data fetching with Redux Toolkit Query, Next.js provides SSR capabilities, which can improve performance and SEO in some cases. This is a key feature of the framework.

Key Technologies & Libraries

• Redux Toolkit: Used for managing application state and handling API interactions. It includes features like Redux Toolkit Query for fetching data.
• Tailwind CSS and Shadcn: Used for styling and UI components. Tailwind provides utility classes for styling, and Shadcn provides a library of pre-built, customizable components. The application uses a customized Tailwind configuration with its own color palette.
• TypeScript: Used for static typing, making the code more robust and easier to maintain.
• Framer Motion: Used for adding animations and transitions to the user interface.
• React Hook Form and Zod: Used for handling form management and validation.
• Clerk: Handles user authentication, including sign-in, sign-up, and user profile management. It integrates well with Next.js.
• Stripe: Used for payment processing.

Development Practices

• Custom Hooks: The application uses custom React hooks to encapsulate and reuse logic, for example, useCarousel for image carousels and useCheckoutNavigation for managing navigation steps within the checkout flow.
• Component Libraries: The use of Shadcn component library allows for consistent UI elements across the application, and components can be installed individually as needed.
• Code Organization: The project is structured with clear separation of concerns, including components, utilities, styles, and state management. The src directory contains components, lib, state, types, and app directories. The app directory is for Next.js pages and routes.
• Styling: The application emphasizes functionality and logic over extensive custom styling, using pre-defined Tailwind classes to quickly style components.
• API Integration: Redux Toolkit Query is used to make API calls to the backend. The application uses a custom base query to handle responses and add authentication tokens to each request.
• Environment Variables: Environment variables are used to manage configuration settings, API keys, and URLs.
• Client-Side Data Fetching: The application fetches data on the client-side using Redux Toolkit Query. Although Next.js provides server-side rendering capabilities, this application primarily uses client-side data fetching.
• State Management: Redux Toolkit is used for state management, providing a central store for application data.
• Form Management: React Hook Form is used with Zod for form validation and management. The application also makes use of a custom form field for creating forms faster.

Key Features in the Frontend

• Landing Page: Includes a loading screen, animated elements, and a course search feature. It features a carousel of course images.
• Search Page: Displays a list of available courses with filtering options, along with a detailed view of selected courses.
• User Profile and Settings: Includes settings for notifications, email alerts, SMS alerts, and notification frequency, which are stored in Clerk’s user data.
• Checkout Process: The checkout process is a multi-step wizard, including details, payment, and completion pages.
• Course Editor: Provides a WYSIWYG editor for creating and modifying course content, structured into sections and chapters. It supports uploading video content.
• Billing Page: Allows users to view their transaction history.
• Navigation: The application has a navigation bar and a sidebar, which adapts to different screen sizes and contexts. The sidebar provides links to various parts of the application.
• Loading Indicators: A shared loading component is used in various parts of the application.

Additional Notes

• The application uses a ‘non-dashboard layout’ for pages that don’t require user authentication and a ‘dashboard layout’ for pages that are behind the authentication wall.
• The application emphasizes a balance between UI/UX and functionality, with styling applied efficiently using Tailwind CSS and pre-built components.

In summary, the Next.js frontend of this learning management application is a well-structured and feature-rich component, utilizing a modern tech stack and best practices for frontend development. It’s built for scalability, maintainability, and a smooth user experience.

Node.js Learning Management System Backend

The sources describe the backend of a learning management application built with Node.js and the Express framework, emphasizing its scalability, customizability, and independence from the frontend. Here’s a detailed breakdown of the backend:

Core Technologies & Architecture

• Node.js and Express: The backend is built using Node.js as the runtime environment and Express as the web framework. This combination allows for handling server-side logic and routing API requests.
• Separate Backend: The backend is designed to be a separate application, not part of the Next.js frontend. This separation allows the backend to scale independently and prevents tight coupling between the frontend and backend, which enhances maintainability.
• Docker: The backend is containerized using Docker, ensuring a consistent and portable environment across different stages of development and deployment.
• Serverless Architecture: The backend is designed to run in a serverless environment using AWS Lambda, allowing for automatic scaling and reduced operational overhead.

Key Features and Functionality

• API Endpoints: The backend provides a variety of API endpoints for managing courses, users, transactions, and video uploads.
• Data Modeling: The backend uses a data modeling approach where the data is structured into courses, sections, chapters, comments, transactions, and user course progress.
• Database Interaction: The backend uses DynamoDB as its NoSQL database for storing data. It’s chosen for its scalability and speed, as well as its low cost. The backend interacts with DynamoDB using the dynamus library which is similar to mongoose for MongoDB.
• Authentication: The backend is integrated with Clerk for user authentication and authorization. Clerk is used to handle user sign-in, sign-up, and user roles.
• File Uploads: The backend handles video uploads to S3 using pre-signed URLs for better scalability.
• Payment Processing: The backend integrates with Stripe for payment processing and transaction management.
• Middleware: The backend uses various middleware to add functionality like parsing request bodies, setting security headers, logging API calls, and managing CORS.
• Route Management: Express Router is used to handle routes for different resources such as users, courses and transactions.
• CORS: The backend is configured to handle cross origin requests with the CORS middleware so the frontend can communicate with the backend.
• Environment Variables: The backend uses environment variables for configuration, like port numbers, database connection details, and authentication secrets.
• Data Validation: The backend uses dynamus to validate data types, similar to mongoose.

Backend Development Practices

• Controllers: The backend uses controllers to manage the core logic, where each controller is focused on a specific resource like courses or user accounts.
• Routes: Routes are organized to handle API endpoints for different resources.
• Data Models: Data models are created to define the structure and validation of the data stored in DynamoDB. The data models are stored in a separate folder.
• Middleware: Middleware functions are used to add extra functionality to the request handling, such as authentication, logging, and parsing.
• Asynchronous Operations: Asynchronous operations are used for database interactions and other I/O bound operations.
• Security: The backend uses helmet middleware for securing the application with proper HTTP headers and uses requireAuth middleware to protect API endpoints.
• Error Handling: The backend uses try-catch blocks for error handling to send appropriate responses to the frontend.
• Code Organization: The backend uses a structured folder approach to separate controllers, models, and routes.
• Database Seeding: The backend has a seed script that inserts mock data into the DynamoDB database, which is useful for development.

Key Components

• Course Controller: Manages the API endpoints for courses, including listing, getting, creating, updating, and deleting courses.
• User Clerk Controller: Manages the API endpoints for user settings, including updating user profile information in Clerk, using Clerk SDK.
• Transaction Controller: Manages transactions for payment processing.
• API Routes: The API endpoints are grouped into routes, making it easier to manage different resources.
• Seed Script: Used for seeding the database with initial data.

Deployment Preparation

• Serverless HTTP: The backend is prepared for serverless deployment with serverless-http, which allows it to run as an AWS Lambda function.
• Dockerization: The backend is packaged into a Docker image, which is stored in a container registry.
• Lambda Handler: The application uses a custom handler that is compatible with AWS Lambda.
• Environment Variables: Environment variables are set up in the Lambda environment for authentication and configuration.

Important Points

• The backend design emphasizes the importance of backend skills and knowledge for software engineers and discourages a sole focus on frontend development, emphasizing backend and DevOps skills as essential.
• The backend is designed to be scalable and maintainable by separating concerns and using modern software engineering practices.
• The backend utilizes a serverless, containerized architecture, taking advantage of AWS services to minimize infrastructure concerns and reduce operational overhead.
• The backend is built to interact with a variety of services, including Clerk, Stripe, AWS Lambda, API Gateway, DynamoDB, and S3.

In summary, the Node.js and Express backend of the learning management application is a robust and well-structured system that leverages modern software engineering practices and cloud-based services to provide a scalable, secure, and performant API for the frontend. It emphasizes customizability and the separation of backend logic from the frontend.

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!

This text details the creation of a full-stack web application for a university library. The application features user authentication, book browsing, and borrowing functionality. The backend uses PostgreSQL with Neon for a serverless database and Drizzle ORM for efficient data management. Frontend technologies include Next.js, Shadcn UI, and Tailwind CSS. Additional services integrated are Upstash for caching and workflows, ImageKit for asset management, and Resend for email delivery. The development process is described step-by-step, highlighting best practices and problem-solving.

University Library App Study Guide

Quiz

Instructions: Answer the following questions in 2-3 sentences each.

1. What is the purpose of using Tailwind CSS in this application?
2. Explain the role of shaten/ui in the app’s development.
3. What is Neon and how is it utilized in this project?
4. What is an ORM, and why is Drizzle chosen for this application?
5. What is the function of Upstash Redis in the app’s architecture?
6. Describe the purpose of Upstash Workflows within this project?
7. Why is rate limiting implemented in the authentication process, and how does Upstash facilitate this?
8. How are emails sent using Resend, and why is this tool chosen?
9. Explain the functionality of the Imagekit service in this application.
10. Describe the purpose of the borrowing functionality and the database interaction associated with it.

Quiz Answer Key

1. Tailwind CSS provides a way to style the application with full flexibility, using pre-defined utility classes, similar to writing regular CSS, but more quickly and efficiently. It enables a consistent look and feel across all components.
2. shaten/ui is a library that provides pre-built components, like buttons or forms, that can be easily customized using Tailwind CSS. These components allow for quicker development and standardization of the app’s interface.
3. Neon is a serverless PostgreSQL database that provides instant provisioning and easy integration with the project’s stack. It simplifies the process of using a PostgreSQL database by removing the need for complicated configurations.
4. An ORM (Object-Relational Mapping) is a tool that allows developers to interact with databases using objects, rather than writing SQL queries. Drizzle was chosen because it is designed for modern TypeScript developers, offering type safety and easy use.
5. Upstash Redis provides low-latency data storage and retrieval, which is ideal for tasks like caching, session management, and real-time data needs. In the app, it is used to fetch books quickly and implement rate limiting.
6. Upstash Workflows enables the automation of multi-step tasks, such as onboarding new users or managing data processing. In this app, it is used to automatically send emails, check user inactivity, and manage book borrowing deadlines.
7. Rate limiting prevents DDOS attacks by restricting the number of requests a user can make in a given timeframe. Upstash Redis is used to keep track of requests and enforce the limit.
8. Emails are sent using Resend, a tool that allows for customized email templates using React components. It is used in this application for sending welcome emails and reminders to users who have been inactive.
9. Imagekit is a tool that enables the optimization and transformation of images and videos, providing a central hub for efficiently managing assets. It allows for faster load times and easy management of visual content.
10. The borrowing functionality allows users to borrow a book, which initiates a database mutation for tracking purposes. This also uses a newly created “borrow records” table which tracks which users borrowed which books, when they borrowed them and when their return date is.

Essay Questions

Instructions: Answer each question in a multi-paragraph essay format.

1. Discuss the importance of using a modern tech stack when developing web applications. How does the specific stack used in this library app contribute to its scalability, maintainability, and performance?
2. Analyze the role of serverless technologies in the development of the University Library app. How does the use of Neon, Upstash, and Vercel contribute to the app’s overall architecture and operational efficiency?
3. Compare and contrast using an ORM such as Drizzle with using native SQL for database interactions. What are the advantages and disadvantages of each approach for this specific project?
4. Explain the importance of both client-side and server-side components in Next.js applications. How does the architecture of the University Library app utilize these components and balance the benefits of server-side rendering with client interactivity?
5. Describe the processes for implementing both authentication and authorization in this project. How are server actions used to manage user data and maintain data security?

Glossary of Key Terms

API (Application Programming Interface): A set of rules and protocols that allows different software applications to communicate with each other.

bcrypt: A password hashing function used to securely store passwords in a database.

Caching: The process of storing frequently accessed data in a temporary storage location to improve retrieval speed.

CSS (Cascading Style Sheets): A style sheet language used for describing the look and formatting of a document written in a markup language.

DDOS (Distributed Denial of Service) Attack: A cyberattack in which the perpetrator seeks to make a machine or network resource unavailable to its intended users by temporarily or indefinitely disrupting services.

Drizzle: An open-source ORM (Object-Relational Mapping) designed for modern TypeScript developers.

ESLint: A tool for identifying and reporting patterns found in ECMAScript/JavaScript code.

Imagekit: A free tool for quickly optimizing and transforming videos and images.

JWT (JSON Web Token): A standard for securely transmitting information between parties as a JSON object.

Neon: A serverless PostgreSQL database service.

Next.js: A React framework for building web applications, enabling server-side rendering and other performance optimizations.

ORM (Object-Relational Mapping): A technique that lets you query and manipulate data from a database using an object-oriented paradigm.

Prettier: A code formatter used to ensure consistent code style and readability.

Rate Limiting: A technique used to limit the number of requests a user can make within a specific time frame.

Redis: An open source, in-memory data structure store, used as a database, cache, message broker, and streaming engine.

Resend: A service that provides APIs for sending transactional emails.

Shaten UI: A library of customizable components that can be easily integrated into a Tailwind CSS project.

SQL (Structured Query Language): A domain-specific language used in programming and designed for managing data held in a relational database management system.

Tailwind CSS: A utility-first CSS framework that allows for rapid styling of web applications.

TypeScript: A superset of JavaScript that adds static typing to the language.

Upstash: A serverless data platform offering a variety of services including Redis, Workflows and Vectors.

Vercel: A cloud platform for frontend developers that allows for serverless deployment of web applications.

University Library Application Development

Okay, here is a detailed briefing document summarizing the provided source:

Briefing Document: University Library Application Development

Overview:

This document summarizes the development process of a University Library application, focusing on the technologies, features, and key decisions involved in its creation. The project emphasizes building a scalable, production-ready application using industry-standard, open-source tools. The approach includes detailed explanations and demonstrations, aiming to teach not just replication of the specific application, but the broader use of these technologies for future projects.

Key Themes & Technologies:

1. Modern Frontend Development:

• Next.js: Chosen as the core framework for the application, offering features like server-side rendering and an app router for a smoother user experience.
• “Next JS will now automatically install all of the dev dependencies needed for us to run our project very easily”
• TypeScript: Used to ensure a well-structured and maintainable codebase, with a commitment to explaining its usage for newcomers.
• “I’ll later explain the many benefits you’re getting by using typescript and and don’t worry if you haven’t used tab script before”
• Tailwind CSS: Selected for styling applications due to its flexibility and utility-first approach.
• “It allows you to have full flexibility of how your applications are going to look like it’s just like you’re writing Reg CSS you have all the properties at your disposal but you can use them in a quicker way by simply using a set of predefined utility classes”
• Shadcn UI: A component library that provides pre-built components styled with Tailwind CSS, enhancing the visual consistency and standardization of the application.
• “a library that allows you to copy some of the components but then use the full power of Tailwind CSS to style them to your liking”
• Prettier and ESLint: Utilized to maintain code cleanliness and enforce best practices, ensuring a scalable and well-maintained codebase.
• “we want our codebase to be scalable well structured and maintained”

1. Robust Backend & Database:

• PostgreSQL: Chosen as the database for its advanced capabilities and open-source nature, managed with Neon for ease of use.
• Neon: Provides a serverless PostgreSQL database with features like instant provisioning and integration with Next.js, simplifying the setup and scaling process.
• “It allows you to use open- Source postgress databases with many features that make it such a breeze to use you get instant provisioning no waiting no config and it configures directly with your stack”
• Drizzle ORM: Implemented to make database architecture scalable and production-ready by simplifying database interactions with its type-safe and easy-to-use design.
• “an object relational mapping tool which will allow you to make your database architecture that much more scalable and drizzle is definitely the way to go nowadays”

1. Asset Management & Optimization:

• ImageKit: A free tool used for optimizing and managing images and videos within the application, ensuring efficient media handling.
• “It is a free tool allowing you to quickly optimize and transform your videos and images and just have a central Hub where you can efficiently manage all of the assets for your project”

1. Advanced Features for Production Readiness:

• Upstash Redis: Used for low-latency data storage and retrieval, beneficial for caching, session management, and real-time applications.
• “a service that offers low latency data storage and retrieval perfect for caching session management and real-time applications”
• Upstash Workflows: Employed to manage and automate multi-step tasks such as onboarding, data processing, email notifications, and user activity tracking.
• “allowing you to manage and automate multi-step tasks great for things like onboarding or handling data processing workflow flows”
• Rate Limiting: Implemented using Upstash to prevent denial-of-service attacks and ensure fair usage of the application.

1. User Experience and Authentication:

• Next-Auth (Oauth): Used for handling user authentication, employing a credentials provider for custom email/password login logic.
• “import next OD we get a lot of things out of it like the signin functionality sign out off and more and we can choose which providers to add”
• Custom Email Templates: Resend is used for sending emails, allowing the use of React components for custom email templates, enhancing the design and customization options.
• “you can completely write your email templates using react components that is not possible with simpler tools like email JS”

Key Features Demonstrated:

• User Authentication: Full sign-up and sign-in flows with validation, including image uploads.
• “when you visit the website for the first time you’ll see the signin screen if you’re creating a new account you can go to the signup page where you’ll have to fill in a lot of information all of it fully validated we also have an image upload with completion percentage”
• Automated Workflows: Onboarding processes such as welcome emails, inactivity checks, and notifications.
• “the moment you’ve created an account our server triggered an onboarding workflow sending you a welcome email but that’s not the best part another part of the onboarding workflow is inactivity checks so if you don’t visit the website for the next 3 days you’ll get another automated email prompting you to check it out”
• Book Management: Displaying detailed book information, including descriptions, author, copies, and videos, with filtering, searching, and pagination.
• “there’s this library page where you can see a full list of books available in the library with pation boort and you can easily search for any book or filter it through your liking and if you click on any of these books you’ll go to its Details page where you can see complete information from Total and available copies description trailers summaries and more”
• Borrowing System: Implementing a borrowing process with account approval for users, and managing book availability.
• “if you click on borrow book you’ll see a destructive toast saying you can’t borrow a book until your account gets approved Yep this is what we’re doing we’re not letting just anyone visit the website and try to borrow a book instead we’ll allow admins to approve their account”
• Rate Limiting: Preventing abuse and ensuring stable service availability.

Important Ideas and Facts:

• Emphasis on Industry Standards: The project is built using technologies and practices commonly found in production environments.
• Practical Learning: The approach prioritizes understanding how to build scalable applications, not just replicating this specific project.
• Serverless Architecture: The utilization of Neon and Upstash for serverless databases, simplifying infrastructure management.
• Open Source Focus: All tools and technologies utilized are open-source, promoting accessibility and community contributions.
• Importance of Rate Limiting: Protecting applications against malicious activity with Upstash Redis.
• Power of Workflows: Automating tasks and user engagement with Upstash Workflows.
• Customizable Email Templates: Using Resend to send emails with fully customizable design.

Conclusion:

This project demonstrates a comprehensive approach to building a production-ready application using modern technologies and best practices. The emphasis on scalability, automation, and user experience makes it a valuable learning experience for aspiring developers. The detailed explanations provided throughout the project aim to empower users to not only build this application, but also apply the knowledge to their own future projects.

Building a Scalable University Library Application

FAQ: Building a Scalable University Library Application

1. What technologies are used to build this application?

This application leverages a variety of modern, production-ready technologies. For styling, it uses Tailwind CSS for flexibility and utility classes, along with Shadcn UI for pre-built components that are customizable. The database is PostgreSQL, accessed through Neon, which provides a serverless experience. Drizzle ORM is employed for scalable database architecture, and ImageKit manages assets like images and videos. Finally, Upstash Redis is used for caching and workflows. The app is also built using Next.js, Typescript, and ESLint, Prettier.

2. How does user onboarding work in this app?

The application automates the onboarding process. When a user creates an account, a welcome email is sent. The system also includes inactivity checks, triggering automated emails if the user doesn’t visit the website for a few days, or a congratulations email if they are using the app. Account approval by an administrator is required before book borrowing is enabled, similar to university admission processes. This system leverages Upstash’s workflows.

3. What are the benefits of using TypeScript in this project?

TypeScript provides several benefits to this project, such as type checking which helps to catch errors early on in development, and improved code maintainability as the project gets larger. It also provides strong typing when defining the database schemas through drizzle, allowing for more reliable data models.

4. Why is rate limiting important, and how is it implemented in this application?

Rate limiting is crucial for preventing denial-of-service (DDOS) attacks. It restricts the number of requests a user or IP address can make within a specific time frame. In this application, rate limiting is implemented using Upstash Redis. When a user exceeds the limit, they are redirected to a “Too Fast” page.

5. How are emails handled in this application, especially for onboarding and notifications?

Email functionality is handled by Resend. The application uses Resend to send welcome emails upon signup and to notify users if they haven’t been active in a while. These emails are created with react component templates, allowing for fully customized designs. The email logic is set up with Upstash workflows.

6. How are images and videos managed within this application?

Images and videos are managed using ImageKit, which provides a centralized hub to efficiently optimize, transform, and manage assets. This includes features like progress tracking during uploads, file size validation, and rendering optimized assets on the front end of the application.

7. How is the database set up and what role does Drizzle ORM play?

The database is set up using Neon, a serverless Postgres service, which allows for easy provisioning and scaling without complex configurations. Drizzle ORM acts as an object-relational mapping tool, which enables interaction with the database using typesafe, clean, and easy-to-use code. Drizzle allows for database schemas to be defined with JavaScript rather than using raw SQL, which simplifies the development process. Drizzle is also used to generate and manage migrations for SQL databases.

8. How is user authentication implemented, and is there a user role system?

User authentication is implemented using NextAuth.js, with a custom credential provider for email and password. There isn’t the concept of social login with google and github implemented in this specific course. The application includes a basic user role system, with users having a “pending,” “approved,” or “rejected” status, and a role of either “user” or “admin”. Admin roles are required to create new book records in the database. Users also have an activity check, allowing the system to prompt them with emails if they are inactive after a specific period of time.

Full-Stack Library Management System

The sources describe the development of a full-stack library management system. The system consists of two interconnected applications: a public-facing app for users and an admin interface. The apps are built using a monorepo architecture. The development process emphasizes industry-standard practices and real-world application demands.

Key aspects of the app development include:

• Technology Stack:
• Next.js with TypeScript for building web applications.
• Tailwind CSS for styling, along with Shadcn UI for pre-built components.
• PostgreSQL database, managed with Neon and Drizzle ORM for efficient database interactions.
• Upstash for caching, rate limiting, and workflow automation using Redis.
• ImageKit for real-time media processing and asset management.
• Resend for email communications.
• Oauth.js for authentication.
• Public Facing App:
• Open-source authentication with personalized onboarding flows and emails.
• Homepage featuring a highlighted book and newly added books with 3D effects.
• Library page with advanced filtering and pagination.
• Book detail pages that track availability and show summaries, videos, and similar books.
• Profile page to manage accounts, track borrowed books, and download receipts.
• Admin Interface:
• Analytics dashboard displaying statistics on new users and book borrows.
• User management including all users and account requests pages where admins can approve or revoke access.
• Book management pages with forms for adding and editing books and detail pages.
• Borrow request management.
• Key Features and Functionality:
• Rate limiting to protect against DDOS attacks.
• Caching optimizations for faster data retrieval.
• Multimedia uploads and management.
• Advanced error handling.
• Automated workflows with custom notifications, such as onboarding emails, borrowing deadlines, and reminders.
• Complex database queries using Drizzle ORM.
• Image and video optimization using ImageKit.
• Form validation using React Hook Form and Zod.
• Server actions for secure server-side operations.
• Database migrations for managing database schema changes.
• Development Process:
• The project started as a simple tutorial but evolved into a production-ready application.
• The development was broken down into steps with explanations of concepts.
• The tutorial includes not just the final code but the approach to building such an application, such as setting up the tech stack.
• The process includes UI development, database setup, and integration of various tools and libraries.
• Production Readiness:
• The application uses a serverless PostgreSQL database.
• The application includes rate limiting to prevent abuse.
• The application uses automated workflows for email notifications.

The sources provide a comprehensive overview of how to build a sophisticated, production-ready application using modern web development technologies and practices. The process is iterative, starting with UI components, then integrating with a database, and finally implementing advanced features like authentication, rate limiting, and automated workflows.

Full-Stack Library Management System Database Interactions

The sources detail extensive database interactions within the full-stack library management system, covering various aspects such as setup, schema design, querying, and data manipulation. Here’s a breakdown of the key database interactions:

• Database Choice and Setup:
• The system uses PostgreSQL as its primary database.
• Neon is utilized to manage the PostgreSQL database in a serverless environment. Neon offers features like instant provisioning, autoscaling, database branching, and APIs.
• The database connection string is configured using environment variables.
• Object-Relational Mapping (ORM):
• Drizzle ORM is used to interact with the database, chosen for its type safety and ease of use with TypeScript.
• Drizzle simplifies database interactions and allows for more scalable database architecture.
• Drizzle also provides a studio for exploring and manipulating data.
• Schema Definition:
• Database schemas are defined using Drizzle’s syntax in TypeScript, which is then translated into SQL.
• The schema includes tables for users, books, and borrow records.
• The users table includes fields for user authentication, personal information, and account status. It also includes enums for the user’s status and role.
• The books table includes fields for book details, such as title, author, genre, rating, cover, description, and number of copies.
• The borrow records table tracks which users borrowed which books, along with borrow and due dates.
• Unique identifiers (uid) are used as primary keys.
• The schemas use data types such as integer, text, varchar, uid, date, and timestamp.
• Data Manipulation:
• Drizzle’s methods like select, insert, update, and delete are used to perform database operations.
• The application fetches data using queries that include conditions, limits, and ordering.
• Data is inserted into tables using the insert method, which takes values to be added and returns the inserted record.
• The update method modifies records based on specified conditions.
• Database queries are type-safe, ensuring that data is correctly structured.
• Data is often limited to specific numbers of records and filtered using the where clause.
• Database Migrations:
• Drizzle Kit is used to generate and apply database migrations.
• Migrations are used to manage changes to the database schema over time.
• Commands like drizzle kit generate and drizzle kit migrate are used to create SQL migration files and apply them to the database.
• The migrations are stored in a dedicated folder.
• Seeding Data:
• A script is used to seed the database with initial data, such as dummy books.
• The seeding process involves reading data from a JSON file and inserting it into the database using Drizzle.
• The script handles uploading images to ImageKit and then inserting book information into the database using Drizzle.
• The seeding process includes uploading the images and video of the books to image kit and using those URLs to populate the database.
• Transaction Management:
• The source doesn’t explicitly detail transaction management, but it does imply the use of transactions with Drizzle ORM for data integrity.
• Specific Database Interactions:
• User authentication involves querying the database for users based on email and password.
• User data is updated when users log in or interact with the application.
• Admin users are identified by querying the database to check their role.
• Book borrowing involves checking book availability and then updating both the books and borrow records tables.

These database interactions are crucial to the library management system’s operation. The use of Drizzle ORM, coupled with Neon and PostgreSQL provides a robust and scalable approach to data management. The system also uses a secondary database (Redis through Upstash) for caching, rate limiting, and workflows. This shows how multiple databases can be used together in a single system to enhance performance and efficiency.

Library Management System Authentication

User authentication in the library management system is a critical component, designed to ensure secure access and manage user roles effectively. Here’s a detailed overview of how authentication is handled, based on the sources:

• Authentication Method:
• The system uses email and password for authentication.
• The implementation is based on OAuth.js (next-auth), a free and open-source library for handling authentication in Next.js applications.
• The system also implements JSON Web Tokens (JWT) for session management.
• Credentials Provider:
• A custom credentials provider is set up to manage the authentication logic.
• The provider handles user sign-up and sign-in processes.
• It validates credentials by checking if an email and password are provided.
• It fetches user data from the database, based on the provided email.
• Password Handling:
• User passwords are hashed before being stored in the database for security.
• The bcryptjs library is used for password hashing and comparison.
• Sign-up Process:
• The sign-up process involves collecting user information, including full name, email, University ID, password, and a university ID card image.
• The system performs full validation of the sign-up form.
• New users are added to the database with a default status of “pending” and a role of “user”.
• Upon successful sign-up, a welcome email is sent to the user using an automated workflow.
• After creating a new user, the system also automatically signs the user in.
• Sign-in Process:
• The sign-in process involves validating the email and password against the stored user credentials.
• The system uses the credentials provider to check for the validity of the password and retrieve user data.
• If the credentials are valid, the user is signed in and a session is created.
• Session Management:
• The system uses JWT for session management, which is configured within the next-auth config file.
• The JWT is populated with the user’s ID and name.
• A session provider is used to manage user sessions across the application.
• The session is populated with the currently logged-in user data, making it accessible to components.
• User Roles:
• Users can have different roles, such as “user” and “admin”, which determine their permissions.
• The user’s role is stored in the database and checked when accessing certain parts of the application.
• Admins have access to the admin dashboard and can manage users, books, and other aspects of the library system.
• The system ensures that only admin users can access the admin dashboard.
• Authentication Logic:
• The authentication logic is implemented within the auth.ts file located in the root directory.
• This file configures OAuth.js and specifies how to interact with the database.
• Server Actions:
• Server actions are used for secure server-side operations, such as signing up and signing in users.
• These actions are executed on the server, ensuring that sensitive data and operations are protected.
• Rate Limiting:
• Rate limiting is implemented using Upstash Redis to protect against brute force attacks and DDOS.
• The system limits the number of requests from a single IP address within a given time frame.
• Users who exceed the rate limit are redirected to a “too fast” page.
• Logout:
• A logout function is implemented to terminate the user session.
• The logout button is placed at the top right in the header.
• Redirects:
• The system includes redirects to ensure that users are properly directed to the sign-in page if they are not logged in.
• Similarly, users who are logged in are redirected to the homepage from the sign-in page.
• Admin users that try to access the admin interface are redirected to the public app, unless their role is set to “admin”.
• User Activity Tracking:
• The system tracks the last activity date of the user and stores it in the database.
• This information is used to send emails to users that have been inactive for a period of time.
• The system updates the user’s last activity date once per day to limit database mutations.

This comprehensive approach to user authentication ensures that the library management system is secure, user-friendly, and well-equipped to manage different user roles and interactions effectively.

Workflow Automation with Upstash Qstash and Resend

Workflow automation is a key aspect of the library management system, designed to streamline various processes and enhance user engagement. The system uses Upstash Qstash workflows to manage these automated tasks. Here’s a breakdown of how workflow automation is implemented:

• Workflow Management:
• Upstash Qstash is used as a serverless platform for managing and automating workflows.
• Qstash allows for the creation of durable, reliable, and performant serverless functions.
• The workflows are designed to be resilient to failures and can pick up where they left off in case of temporary outages.
• They support long-running executions, making them suitable for complex tasks such as data processing or sending email notifications.
• Workflow Endpoints:
• Workflow endpoints are defined as a set of steps, each containing a piece of business logic.
• These endpoints are created within the Next.js API directory, typically under a /workflows route.
• The routes contain the logic for triggering and managing workflow actions.
• Workflow Client:
• A workflow client is created to trigger the workflows.
• This client uses the Upstash Qstash URL and token to connect to the Qstash service.
• The client is used in the application’s server actions to start the defined workflows.
• Onboarding Workflow:
• The system implements a customer onboarding workflow as an example, which is triggered when a new user signs up.
• The workflow includes steps such as:
• Sending a welcome email to new users.
• Waiting for a specified period of time (e.g., 3 days) before further actions.
• Checking the user’s activity state periodically.
• Sending different emails based on user activity status (active or non-active).
• The onboarding workflow logic is defined within the /api/workflows/onboarding/route.ts file.
• Email Notifications:
• The workflows are integrated with Resend, an email API for developers, to send emails.
• The emails are sent using the publishJson method provided by Qstash, which is integrated with Resend.
• The workflow sends emails based on specific conditions, such as when a user signs up, has been inactive for 3 days, or is active.
• Custom email content, including the subject and the message, is set using parameters passed to the sendEmail function.
• The emails are sent from a custom domain that has been verified with Resend.
• User Activity Checks:
• The system checks for user activity by tracking the last activity date in the database.
• The user’s activity state (active or non-active) is determined based on a custom function which checks if the time difference between the user’s last activity date and the current date is greater than a certain threshold.
• If a user has not been active for a specified period (e.g., 3 days), an email notification is sent to prompt them to visit the website.
• If the user has been active, they might receive a newsletter or a welcome back email.
• The activity checks are done periodically, and appropriate actions are taken based on the state.
• The user’s last activity date is updated only once per day to limit database mutations.
• Workflow Triggering:
• Workflows are triggered by calling the workflowClient.trigger method.
• The trigger method includes the URL of the workflow endpoint, as well as any required parameters (e.g., email and full name of the user for the onboarding workflow).
• The onboarding workflow is triggered immediately after a new user signs up through the auth.ts action file.
• Customizable Workflows:
• The workflow logic is highly customizable and can be tailored to specific application needs.
• The email content, scheduling intervals, conditions, and user state checks can be modified as required.
• Workflows can be used for many types of automations, including on-boarding, notifications, reminders, data processing, and more.
• Code Implementation:
• The core workflow logic is implemented within the lib/workflow.ts file, which contains the workflow client and the email sending logic.
• The workflow endpoint logic is implemented in the /app/api/workflows/onboarding/route.ts file.
• The lib/actions/auth.ts file contains the server action that triggers the workflow.

This workflow automation system allows for a more dynamic and engaging user experience by providing timely notifications and ensuring that users are prompted to return to the platform when necessary. The combination of Qstash workflows with Resend emails provides a flexible and reliable solution for automating various business processes within the library management system.

Production-Ready Library Management System

The library management system is designed with several features that contribute to its production readiness, ensuring it can handle real-world demands and maintain a high level of performance and security. Here’s a breakdown of the key aspects:

• Scalable Architecture:
• The system is built using a monorepo architecture, which allows for the management of two interconnected applications (the public-facing app and the admin dashboard) within a single repository.
• This structure promotes code sharing, consistency, and easier management of the entire application.
• The use of Next.js as the framework enables the creation of high-quality web applications with the power of React components, making the app scalable and performant.
• Modern Tech Stack:
• The system utilizes a modern tech stack including Next.js, TypeScript, Tailwind CSS, Shadcn/ui, PostgreSQL (with Neon), Drizzle ORM, Upstash Redis, ImageKit, and Resend.
• These are all industry-standard, open-source, and production-ready technologies.
• TypeScript is used to ensure a scalable and maintainable code base.
• Tailwind CSS and Shadcn/ui are used for efficient and flexible styling of the application.
• Database Management:
• PostgreSQL, powered by Neon, is used as the primary database, which allows for a serverless setup, auto-scaling, and database branching.
• Drizzle ORM is used to interact with the database, making database operations faster and simpler.
• The system employs database migrations, which are generated based on the schema defined in the code, to manage database changes effectively.
• Data seeding is implemented to populate the database with initial sets of data for testing and development purposes.
• Caching and Rate Limiting:
• Upstash Redis is used for efficient caching, session management, and rate limiting.
• Rate limiting is implemented to prevent DDOS attacks and brute force attempts by limiting the number of requests from a specific IP address within a given time frame.
• The system redirects users to a “too fast” page if the rate limit is exceeded.
• Media Management:
• ImageKit is used for real-time media processing APIs, asset management, and optimizing images and videos.
• ImageKit provides dynamic transformations, storage, and streaming capabilities, which are perfect for delivering media assets to any device.
• Automated Workflows:
• Upstash Qstash workflows are used to manage automated tasks like sending emails, checking user activity, and managing book borrowing notifications.
• Workflows are used to implement user onboarding flows, which involve sending welcome emails and checking for user inactivity.
• The system uses Resend for sending emails, allowing for custom email templates built with React components.
• Authentication and Authorization:
• The system uses OAuth.js for secure authentication, which manages sign-up, sign-in, and user sessions.
• JSON Web Tokens (JWT) are used for session management.
• User roles are used to define permissions, ensuring that only admins can access the admin dashboard.
• Bcryptjs is used for password hashing and comparison, providing a more secure way to store passwords in the database.
• Error Handling:
• The system implements comprehensive error handling using try and catch blocks, console logs, and descriptive toast notifications for both users and developers.
• The system uses loaders and performance optimization to handle errors gracefully without blocking other parts of the application.
• Deployment:
• The application is deployed using Vercel, ensuring scalability and reliability.
• The system utilizes environment variables for configuration management, which are set up in both local and production environments.
• The system separates development and production environments to avoid conflicts.
• UI and UX Design:
• The user interfaces are designed to be modern, polished, and easy to navigate, using Tailwind CSS and Shadcn/ui.
• The system uses toast notifications to provide feedback to the user during different actions, including sign-up, sign-in, and form submissions.
• The design is responsive and user-friendly, providing a consistent user experience across different devices.
• The application uses loading states to show progress for actions like image uploads and book borrowing.
• Code Quality and Practices:The codebase is well-structured, scalable, and maintained using Prettier and ESLint.
• The system uses clear coding practices with meaningful variable names and comments.
• The system promotes code reusability and creates reusable components, such as the file upload component, which can be used for different input types.

These elements collectively ensure the library management system is not just a functional application, but a production-ready solution that adheres to industry standards and best practices. The system is designed to be scalable, secure, and easily maintainable, providing a solid foundation for future growth and feature additions.

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!

The text comprises excerpts from a .pdf file detailing the development of an invoicing application using Next.js, React, and various UI component libraries (such as Chakra UI and Lucid React). The author meticulously documents the creation of UI components, including tables, forms, and dropdowns, while implementing server-side and client-side validations with Zod and Form. The process covers building routes for invoice creation and editing, integrating email functionality using Mailtrap, and incorporating data fetching and display from a Prisma database. Finally, the author addresses the creation of a dashboard and landing page for the application, highlighting the transition from development to production deployment.

Project Review: Invoice Management Application

Quiz

1. What is the primary purpose of the package.json file in this project?

• The package.json file lists all the dependencies used in the project and their respective versions. It also includes scripts to run different development processes.

1. Describe the relationship between layout.tsx and page.tsx in the Next.js app structure.

• The layout.tsx file defines the overall structure of the page, and the page.tsx file represents a specific route within that layout. The layout renders its children, which are the routes.

1. Why is TypeScript used in the project, and is it required?

• TypeScript is used to add static typing, which makes the code simpler and easier to maintain, especially in large projects. However, it is not strictly required and the project can be done with JavaScript.

1. What is the purpose of the .env file, and what does it contain in this project?

• The .env file stores environment variables that are needed for the application to run. It includes a secret key used by the Auth.js library and the MailTrap token.

1. Explain the function of the off.ts file within the utils folder.

• The off.ts file is a configuration file for off.js. It defines the authentication providers, specifies custom authentication logic and the adapter, like Prisma or Magic links.

1. What is a “W Handler” in the context of Next.js?

• A “W Handler” is another word for an API endpoint that uses web request and response APIs to handle different requests, for example when signing in or out the user, or fetching data.

1. How does the requireUser hook secure routes in this application?

• The requireUser custom hook checks if a user has an active session. If there is no session, the hook redirects to the login page.

1. What is the role of the useFormStatus hook and where is it used in this project?

• The useFormStatus hook provides the status information for the latest form submission. In this project, it is used in the submit button component to track the pending state.

1. What is the purpose of the MailTrap API token in this application, and how is it used?

• The MailTrap API token is used to authenticate requests to the MailTrap email service. It’s used to send transactional emails such as the invoice reminder emails.

1. Describe the primary goal of the PDF generation functionality in this application.

• The PDF generation functionality generates downloadable invoices. This process creates a PDF with invoice details by fetching them from the database.

Essay Questions

1. Analyze the architectural decisions made in this project, particularly concerning the separation of client-side and server-side components and the use of custom hooks.
2. Discuss the role of third-party libraries (like Auth.js, Shadcn-UI, and jsPDF) in accelerating development and the potential trade-offs of relying on them.
3. Examine the implementation of authentication and authorization in the project, including the use of magic links and the protection of routes.
4. Evaluate the user experience design of the application, considering aspects like the login process, onboarding flow, and invoice management.
5. Describe the process of sending reminder emails and generating PDFs. Include the different tools and steps and how they integrate into the application.

Glossary

• pnpm: A package manager similar to npm but known for being faster and more efficient.
• TypeScript: A superset of JavaScript that adds static typing.
• ESLint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
• TND: An abbreviation that refers to Tailwind CSS, a utility-first CSS framework.
• App Router: A feature of Next.js that allows you to structure your application using a directory based routing system.
• Turbo Pack: A high-performance build system optimized for web development, often used with Next.js.
• vs code: A popular code editor.
• TS config: A configuration file for TypeScript.
• package.json: A file that lists dependencies, scripts, and other metadata for a Node.js project.
• React: A JavaScript library for building user interfaces.
• NextJS: A React framework for building web applications with features like server-side rendering.
• deps: Project dependencies, such as libraries or packages that are required for it to function.
• g ignore file: A file that specifies intentionally untracked files that Git should ignore.
• EnV: A file used to store environment variables, like sensitive information such as API keys.
• Def server: A local development server, often used during development of web applications.
• Off JS: An authentication library for web applications.
• Magic Links: An authentication method where users click a link sent to their email address.
• Radex UI: a UI component library used to speed up the development process with pre-made styled components.
• W Handler: An API route or endpoint that uses web request and response APIs.
• Prisma: A database toolkit that provides an ORM (Object-Relational Mapper).
• use client: A directive used to indicate that a component should be rendered on the client-side.
• useFormStatus: A React hook that provides information about the latest form submission status.
• Lucid react: A library providing icons for web applications.
• International API: a JavaScript API used for formatting dates, numbers, and currency according to locale-specific conventions.
• NodeJS: A runtime environment for executing JavaScript on the server-side.
• jspdf: A client-side JavaScript library for generating PDFs.
• MailTrap: A service for email testing and sending with API integration.
• Sona: A library used for notifications, also known as toast messages, in the front end.
• fetch: An API used for making network requests.
• UI.shat cn.com: The website for a popular UI library which provides components.
• Recharts: A charting library for React applications.
• Cartesian Grid: A grid used to create a space for data visualization, such as a chart.

Invoice Management Application Development

Okay, here’s a detailed briefing document summarizing the provided source, with quotes included where relevant:

Briefing Document: Invoice Management Application Development

Document Overview: This document reviews a series of transcripts detailing the development of an invoice management application using Next.js, TypeScript, and various libraries. The excerpts cover project setup, authentication implementation, UI component creation, email integration, PDF generation, data visualization, and the deployment process.

I. Project Setup and Core Technologies

• pnpm for Package Management: The developer uses pnpm for project creation, highlighting its differences from npm.
• “here let me do a pnpm create and then widespace next Das app at latest so this is how you bootstrap a project with pnpm it’s a bit different than if you would use npm…”
• Next.js as the Framework: The application is built on the Next.js framework, leveraging its features such as the app router and server components.
• TypeScript for Type Safety: TypeScript is used to enhance code maintainability and reduce bugs. While not mandatory, it’s suggested.
• “I use typescript it isn’t required you can use JavaScript that’s fine but typescript makes your life a bit simpler easier…”
• Tailwind CSS for Styling: Tailwind CSS (referred to as “tnd”) is used to style the application. A tailwind.config.js file is part of the setup.
• Project Structure:app folder: Contains most of the core application logic.
• page.tsx: Index page.
• layout.tsx: Application layout.
• api: For API routes.
• dashboard: Features dashboard-related routes.
• invoices: Folder for invoice routes.
• public: Static assets.
• utils: Utility functions and configuration.
• components: Custom and shared UI components.

II. Authentication with Auth.js

• Auth.js Implementation: The application uses Auth.js for handling user authentication.
• “for authentication as you all know there are a lot of options on the market but we will use off JS…”
• Magic Links: The authentication method is magic links, where users enter their email, and receive a login link.
• “in off JS or in combination with off JS we will use magic links this is the method we will use to authenticate the user…”
• Environment Variables: An AUTH_SECRET environment variable is crucial for Auth.js to encrypt tokens and verification hashes.
• “this means we have to add a environment vable which is the off secret this is a random value used by the library to enp tokens…”
• API Route Handler: An API route handler /api/auth/[…nextauth]/route.ts is created to manage authentication API endpoints.

III. UI Component Development

• Custom Components: The developer creates custom components within a separate components directory to distinguish between shared and custom components.
• Shadcn/UI Integration: The project integrates components from shadcn/ui for a consistent and styled user interface. Many components are installed, including card, label, input, button, select, textarea, calendar, and popover.
• Login Form: A login form is built using card, label, input, and button components.
• “…I want to now render my card uh content and in the card content I want to render my label the input and then also our submit button…”
• Pending States: The useFormStatus hook is used to display pending states on form submissions.
• “to show the pending State for the user we will have to use a hook which is called use form status this is a hook provided by react…”
• Custom Submit Button: A custom SubmitButton component is created to manage loading states.

IV. Email Integration with Mailtrap

• Mailtrap SDK: Mailtrap’s Node.js SDK is used to send transactional emails.
• “this is a relatively new feature with mail trap we have a mail trap client which we can now also Implement into our application and then we don’t have to use SMTP anymore…”
• API Token: The Mailtrap API token is stored in an environment variable (MAILTRAP_TOKEN).
• Email Templates: A no-code UI builder is used to create email templates. In this specific case, a “reminder email” template is used.
• Email Sending Logic: An email is sent after an invoice is created.
• “once the user creates an invoice I want to send a email and that’s what we will do inside of here…”
• Email Template: The mailtrap HTML UI builder is utilized to craft a visually appealing reminder email.

V. PDF Generation with jsPDF

• jsPDF Library: jsPDF library is used to generate PDF documents on the server side.
• PDF Document Setup: The PDF is configured with orientation, unit (millimeters), and format (A4).
• “let’s initialize JS PDF so let me do a constant PDF or you could call it DOC but I think PDF is a bit more uh what would you say explanatory if this makes sense and then this is equal to new jspdf…”
• Dynamic Data Rendering: Data from the invoice is dynamically used to populate the PDF. This includes invoice details, sender and receiver information, and item descriptions.
• Custom Layout: The PDF layout is customized with font sizes, text positioning, and lines.
• Content Disposition: The PDF is returned with a header indicating inline display.

VI. Data Visualization

• Recharts Library: Recharts, integrated through Shadcn/UI, is used to create a chart within the dashboard.
• Graph Component: A separate graph component is made which utilizes a JavaScript bundle and is marked as use client. This component displays a line chart representing paid invoices over the past 30 days.
• Data Preparation: The graph data is dynamically fetched and passed to the recharts components.

VII. Other Important Implementation Details

• Server Actions: Server actions were utilized for form handling and data modification.
• Custom Hooks: A custom requireUser hook was created to check if the user is authenticated for protected routes and a custom formatCurrency function was created to ensure consistency when displaying monetary values.
• Toasts: Sonner library is used to display toast notifications when there is a success or failure of actions.
• Empty State: A custom EmptyState component is displayed when no invoices are present on the dashboard.
• Dynamic Routes: Dynamic routes such as dashboard/invoices/[invoiceId] are used to handle individual invoice pages.
• Suspense Boundaries: Suspense boundaries are added for asynchronous components to improve user experience while data is loading.

VIII. Key Quotes and Takeaways

• Focus on UI Consistency: The developer emphasizes importing components from the custom components folder rather than directly from shadcn/ui to avoid errors.
• “please make sure that you import all of your components from the components folder please don’t import it from radex UI if you import it from redex UI you will get a lot of errors and you don’t want that…”
• Code Organization: Importance was placed on a clean architecture, utilizing a utils folder, separate component folders for different component types, and a custom hooks file for reusable logic.
• Importance of Error Handling: There is a consistent implementation of try-catch blocks to gracefully handle errors and display user-friendly messages.
• Data validation: There is a consistent validation of data to ensure data integrity. This includes id validation, user authorization, and checks for optional values.

IX. Next Steps

• Landing Page: The final step before deployment is creating a landing page.
• Deployment: The application is prepared for deployment.

Conclusion: The transcript highlights a detailed development process for an invoice management application using a variety of modern web technologies. It emphasizes the importance of code organization, user experience, error handling, and consistent UI. This briefing document should serve as a comprehensive overview of the development process.

Building a Next.js App with pnpm and Auth.js

1. What is pnpm and how does it differ from npm when creating a new project?

pnpm (Performant npm) is a package manager that is similar to npm (Node Package Manager), but with differences in how it creates projects. When using pnpm, you would use pnpm create followed by the desired project template (in this case, widespace next), while npm uses npm create followed by the project template. Pnpm is known for its efficient disk space usage and faster install times.

2. Why is TypeScript used in this project, and is it required?

While not strictly required, TypeScript is used in this project to make development simpler and easier by providing static typing to JavaScript. TypeScript makes it easier to catch errors and maintain the codebase. However, JavaScript is also a viable option if you are not familiar with TypeScript. The project can be followed without any prior Typescript knowledge.

3. Can you explain the folder structure of this Next.js project?

The project structure includes the following key folders and files:

• tsconfig.json: Configuration file for TypeScript.
• twin.config.js: Configuration file for Tailwind CSS (tnd).
• package.json: Contains project dependencies (e.g., React, Next.js) and scripts.
• next.config.js: Configuration file for Next.js settings, including image whitelisting.
• .gitignore: Specifies files and directories to ignore in Git.
• public/: Stores static files like images and videos.
• app/: The most important folder containing application routes and layouts.
• page.tsx: The index page of the application.
• layout.tsx: The main layout component that wraps all routes.
• globals.css: Stores CSS variables.
• fonts/: For storing custom fonts.
• api/: Contains API routes, including the authentication route (/api/auth/[…nextauth]/route.ts).
• utils/: Contains utility functions and custom hooks.
• components/: Contains reusable UI components.

4. How does the layout component work in Next.js, and how is it connected to pages?

In Next.js, the layout component, typically layout.tsx, wraps the content of all pages within the app folder. The layout renders its defined elements and then inserts the content of the current page as children via children. This means that elements rendered in the layout are persistent across all routes unless specified otherwise.

5. What is Auth.js and why is it used in this project?

Auth.js is an open-source authentication library used to implement authentication for web applications. It provides an easy way to add authentication with various methods. In this project, it’s used with magic links, where users enter their email, receive a link, and are then redirected back to the application, thus validating them as the owner of the email.

6. How is user authentication handled in this application and what is a magic link?

User authentication is handled using Auth.js in combination with magic links. A user enters their email address, and the application sends an email to that address containing a unique link. The user clicks the link, and upon returning to the application, their session is established. Magic links provide a passwordless method of authentication.

7. How is the dashboard route protected and what is the requireUser hook?

The dashboard route is protected by a custom hook called requireUser. This hook checks if a valid user session exists. If no valid session is found, it redirects the user to the login page. The hook is used on server components to ensure that unauthorized users cannot access secured routes. The requireUser hook encapsulates the logic to check if a user is authenticated and handles the redirection if a user is not.

8. How is PDF generation implemented and what libraries are used?

PDF generation is implemented using the jsPDF library. The library is used to create a PDF document programmatically, adding text, lines, and formatted data. Once the PDF document is created, it’s converted into a buffer and returned as a downloadable file (or displayed inline in this example) via the HTTP response.

Card UI Component Implementations

The sources describe various implementations of Card UI components, often using a combination of custom components and styling utilities, particularly from Shadcn UI. These cards are used to structure content, provide visual separation, and create interactive elements in web applications.

Key aspects of card UI in the sources include:

• Structure:
• Cards are often built using a card component as a base, which may include a card header, card content, and card footer.
• The card header typically contains titles, descriptions, and icons.
• The card content houses the primary content of the card, such as forms, tables, or images.
• The card footer often contains buttons or links for interaction.
• Layout and Styling:
• Cards use flexbox and grid layouts for positioning elements.
• Classes such as flex, flex-col, items-center, justify-center, grid, and grid-cols-* are used for layout.
• Spacing is controlled using utility classes like gap-*, m-*, p-*, and space-y-*.
• Cards are given a maximum width using max-w-* and are centered with mx-auto.
• Background colors, borders, and rounded corners are added using classes like bg-*, border, and rounded-*.
• Text styling includes classes for size (text-*), weight (font-*), color (text-*), and alignment (text-center).
• Custom widths can be set using array brackets, for example, w-[380px].
• Components:
• Custom components such as Card, CardHeader, CardContent, CardTitle, CardDescription, and CardFooter are used.
• These components are styled using utility classes from libraries like Shadcn UI.
• Buttons within cards are often styled using the buttonVariants method to maintain consistency.
• Icons from libraries like Lucid React are integrated within card components using components such as MailIcon, AlertCircle, ArrowLeft, Pencil, DownloadCloud, Trash, CheckCircle, DollarSign, and Users.
• Forms and inputs are created within cards, including labels, text areas, and select elements.
• Images and GIFs are also incorporated into the card.
• Specific Implementations:
• Login Form: Uses a card to contain a form with labels, inputs, and a submit button.
• Verification Page: Uses a card with an icon, title, and description to indicate email verification.
• Invoice List: Displays a card with a title, description, and a table of invoices.
• Invoice Creation Form: Uses a card to contain a multi-input form for creating new invoices.
• Delete Invoice Confirmation: Shows a card with a warning message and confirmation buttons.
• Mark Invoice as Paid Confirmation: Displays a card with a confirmation message and buttons to mark the invoice as paid.
• Dashboard Blocks: Uses multiple cards in a grid layout to display key metrics and data.
• Invoice Graph: Renders a card containing a chart to visualize invoice data.
• Responsiveness:
• Cards are designed to be responsive using grid layouts and media queries, like md: and lg: prefixes in class names.
• Cards may use a maximum width, such as max-w-sm, to limit their size on larger screens.
• The layout of card content may change based on screen size, for example using grid-cols-2 or grid-cols-3.
• Interactivity:
• Cards include interactive elements like links and buttons, often styled with the buttonVariants method.
• Some cards have popovers or dropdown menus for additional actions or information.
• Cards are frequently integrated with server actions to perform actions such as submitting forms, deleting invoices, and marking invoices as paid.
• Theming:
• Cards use CSS variables provided by Shadcn UI for consistent styling.
• Color palettes are defined in CSS and used within utility classes such as bg-muted, text-muted-foreground, and bg-primary.
• Custom colors and gradients are also implemented.

In summary, the card UI implementations in the sources are built using a combination of flexible layout techniques, custom components, styling utilities from Shadcn UI, and interactive elements. They are designed to be responsive and maintain a consistent look across the application.

Shadcn UI Button Styling Guide

The sources provide several examples of button styling, primarily using the buttonVariants method from Shadcn UI, along with other utility classes to achieve specific looks. The goal is to create consistent, accessible, and visually appealing buttons that enhance user interaction.

Key aspects of button styling include:

• buttonVariants method:
• This method is used to apply a consistent set of styles to button elements, whether they are <button> elements or <a> elements styled to look like buttons.
• It is imported from the components folder and invoked with an object that specifies style variations.
• The method allows for dynamic styling through variants and class names.
• Variants:
• The variant property is a key aspect of button styling using buttonVariants.
• Common variants include outline, secondary, ghost, and destructive.
• The outline variant creates a button with a border and transparent background.
• The secondary variant provides a button with a muted background color.
• The destructive variant is used to highlight potentially dangerous actions and often uses a red background color.
• If no variant is provided, the default style is applied.
• Class names:
• The class name property is used to add additional styling, including width, margin, and other CSS properties.
• For example, w-full makes the button take the full width of its container.
• Other classes include rounded-full for rounded corners, and text-left for aligning text to the left.
• Button components:
• Buttons are typically rendered using the <button> component from the components folder or are stylized <a> elements using the <Link> component from next/link.
• The asChild property is used to prevent the error of a button being a descendant of a button when using the Link component.
• Icons:
• Icons from libraries like Lucid React are integrated within button elements to enhance their visual appeal.
• Icons are given class names for sizing (size-*) and spacing (mr-*, ml-*).
• Dynamic Text:
• Button text can be passed as a dynamic property, allowing for the text to be changed without creating a new component.
• Styling links as buttons:
• The buttonVariants method is used to style the Link component from next/link to look like buttons, which allows for navigation while maintaining a consistent button style.
• Accessibility:
• The button styles provided by Shadcn UI are designed to be accessible, with appropriate contrast and focus states.
• Submit Buttons:The submit button component is designed to handle form submission and has a pending state with a spinner.
• The text property renders dynamic text for the submit button, and the variant property allows for different styling variations.

In summary, button styling in the sources is achieved through a combination of the buttonVariants method, utility classes, and careful integration of icons and text. This approach allows for creating visually appealing and functional buttons that provide a consistent user experience across the application, which enables styling buttons with various backgrounds, borders, text alignment, and interactive feedback.

Shadcn UI Table Rendering

The sources describe a comprehensive approach to rendering tables, primarily within the context of displaying invoice data, using a combination of custom components and styling utilities from Shadcn UI. The process involves creating a responsive and visually appealing table that can handle dynamic data and user interactions.

Key aspects of table rendering include:

• Structure:
• A table component serves as the wrapper for the entire table structure.
• The table is divided into a table header and a table body, each with distinct roles.
• The table header contains the column labels, rendered using table row and table head components.
• The table body houses the actual data rows, rendered with table row and table cell components.
• Components:
• Custom components like Table, TableHeader, TableRow, TableHead, TableBody, and TableCell are used to construct the table.
• These components are styled using utility classes from libraries like Shadcn UI, ensuring a consistent look and feel.
• The table header uses table head elements to define column labels, and the table body renders rows using table cell elements to display data values.
• Layout and Styling:
• The table is made responsive using flexbox and grid layouts.
• Classes such as flex, flex-col, items-center, justify-center are used for positioning.
• Spacing is managed using classes like gap-*, m-*, p-*.
• Text alignment is controlled with classes like text-left and text-right.
• Custom widths can be set using array brackets, for example w-[100px].
• The table uses CSS variables provided by Shadcn UI for consistent styling.
• Dynamic Data:
• Tables are designed to display dynamic data fetched from a database or an API.
• The data is typically mapped over to create table rows using the map function.
• Each data item corresponds to a row, and each property of a data item populates the table cells within that row.
• The key prop is used to uniquely identify each row when mapping over data.
• Table Header:
• The table header uses the table head component which serves as labels for the data below, for example, “invoice ID,” “customer,” “amount,” “status,” “date,” and “actions”.
• Table head elements can be styled individually, for example with text-right, to control alignment.
• Table Body:
• The table body renders rows of data with table cell elements.
• Each table cell contains a value from the fetched data, corresponding to the column it is in.
• The content of table cells is rendered dynamically, often with the help of helper functions, for example to format a date, or format currency.
• Actions Column:
• The “actions” column often includes a dropdown menu for interactions with each row.
• The dropdown is rendered with the DropdownMenu, DropdownMenuTrigger, and DropdownMenuContent components from Shadcn UI.
• The dropdown menu items are links styled to look like buttons with the buttonVariants method.
• These dropdown menus may contain interactive elements such as “edit invoice”, “download invoice”, “send reminder email”, “delete invoice”, and “mark as paid”.
• The alignment of the dropdown menu content is controlled using the align property of DropdownMenuContent.
• Responsiveness:
• Tables are designed to be responsive and adapt to different screen sizes.
• Layout changes, such as column widths, are often managed using media queries.
• Integration with other components:
• Tables are frequently integrated with other components such as cards and popovers to provide a structured user interface.
• They are often used within card components to display data within a container.
• Conditional Rendering
• Tables can be rendered conditionally based on data availability. An empty state component can be rendered if there is no data.
• A fallback can be rendered when loading table data, for example with the Suspense component.
• Dropdown menu items can be conditionally rendered, for example, the “Mark as paid” item is only shown when the invoice is not already marked as paid.

In summary, table rendering in the sources is achieved through the use of a flexible and modular structure with custom components, styling utilities from Shadcn UI, and dynamic data mapping. The resulting tables are responsive, visually appealing, and integrate well with the other UI components of the application, providing users with a clear view of their data and the ability to interact with it.

Client-Side Validation with Conform and Zod

Client-side validation is implemented in the sources using the Conform library in conjunction with Zod. This approach ensures that form data is validated on the client side before submission, providing a better user experience with immediate feedback, and also ensures that the data is safe to store in the database.

Here’s a breakdown of how client-side validation is handled:

• Zod for Schema Definition:
• Zod is used to define the schema for form data. This involves specifying the types of fields (e.g., string, number, email) and any additional constraints (e.g., minimum length, required).
• For example, a schema can specify that a “first name” field must be a string with a minimum length of two characters, and it can provide a custom error message if this rule isn’t met.
• Schemas are defined in a separate file, for example, zortSchemas.ts.
• The schemas are then imported in the components where the forms are rendered.
• Conform for Validation:
• Conform is used to validate form data against the Zod schema, on both the client side and the server side.
• The useForm hook from Conform is used to manage form state and validation. This hook is initialized with the last result from the server action, to keep the client and server state in sync.
• The useForm hook takes a validate callback that performs the actual validation using the passWithZod function.
• The passWithZod function compares the form data against the Zod schema and returns any errors.
• passWithZod Function:
• The passWithZod function is imported from @conform/zod and is used to compare form data against the Zod schema.
• It takes the form data and the Zod schema as arguments and returns a submission object that contains the validation result, including any errors.
• useActionState Hook for Server Communication:
• The useActionState hook from React is used to handle server actions and to get responses from server actions.
• It takes the server action and an initial state as arguments. It returns the last result from the server action and the server action itself. This hook is used to make a connection between the client side and server side, so that if there are server-side errors, the client can render the errors below the input fields.
• Form Setup:
• The form element is connected to Conform using the form.id and form.onSubmit properties that are returned from the useForm hook.
• The noValidate property is set on the form to prevent the browser’s default validation.
• Input Field Integration:
• Input fields are connected to Conform using the fields object returned from the useForm hook.
• Each input field uses fields.[fieldName].name, fields.[fieldName].key and fields.[fieldName].defaultValue.
• Error Display:
• Errors are displayed using fields.[fieldName].errors. This displays any errors returned by the validation process.
• Error messages are typically styled with a small red font.
• Validation Triggers:
• The shouldValidate property in the useForm hook is set to onBlur, which means the form is validated when an input loses focus.
• The shouldRevalidate property is set to onInput, which means the form is revalidated whenever the value of an input changes. This provides real-time validation as the user types.
• Reusing Schemas:
• The same Zod schemas are used for both client-side and server-side validation, ensuring consistency between the two. This reduces the risk of discrepancies in validation logic.

In summary, client-side validation in the sources utilizes Conform and Zod to provide robust, type-safe, and user-friendly form handling. This approach not only enhances the user experience by providing immediate feedback on errors but also ensures data integrity before it’s submitted to the server.

Invoice Creation Process

Invoice creation, as described in the sources, is a complex process involving multiple steps, from designing the user interface to implementing server-side logic for data storage and email notifications. The process is designed to be user-friendly, with a focus on real-time validation and a seamless user experience.

Here’s a detailed breakdown of invoice creation:

• User Interface (UI) Design:
• The invoice creation form is built using a combination of custom React components and styling from Shadcn UI.
• The form is divided into sections, each with relevant input fields, for example, a “from” section, a “client” section, a “date and due date” section and an “invoice item” section.
• Input Fields: The form includes various input fields for capturing invoice details, including:
• Text inputs for names, email addresses, addresses, invoice numbers, and descriptions.
• A date picker component for selecting the invoice date.
• A select input for choosing the due date (e.g., net 0, net 15, or net 30).
• Number inputs for quantity and rate of invoice items.
• A text area for adding a note.
• A currency selector.
• The form is structured using grid layouts to create a responsive design, adapting to different screen sizes.
• The form is styled with utility classes from Shadcn UI, for example card, input, label and button to maintain a consistent look and feel.
• Each input is linked to a Conform field, for data management and for client-side validation.
• Client-Side Validation:
• Client-side validation is implemented using the Conform library and Zod.
• Zod is used to define the schema for the invoice data. This schema specifies data types and constraints, such as required fields, minimum lengths, and valid email formats.
• The useForm hook from Conform manages form state and performs validation against the Zod schema using the passWithZod function.
• Real-time validation is triggered on blur and input changes with shouldValidate and shouldRevalidate properties in useForm, providing immediate feedback to the user.
• Errors from validation are displayed below each input field with the fields.[fieldName].errors property.
• Server-Side Action and Data Handling:
• A server action is defined to handle the form submission. This action is marked with the use server directive, indicating it will run on the server.
• The server action uses the same Zod schema for server-side validation, ensuring consistent validation logic.
• The server action first validates the data against the Zod schema using the passWithZod function. If validation fails, error messages are returned to the client.
• If validation is successful, the server action proceeds to create a new invoice record in the database using Prisma.
• Prisma is used as the ORM to interact with the database. The data is stored in the invoice model, which includes fields for all the invoice details.
• The invoice model also includes relations to the user model, allowing for tracking which user created a particular invoice.
• The server action returns a new invoice id, so the user can be redirected to the correct page.
• Email Notifications:
• After creating the invoice, an email is sent to the client.
• Mailtrap is used to send emails. The application uses the Mailtrap SDK, which is easier to implement than a generic node mailer.
• Email templates are created using Mailtrap’s HTML Builder with dynamic data rendering.
• The server action sends a custom email with the invoice details, using the created template.
• The email includes the invoice number, due date, total amount, and a link to download the invoice PDF.
• The email also includes the name of the client, so that the email is personalized.
• PDF Generation:
• A PDF document is generated from scratch using the jspdf library.
• The PDF generation process is initiated via a route handler that fetches the invoice data from the database and converts the invoice details to PDF format, enabling users to download it as a real PDF file rather than just a screenshot.
• The PDF includes key details such as the invoice number, the names of the sender and recipient, as well as the items, quantity, rate and total.
• Integration with Other Components:
• The invoice creation form is integrated into the main dashboard of the application.
• The form uses other components such as cards and popovers, to keep the layout clear and organized.
• The invoice creation form fetches the user information, including the name and address from the database, using the user id from the session.
• Error Handling:
• Both client-side and server-side validation provide error messages when form data is invalid.
• Errors are displayed next to the corresponding input fields, giving the user an idea of what needs to be corrected.

In summary, the invoice creation process is a carefully orchestrated flow involving form rendering, real-time validation, server-side logic, database interaction, and email notifications. It ensures data integrity, provides a smooth user experience, and delivers professional-looking invoices.

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!