Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vaibhav-pant/reactdashboardapp
A responsive and dynamic dashboard application built with React.js, React Router v6, and styled-components, featuring three main pages: Dashboard, Transactions, and Support.
https://github.com/vaibhav-pant/reactdashboardapp
dashboard github-pages react react-dashboard react-router-v6 responsive-design styled-components ui-components ui-design web-dev
Last synced: 1 day ago
JSON representation
A responsive and dynamic dashboard application built with React.js, React Router v6, and styled-components, featuring three main pages: Dashboard, Transactions, and Support.
- Host: GitHub
- URL: https://github.com/vaibhav-pant/reactdashboardapp
- Owner: Vaibhav-Pant
- Created: 2024-07-22T16:42:36.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-25T14:05:28.000Z (4 months ago)
- Last Synced: 2024-07-25T16:13:16.570Z (4 months ago)
- Topics: dashboard, github-pages, react, react-dashboard, react-router-v6, responsive-design, styled-components, ui-components, ui-design, web-dev
- Language: JavaScript
- Homepage: https://vaibhav-pant.github.io/ReactDashboardApp/
- Size: 584 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Dashboard App UI
This repository contains the source code for a React-based dashboard application. The app features a modern and responsive user interface, implemented using React.js, React Router v6, and styled-components. It includes three main pages: Dashboard, Transactions, and Support, each accessible via client-side routing.
## Features
- **React.js**: Built using React.js to create a dynamic and responsive user interface.
- **React Router v6**: Utilizes React Router for seamless client-side navigation between pages.
- **Styled-Components**: CSS-in-JS library used for writing CSS, providing a clean and modular approach to styling components.
- **Component-based Architecture**: Modular design with reusable components to ensure code maintainability and scalability.
- **State Management**: Efficient state management using React hooks to handle UI state and interactions.
- **Responsive Design**: Fully responsive UI, optimized for various screen sizes and devices.
- **GitHub Pages Deployment**: Hosted on GitHub Pages for easy access and demonstration.
## Pages
1. **Dashboard**: Provides an overview of key metrics and insights.
2. **Transactions**: Displays transaction history and details.
3. **Support**: Offers support resources and contact information.
## Screenshots
*Dashboard page on a desktop screen*
*Transactions page on a desktop screen*
*Support page on a desktop screen*
## Getting Started
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
- Node.js (version 14.x or later)
- npm (version 6.x or later)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Vaibhav-Pant/ReactDashboardApp.git
cd ReactDashboardApp
```
2. Install the dependencies:
```bash
npm install
```
### Running the App
Start the development server:
```bash
npm start
```
Open your browser and navigate to `http://localhost:3000` to view the app.
### Building for Production
To create a production build of the app, run:
```bash
npm run build
```
### Deploying to GitHub Pages
The app is configured to be deployed to GitHub Pages. To deploy, run:
```bash
npm run deploy
```
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.
## Acknowledgements
- [React](https://reactjs.org/)
- [React Router](https://reactrouter.com/)
- [Styled-Components](https://styled-components.com/)
- [GitHub Pages](https://pages.github.com/)
---