AI Tools SPA

A modern Single Page Application built with React 19, Material UI v7, and React Router v7.

🚀 Features

• React 19 - Latest version with improved performance and modern features
• Material UI v7 - Google's Material Design components with Emotion styling
• React Router v7 - Declarative routing with improved API
• TypeScript - Type-safe development experience
• Vite - Fast build tool with hot module replacement
• ESLint & Prettier - Code quality and formatting tools
• Dark/Light Theme - Toggle between dark and light modes with persistence
• Poppins Font - Modern typography throughout the application

📦 Installation

1. Clone the repository
2. Install dependencies:

npm install

🛠️ Development

Start the development server:

npm run dev

The application will be available at http://localhost:5173

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint with auto-fix
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

📁 Project Structure

src/
├── components/     # Reusable UI components (ThemeToggle, etc.)
├── contexts/       # React contexts (ThemeContext)
├── layout/         # Layout components (Header, Navigation, etc.)
├── pages/          # Page components (Home, ReceiptParser, AudioParser)
├── theme/          # Material UI theme configuration
├── main.tsx        # Application entry point
└── App.tsx         # Main app component

🎨 Pages & Features

• Home - Landing page with feature overview and technology showcase
• Receipt Parser - Upload receipt images and get AI-powered data extraction
• Audio Parser - Upload audio files and get AI-powered analysis including topic, emotion, and tags
• Theme Toggle - Switch between dark and light modes (persisted in localStorage)
• Responsive Design - Fully responsive layout that works on all devices

🔧 Configuration

ESLint

The project uses modern ESLint configuration with:

• TypeScript support
• React and React Hooks rules
• Prettier integration

Prettier

Prettier is configured with:

• Semi-colons enabled
• Single quotes
• 100 character line width
• 2-space indentation

Material UI Theme

Custom theme configuration includes:

• Primary and secondary color schemes
• Typography settings
• Component style overrides

🏗️ Technology Stack

Technology	Version	Purpose
React	19.1.1	UI Library
Material UI	7.3.2	Component Library
React Router	7.9.1	Routing
TypeScript	5.8.3	Type Safety
Vite	7.1.2	Build Tool
ESLint	9.33.0	Code Linting
Prettier	3.6.2	Code Formatting

📱 Responsive Design

The application is fully responsive and works well on:

• Desktop computers
• Tablets
• Mobile devices

🔍 Code Quality

The project maintains high code quality through:

• TypeScript for type safety
• ESLint for code analysis
• Prettier for consistent formatting
• React strict mode for development warnings
• Modern React patterns and hooks

🚀 Getting Started

1. Make sure you have Node.js (v18 or higher) installed
2. Clone this repository
3. Run npm install to install dependencies
4. Run npm run dev to start the development server
5. Open your browser and navigate to http://localhost:5173

📄 License

This project is created for demonstration purposes.