Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
100 changes: 50 additions & 50 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
### Simple Dashboard
This project implements a basic, responsive dashboard interface for a web application using React and Tailwind CSS.

## Project Overview
The dashboard displays key metrics, includes a sidebar for navigation, shows a data table for recent activities, and features a chart for trend visualization. The design is fully responsive to ensure a seamless experience across various devices.

## Features
- Key Metrics Display: Shows Total Sales, Active Users, and Monthly Revenue.
- Sidebar Navigation: Includes sections for Dashboard, Reports, and Settings.
- Recent Activities Table: Displays recent transactions or user activities.
- Trend Chart: A bar chart showing data trends over time.
- Responsive Design: Ensures proper display on both desktop and mobile devices.

## Screenshots
![Screenshot from 2024-09-18 09-04-11](https://github.com/user-attachments/assets/d9b49b67-05ac-4556-93d4-5709bcc0b484)
![Screenshot from 2024-09-18 09-04-51](https://github.com/user-attachments/assets/f41c29c6-3649-4f00-a738-16444758ed0e)
![Screenshot from 2024-09-18 09-06-15](https://github.com/user-attachments/assets/ea8d9390-72ac-4f17-8c2e-cc9da6b2409b)


## Technologies Used
- React
- Tailwind

## Setup and installation
1. Clone the repository:
```
git clone https://github.com/0097eo/dash.git
```

2. Install dependencies:
```
npm install
```

3. Start the development server:
```
npm start
```
4. Open your browser and visit http://localhost:3000 to view the dashboard.

## Responsive design
The dashboard is built with a mobile-first approach using Tailwind CSS. Key responsive features include:

- Collapsible sidebar on smaller screens
- Stacked layout for metrics cards on mobile
- Responsive data table with horizontal scroll on smaller screens
- Adjustable chart size based on screen width

## License
This project is open source and available under the MIT License
### Simple Dashboard
This project implements a basic, responsive dashboard interface for a web application using React and Tailwind CSS.
## Project Overview
The dashboard displays key metrics, includes a sidebar for navigation, shows a data table for recent activities, and features a chart for trend visualization. The design is fully responsive to ensure a seamless experience across various devices.
## Features
- Key Metrics Display: Shows Total Sales, Active Users, and Monthly Revenue.
- Sidebar Navigation: Includes sections for Dashboard, Reports, and Settings.
- Recent Activities Table: Displays recent transactions or user activities.
- Trend Chart: A bar chart showing data trends over time.
- Responsive Design: Ensures proper display on both desktop and mobile devices.
## Screenshots
![Screenshot from 2024-09-18 09-04-11](https://github.com/user-attachments/assets/d9b49b67-05ac-4556-93d4-5709bcc0b484)
![Screenshot from 2024-09-18 09-04-51](https://github.com/user-attachments/assets/f41c29c6-3649-4f00-a738-16444758ed0e)
![Screenshot from 2024-09-18 09-06-15](https://github.com/user-attachments/assets/ea8d9390-72ac-4f17-8c2e-cc9da6b2409b)
## Technologies Used
- React
- Tailwind
## Setup and installation
1. Clone the repository:
```
git clone https://github.com/0097eo/dash.git
```
2. Install dependencies:
```
npm install
```
3. Start the development server:
```
npm start
```
4. Open your browser and visit http://localhost:3000 to view the dashboard.
## Responsive design
The dashboard is built with a mobile-first approach using Tailwind CSS. Key responsive features include:
- Collapsible sidebar on smaller screens
- Stacked layout for metrics cards on mobile
- Responsive data table with horizontal scroll on smaller screens
- Adjustable chart size based on screen width
## License
This project is open source and available under the MIT License
Loading