Next.js has quickly emerged as one of the most popular frameworks for building React applications. Developed by Vercel, Next.js offers an opinionated and streamlined approach to React development, making it easier to build full-stack web applications with a focus on performance, SEO, and developer experience.
Next.js is a React-based framework that allows developers to build server-side rendering (SSR) and static web applications with ease.
We will start what our finance dashboard will include
- A public home page. 2.A login page. 3.Dashboard page that are protected by authentication. 4.Ability for user to add edit and delete invoices. Here is an overview of features that will learn: styling optimization routing data mutation error handling and authentication etc. There is a few things one must do before starting , a system requires to install Node.js 18.17 you'll need a Github account and a vercel account.
After running some commands we will explore our project and should have such folders;
/app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.
/app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
/app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you.
/public: Contains all the static assets for your application, such as images.
will the use this commands to install pnpm i and to start the development server pnpm dev
Dashboard page includes:
Total Revenue Collected: The total revenue that has been received by the company.
Total Revenue Pending: Revenue that has been invoiced but not yet collected.
Total Invoices: Total number of invoices issued.
Total Customers: The number of customers the company has.
Revenue Chart: A line chart displaying the revenue trends over a period of time.
invoice page
Customer Information
Invoice Date
Amount Due
Status (e.g., Paid, Unpaid, Pending)
*Authentication *
on authentication we add a login route were we enable the user to access the web and view customers information, we add passwords for it to be more secured.
Top comments (0)