Developed by Grace Chen Abudi 👩🏽💻
This is a dynamic full-stack app centered around the creation of a dashboard. This meticulously crafted dashboard displays and manages a collection of invoices, showcasing the capabilities and versatility of Next.js. This is a practice project.
- Next.js
- TypeScript
- JavaScript
- TailwindCSS
- Responsive Layout
- Vercel
- Relational Database - PostgreSQL
- SQL + SQL Queries
- ZOD
clsx: A tiny utility for constructing className strings conditionally.Next.js Hooks: usePathname, useSearchParams, useRouter.Vercel Postgresis a serverless SQL database designed to integrate with Vercel Functions and your frontend framework.seed scripts: Contains the instructions for creating and seeding the invoices, customers, user, and the revenue tables.Server Components: Server Components facilitate asynchronous tasks with promises, enabling streamlined async/await syntax. They execute server-side, optimizing data fetches and logic, allowing direct database querying without an extra API layer.Request Waterfalls: A "waterfall" denotes a series of network requests reliant on prior completions. While useful for conditional dependencies, it can inadvertently impede performance in unintentional instances, emphasizing the need for careful consideration in system design.Parallel Data Fetching: A common way to avoid waterfalls is to initiate all data requests at the same time - in parallel. In JavaScript, you can use "Promise.all()" or "Promise.allSettled()" for performance gains. This native pattern is versatile but consider potential delays if one request lags behind others.Dynamic Rendering: Dynamic rendering renders the content on the server for each user at the request time. Benefits include real-time data display, user-specific content, and access to request-time information. However, application speed is constrained by the slowest data fetch.Streaming: Streaming is a data transfer technique that allows you to break down a route into smaller "chunks" and progressively stream them from the server to the client as they become ready.Debouncing (Best Practice): Debouncing is a programming practice that limits the rate at which a function can fire. In this project, it's used for query the database when the user has stopped typing.Pagination: Pagination allows users to navigate through the different pages to view all the invoices.Server ActionsNext.js APIs: error handling, notFound functionNext.js Auth: Authentication and AuthorizationMetadata
classDiagram
class Client {
+ makeHTTPRequest()
+ interactWithUI()
}
class Server {
+ handleHTTPRequest()
+ fetchUsingReactServerComponents()
+ fetchUsingSQL()
+ parallelizeDataFetching()
+ implementStreaming()
+ moveDataFetchingToComponents()
}
class Database {
+ executeSQLQuery()
}
class ReactServerComponents {
+ fetchData()
}
class Components {
+ fetchData()
}
class UI {
+ displayData()
}
Client --> Server : HTTP Request
Server --> Database : SQL Query
Server --> ReactServerComponents : Data Fetching
Server --> Components : Component Data Fetching
ReactServerComponents --> Database : Data Fetching
Database --> ReactServerComponents : Fetched Data
ReactServerComponents --> Server : Fetched Data
Components --> Server : Fetched Data
Server --> Components : Data to Components
Server --> UI : Streaming Data
- Client Class: Represents the client-side application responsible for making HTTP requests and interacting with the user interface.
- Server Class: The server-side component, handling HTTP requests, fetching data using Server Components and SQL, parallelizing data fetching, implementing streaming, and moving data fetching logic to components.
- Database Class: Manage database interactions, executing SQL queries to retrieve and store data.
- ReactServerComponent Class: Fetches data on the server, optimizing expensive data fetches and logic.
- Components Class: Handles data fetching on the server, contributing to partial prerendering.
- UI Class: Responsible for displaying data to the user.
- Client to Server: Initiates HTTP requests triggering server-side operations.
- Server to Database: Execute SQL queries for targeted data retrieval.
- Server to ReactServerComponents: Utilizes React Server Components for efficient server-side data fetching.
- ReactServerComponents to Database: Fetches data from the database securely.
- ReactServerComponents to Server and Components: Transmits fetched data to both server and components.
- Server to Components: Distributes data to specific components.
- Server to UI: Employs streaming to enhance user interaction, displaying data progressively.
This architecture seamlessly integrates client and server-side components, optimizing data flow.
Key elements like Client, Server, Database, ReactServerComponents, Components, and UI collaboratively enhance data fetching, processing, and presentation.
Interactions demonstrate a well-orchestrated system, utilizing streaming for responsive user interfaces. Overall, it excels in efficiency, component streamlining, and user interface responsiveness, establishing a robust foundation for a user-friendly application.
Visit the App👉🏽 HERE !