SalesPulse Analytics Dashboard

An interactive and professional dashboard for visualizing sales performance, product trends, and payment distributions. Built with React, Firebase, and Tailwind CSS.

🚀 View Live Demo

---

🚀 Features

• Real-time Analytics: Live updates of sales data and performance metrics.
• Interactive Visualizations: Beautiful charts powered by Recharts for tracking trends and distributions.
• User Authentication: Secure login and sign-up using Firebase Authentication (Email/Password & Google).
• Profile Management:
  • Custom display names and unique usernames.
  • Profile picture upload and management.
  • Personalized dashboard experience.
• Advanced Filtering: Filter sales data by product category, payment method, and custom date ranges.
• Responsive Design: Fully optimized for desktop and mobile devices using Tailwind CSS.
• Smooth Interactions: Elegant animations and transitions powered by Framer Motion.

🛠️ Tech Stack

• Frontend: React 19, Vite
• Styling: Tailwind CSS 4
• Backend/Database: Firebase Firestore
• Authentication: Firebase Auth
• Icons: Lucide React
• Charts: Recharts
• Animations: Motion

📦 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• A Firebase project

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/salespulse-dashboard.git
   cd salespulse-dashboard

2. Install dependencies:

   npm install

3. Environment Configuration: Copy the .env.example file to a new file named .env:

   cp .env.example .env

   Open .env and fill in your Firebase project credentials from the Firebase Console.

4. Run the development server:

   npm run dev

   The app will be available at http://localhost:3000.

🔒 Security

This project uses Firestore Security Rules to ensure that:

• Only authenticated users can access the database.
• Users can only read and write their own profile data.
• Data integrity is maintained through strict schema validation.

Make sure to deploy the firestore.rules file to your Firebase project.

👤 Author

Irfan Khattak

• GitHub: Irfan-code-cloud
• LinkedIn: Irfan Khattak

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙌 Acknowledgments

• Developed by Irfan Khattak as a showcase of modern full-stack development.
• Icons by Lucide
• UI inspiration from modern SaaS dashboards.