PredictX - AI Predictive Analytics Dashboard

PredictX is an AI-powered predictive analytics dashboard that helps businesses visualize data, forecast trends, and make data-driven decisions. Built with React, TypeScript, and Tailwind CSS, it offers a modern, responsive interface with dark mode support.

Developed by Hrishikesh D. Mohite

🚀 Features

• Interactive Dashboards: Visualize key metrics with customizable charts and graphs
• Predictive Analytics: AI-powered forecasting for revenue, customer churn, and more
• Custom Dashboard Creation: Build personalized dashboards for specific business needs
• API Integration: Connect with various AI providers (OpenAI, Anthropic, Google AI, etc.)
• Authentication: Secure user authentication via Supabase
• Dark/Light Mode: Fully responsive UI with theme switching capability

📋 Prerequisites

• Node.js (v14.0.0 or higher)
• npm or yarn

🛠️ Installation

1. Clone the repository:

   git clone https://github.com/Lucifer88484/PredictX.git
   cd PredictX

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env file in the root directory with your Supabase credentials:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

   Note: For development without Supabase, the app includes a fallback mechanism that will auto-authenticate in development mode. You can use any email/password combination on the login screen.

4. Start the development server:

   npm run dev
   # or
   yarn dev

5. Open your browser and navigate to http://localhost:5173

🏗️ Project Structure

project/
├── public/             # Static assets
├── src/
│   ├── components/     # Reusable UI components
│   │   ├── auth/       # Authentication components
│   │   ├── dashboard/  # Dashboard-related components
│   │   └── layout/     # Layout components (Header, Sidebar)
│   ├── contexts/       # React context providers
│   ├── pages/          # Page components
│   ├── App.tsx         # Main application component
│   └── main.tsx        # Application entry point
├── index.html          # HTML entry point
├── package.json        # Project dependencies
├── tailwind.config.js  # Tailwind CSS configuration
└── vite.config.ts      # Vite configuration

🧩 Key Components

• AuthContext: Manages user authentication state
• ThemeContext: Handles dark/light mode switching
• DashboardLayout: Main application layout with sidebar and header
• DashboardCard: Reusable component for displaying metrics and charts
• ApiKeyForm: Form for managing API integrations

📊 Available Pages

• Login: User authentication page
• Dashboard: Main analytics dashboard with key metrics
• Create Dashboard: Interface for building custom dashboards
• API Keys: Manage integrations with AI providers
• Settings: User and application settings

🔧 Development

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run lint - Run ESLint to check for code issues
• npm run preview - Preview the production build locally

Technologies Used

• React: UI library
• TypeScript: Type-safe JavaScript
• React Router: Client-side routing
• Tailwind CSS: Utility-first CSS framework
• Vite: Fast build tool and development server
• Supabase: Backend-as-a-Service for authentication
• Lucide React: Icon library

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

📬 Contact

Hrishikesh D. Mohite - hrishikeshmohite001@gmail.com

Website: www.hrishikeshmohite.com

Project Link: https://github.com/Lucifer88484/predictx

---

Made with ❤️ by Hrishikesh D. Mohite