This application is a robust and intuitive dashboard that displays crucial financial metrics for a website which specializes in delivering online sales. Designed with a user-friendly interface, the dashboard provides real-time insights into the financial performance of your online platform.
Key metrics displayed on the dashboard include:
- Daily Revenue
- Year-to-Date Revenue
- Number of Customers
- Number of Orders
Please note that this application is currently populated with dummy data for illustrative purposes. The dummy data can be replaced with a reference to an API that provides the data if desired.
![Dashborad Screenshot](https://private-user-images.githubusercontent.com/32082005/241493479-afe5401a-7f12-4d18-83ba-92c3824314e7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NzE1MjYsIm5iZiI6MTczOTU3MTIyNiwicGF0aCI6Ii8zMjA4MjAwNS8yNDE0OTM0NzktYWZlNTQwMWEtN2YxMi00ZDE4LTgzYmEtOTJjMzgyNDMxNGU3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE0VDIyMTM0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUzMGZiMzRlNWRmYTc5ZWNmN2I2NGRjZDMzOGM5NjBjMDEyYjEzODMyNWM5NjM5NzU4MTliODEzMzU3NzM3ZWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.mQsPOeBehJqxbZobQnOzmMleaYm6cAyZCuay_0el6IU)
![Customers Screenshot](https://private-user-images.githubusercontent.com/32082005/241493509-12e6a4c1-0670-433e-a584-53a0ea82971e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NzE1MjYsIm5iZiI6MTczOTU3MTIyNiwicGF0aCI6Ii8zMjA4MjAwNS8yNDE0OTM1MDktMTJlNmE0YzEtMDY3MC00MzNlLWE1ODQtNTNhMGVhODI5NzFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE0VDIyMTM0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM2ZmZkNmI4NjFmYmNiNTEyOTZlYzRjOGFiZjI0Zjg4ZDhmZmY5YjZlYmI0ODBkZjk2YjUwNTg2ZTUwMzllMTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.F0WHjQAe21DEpxy804y1LyIhOrqYd8a-F4UzKxxymn8)
![Orders Screenshot](https://private-user-images.githubusercontent.com/32082005/241493519-beab01ac-c695-461a-896f-2e59314ba8cd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1NzE1MjYsIm5iZiI6MTczOTU3MTIyNiwicGF0aCI6Ii8zMjA4MjAwNS8yNDE0OTM1MTktYmVhYjAxYWMtYzY5NS00NjFhLTg5NmYtMmU1OTMxNGJhOGNkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE0VDIyMTM0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJhZGE1MGQxNjRhY2EwMGExMzFkNGJmNzliMDNlMDA5OTM2YWNiZTMzYTIxY2ZiNzA5NzFmZTFkMWJlZTFmZDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.igJ4Ng7JNIlJfc-NB3oszTjnaY3UQ0u16KbIED0MG2o)
The application is built using the following technologies:
-
Next.js: A powerful React framework used for building our user interface. Next.js enables efficient JavaScript rendering, resulting in a fast, efficient, and SEO-friendly application.
-
Tailwind CSS: A highly customizable, low-level CSS framework that we've used for designing our application. Tailwind provides low-level utility classes that let us build completely custom designs without ever leaving our HTML.
-
Chart.js: A flexible JavaScript charting library that we've used for visualizing our financial data. Chart.js provides eight different types of charts that are highly customizable and responsive.
Before you begin, ensure you have Node.js installed on your computer.
-
Clone the repository:
git clone https://github.com/your-username/website-financial-metrics-dashboard.git
-
Navigate into the directory:
cd website-financial-metrics-dashboard
-
Install dependencies:
npm install
-
Start the server:
npm run dev
The application should now be running on http://localhost:3000. Open this in your browser to view the dashboard.
We welcome contributions to the Website Financial Metrics Dashboard! Please see our contributing guide for more details.
This project is licensed under the terms of the MIT license. See the LICENSE file for details.