Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmedalsanadi/finbiz
https://github.com/ahmedalsanadi/finbiz
chartjs figma front-end react tailwindcss ui-ux
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ahmedalsanadi/finbiz
- Owner: ahmedalsanadi
- License: mit
- Created: 2024-09-09T00:49:02.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-03T00:55:01.000Z (3 months ago)
- Last Synced: 2024-11-03T01:23:24.224Z (3 months ago)
- Topics: chartjs, figma, front-end, react, tailwindcss, ui-ux
- Language: JavaScript
- Homepage: https://main--finbiz-al-sanadi.netlify.app/
- Size: 17.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔥 FinBiz - Your Finance Solutions for Business 💼📊
## ✨ Overview
Welcome to **FinBiz** - a React-based web application built to empower finance teams and streamline financial management for small and medium-sized businesses. Designed with precision and attention to detail from a Figma prototype, this project combines modern UI with functional components to deliver a seamless experience.
Made with ❤️ by [Ahmed Al-Sanadi]
⭐ Star this repo if you find it helpful!
---
## 🌟 Features
- **Dynamic Navbar** - Includes smooth navigation across sections and a responsive design with a mobile menu.
- **Interactive Hero Section** - Welcomes users with a headline, description, and call-to-action elements.
- **Charts and Stats Dashboard** - Shows key financial metrics like Profit, Revenue, and Product Sold, using intuitive visualizations.
- **User Testimonials** - Displays reviews to build trust and provide social proof.
- **Flexible Pricing Plans** - Structured plans for users with customized styling for easy comparison.
- **Pre-Footer Section** - Engages users with additional resources and insights.
- **Fully Responsive** - Smooth design that adapts across all device sizes, from desktop to mobile.
## 🛠️ Technologies Used
- **React** (`^18.3.1`) - Component-based architecture for building user interfaces.
- **React DOM** (`^18.3.1`) - Integration of React components with the web DOM.
- **CSS Modules** - For scoped and organized styling.
- **AOS (Animate on Scroll)** (`^2.3.4`) - Adds beautiful animations on scroll.
- **JavaScript ES6+** - Modern JavaScript for clean and concise code.
- **Chart.js** (`^4.4.4`) - Library for creating responsive, interactive charts.
- **React Chart.js 2** (`^5.2.0`) - A wrapper for integrating Chart.js with React.
- **React Icons** (`^5.3.0`) - Collection of popular icons as React components.
- **Swiper** (`^11.1.12`) - A customizable slider/carousel library.
## 📸 Screenshots
## 🚀 Getting Started
To get a local copy up and running, follow these steps:
### Prerequisites
- Node.js and npm installed on your machine
### 🛠️ Installation
1. **Clone the repository**
```bash
git clone https://github.com/ahmedalsanadi/FinBiz.git
```
2. **Navigate into the directory**
```bash
cd FinBiz
```
3. **Install dependencies**
```bash
npm install
```
4. **Run the app**
```bash
npm start
```
The app will open at `http://localhost:3000` in your default web browser.
## 🧩 Components
This project is structured into modular components, each serving a distinct function:
- `Navbar` - Responsive navigation bar
- `HeroSection` - Initial call-to-action section with headline and email input
- `MiddleNav` - Secondary navigation for quick access
- `CardSection` - Displays detailed information in a card layout
- `ChartsSection` - Graphs showing financial metrics like profit and revenue
- `PlanSection` - Available pricing plans
- `TestimonialSection` - Reviews from satisfied customers
- `Footer` - App footer with contact info and links
- And more
## ✨ Key Functionalities
- **Email Input Form** - Collects emails in the Hero Section.
- **Responsive Navbar** - Adaptable menu that adjusts to screen size.
- **Data-Driven Charts** - Visualizes financial stats dynamically.
- **Scroll Animations** - Smooth transitions for an engaging user experience.
## 🤝 Contributing
We welcome contributions! If you have suggestions, feel free to fork the repository and submit a pull request.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/YourFeature`)
3. Commit your Changes (`git commit -m 'Add YourFeature'`)
4. Push to the Branch (`git push origin feature/YourFeature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## 📧 Contact
- **Ahmed Al-Sanadi** - [[email protected]](mailto:[email protected])
- **Project Link** - [https://github.com/ahmedalsanadi/finbiz](https://github.com/ahmedalsanadi/FinBiz)
---
Made with ❤️ by **Ahmed-Al-Sanadi** --⭐ Star this repo if you find it helpful!
---