https://github.com/chen-abudi/dashboard-invoices
This is a dynamic project centered around the creation of a dashboard app. This meticulously crafted app display and manage a collection of invoices, showcasing the capabilities and versatility of Next.js.
https://github.com/chen-abudi/dashboard-invoices
nextjs postgresql responsive-layout sql sql-queries tailwindcss typescript vercel vercel-postgres
Last synced: 8 months ago
JSON representation
This is a dynamic project centered around the creation of a dashboard app. This meticulously crafted app display and manage a collection of invoices, showcasing the capabilities and versatility of Next.js.
- Host: GitHub
- URL: https://github.com/chen-abudi/dashboard-invoices
- Owner: Chen-Abudi
- Created: 2024-02-26T17:35:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-02T10:02:27.000Z (over 1 year ago)
- Last Synced: 2024-12-30T20:27:52.261Z (10 months ago)
- Topics: nextjs, postgresql, responsive-layout, sql, sql-queries, tailwindcss, typescript, vercel, vercel-postgres
- Language: TypeScript
- Homepage: https://dashboard-invoices-zeta.vercel.app
- Size: 1.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dashboard-invoices
**Developed by** **`Grace Chen Abudi`** 👩🏽💻
## 📣 Overview:
- [dashboard-invoices](#dashboard-invoices)
- [📣 Overview:](#-overview)
- [🔎 Intro:](#-intro)
- [🧰 Tech Stack:](#-tech-stack)
- [🛠️ Techniques and Tools:](#️-techniques-and-tools)
- [🏗️ Architecture Overview:](#️-architecture-overview)
- [🗝️ Key Components Include:](#️-key-components-include)
- [🔄 Interactions:](#-interactions)
- [📚 Inclusion Summary:](#-inclusion-summary)
- [✨ How to Get Started:](#-how-to-get-started)
- [🚀 Live Project:](#-live-project)
---
## 🔎 Intro:
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.
## 🧰 Tech Stack:
- Next.js
- TypeScript
- JavaScript
- TailwindCSS
- Responsive Layout
- Vercel
- Relational Database - PostgreSQL
- SQL + SQL Queries
- ZOD
## 🛠️ Techniques and Tools:
- **`clsx`**: A tiny utility for constructing className strings conditionally.
- **`Next.js Hooks`**: usePathname, useSearchParams, useRouter.
- **`Vercel Postgres`** is 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 Actions`**
- **`Next.js APIs`**: error handling, notFound function
- **`Next.js Auth`**: Authentication and Authorization
- **`Metadata`**
---
## 🏗️ Architecture Overview:
```mermaid
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
```
### 🗝️ Key Components Include:
- **_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.
### 🔄 Interactions:
1. **Client to Server:** Initiates HTTP requests triggering server-side operations.
2. **Server to Database:** Execute **SQL queries** for targeted data retrieval.
3. **Server to ReactServerComponents:** Utilizes React Server Components for efficient server-side data fetching.
4. **ReactServerComponents to Database:** Fetches data from the database securely.
5. **ReactServerComponents to Server and Components:** Transmits fetched data to both server and components.
6. **Server to Components:** Distributes data to specific components.
7. **Server to UI:** Employs streaming to enhance user interaction, displaying data progressively.
### 📚 Inclusion Summary:
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.
---
# ✨ How to Get Started:
---
# 🚀 Live Project:
- `Visit the App` [👉🏽 **HERE !**](https://dashboard-invoices-zeta.vercel.app/)
---