title
Yearly Statistics Dashboard

Yearly Statistics Dashboard

Welcome to the Yearly Statistics Dashboard project! This project showcases yearly information about the number of transactions, application downloads, and other key metrics. The dashboard is built using React, Tailwind CSS, Axios, and React Query. The project is designed to be fully responsive and offers a seamless user experience across various devices.

Project Summary

The Yearly Statistics Dashboard is a web application that provides an intuitive interface for visualizing and interacting with yearly data. Users can easily switch between different years to view detailed statistics for each period. The application leverages modern web development technologies to ensure fast performance and a responsive design.

Features

• Responsive Design: The dashboard is designed to be fully responsive, ensuring a great user experience on both desktop and mobile devices.
• Interactive Tabs: Users can switch between different years to view the respective data.
• Animated Transitions: Smooth fade-in and fade-out animations enhance the user experience when navigating between tabs.
• Data Fetching: Data is fetched from a remote API using Axios and managed with React Query for efficient and scalable data handling.

Tools and Technologies

• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Axios: A promise-based HTTP client for making API requests.
• React Query: A library for managing server state in React applications.
• Framer Motion: A library for animations in React.
• Vercel: A platform for deploying and hosting web applications.

Installation and Setup

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/jameeronline/ab-dashboard.git
   cd ab-dashboard

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to http://localhost:3000 to view the dashboard.

Deployment

The project is deployed on Vercel and can be accessed using the following link:

Yearly Statistics Dashboard on Vercel

Project Structure

The project structure is organized as follows:

ab-dashboard/
├── public/
├── src/
│ ├── components/
│ │ ├── ButtonRounded.jsx
│ │ ├── TabContent.jsx
│ │ └── TabComponent.jsx
│ ├── utils/
│ │ └── utilities.js
│ ├── App.jsx
│ ├── index.css
│ └── index.js
├── .gitignore
├── package.json
└── README.md

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.

Contact

For any inquiries or questions, please contact us at jamalbe2004@gmail.com.

---

Thank you for visiting our project! We hope you find it useful and informative.