EaglEye Frontend

A modern Next.js application with Redux state management, featuring a chat interface with image upload capabilities, particle animations, and a comprehensive dashboard.

📋 Table of Contents

• Project Structure
• Features
• Prerequisites
• Installation
• Running the Application
• Building for Production
• Technologies Used

📁 Project Structure

isro_frontend/
├── public/                      # Static assets
├── src/
│   ├── app/                     # Next.js App Router
│   │   ├── globals.css         # Global styles
│   │   ├── layout.tsx          # Root layout component
│   │   ├── page.tsx            # Chat page
│   │   ├── StoreProvider.tsx   # Redux store provider
│   │   └── home/
│   │       └── page.jsx        # Homes page
│   │
│   ├── components/             # React components
│   │   ├── chat/              # Chat-related components
│   │   │   ├── ChatWindow.tsx       # Main chat interface
│   │   │   ├── ImageUploader.tsx    # Image upload component
│   │   │   ├── ImageViewer.tsx      # Image display component
│   │   │   └── MessageBubble.tsx    # Individual message component
│   │   │
│   │   ├── home/              # Home page components
│   │   │   ├── Dashboard.jsx        # Main dashboard
│   │   │   ├── FAQSection.jsx       # FAQ section
│   │   │   ├── Footer.jsx           # Footer component
│   │   │   ├── Header.jsx           # Header component
│   │   │   ├── HeroSection.jsx      # Hero section
│   │   │   ├── MaximizeSection.jsx  # Feature showcase
│   │   │   ├── TestimonialSection.jsx  # User testimonials
│   │   │   └── TrustedSection.jsx   # Trust indicators
│   │   │
│   │   ├── layout/            # Layout components
│   │   │   ├── Header.tsx           # App header
│   │   │   ├── RightSidebar.tsx     # Right sidebar
│   │   │   ├── SessionInitializer.tsx  # Session management
│   │   │   ├── SettingsModal.tsx    # Settings modal
│   │   │   └── Sidebar.tsx          # Left sidebar
│   │   │
│   │   └── ui/                # UI utility components
│   │       ├── ConfirmationModal.tsx  # Confirmation dialogs
│   │       └── ParticleBackground.tsx # Particle effect background
│   │
│   ├── lib/                   # Core library code
│   │   ├── hooks.ts          # Custom React hooks
│   │   ├── store.ts          # Redux store configuration
│   │   ├── utils.ts          # Utility functions
│   │   └── features/         # Redux features
│   │       ├── api/
│   │       │   └── apiSlice.ts      # RTK Query API configuration
│   │       └── chat/
│   │           └── chatSlice.ts     # Chat state management
│   │
│   └── types/                # TypeScript type definitions
│       └── index.ts          # Shared types and interfaces
│
├── eslint.config.mjs         # ESLint configuration
├── next.config.ts            # Next.js configuration
├── next-env.d.ts            # Next.js TypeScript declarations
├── package.json             # Project dependencies
├── postcss.config.mjs       # PostCSS configuration
├── tsconfig.json            # TypeScript configuration
├── vercel.json              # Vercel deployment config
└── README.md                # This file

✨ Features

• Modern Next.js 16: Utilizes the latest App Router architecture
• Redux Toolkit: Centralized state management with Redux Toolkit and RTK Query
• Chat Interface: Interactive chat with message history and image support
• Image Upload: Upload and view images within conversations
• Particle Animations: Beautiful background particle effects
• Responsive Design: Layout with Tailwind CSS
• TypeScript: Full type safety across the application
• Session Management: Persistent chat sessions with unique identifiers
• Modal System: Settings and confirmation modals

🔧 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: Version 20.x or higher (LTS recommended)
• npm: Version 10.x or higher (comes with Node.js)
  • Alternatively, you can use yarn, pnpm, or bun

To check your current versions:

node --version
npm --version

📦 Installation

1. Clone the repository (if you haven't already):

git clone https://github.com/red345686/isro_frontend.git
cd isro_frontend

2. Install dependencies:

npm install

Or using alternative package managers:

# Using Yarn
yarn install

# Using pnpm
pnpm install

# Using Bun
bun install

🚀 Running the Application

Development Mode

Start the development server with hot-reload:

npm run dev

Or using alternative package managers:

yarn dev    # Using Yarn
pnpm dev    # Using pnpm
bun dev     # Using Bun

The application will be available at:

• Local: http://localhost:3000
• Network: Your local IP address on port 3000

🏗️ Building for Production

Build the Application

Create an optimized production build:

npm run build

This command:

• Compiles TypeScript to JavaScript
• Optimizes React components
• Generates static pages where possible
• Minifies and bundles assets
• Creates a .next directory with the production build

Start Production Server

After building, start the production server:

npm start

The production server will run at http://localhost:3000

Run Linting

Check code quality with ESLint:

npm run lint

🛠️ Technologies Used

Core Framework

• Next.js 16.0.3: React framework with App Router
• React 19.2.0: UI library
• TypeScript 5.x: Type-safe JavaScript

State Management

• Redux Toolkit 2.10.1: State management
• React Redux 9.2.0: React bindings for Redux
• RTK Query: Data fetching and caching

Styling

• Tailwind CSS 4.x: Utility-first CSS framework
• PostCSS: CSS processing
• clsx & tailwind-merge: Conditional class utilities

UI Components

• Lucide React: Icon library
• React TSParticles: Particle animation effects

Utilities

• UUID: Unique identifier generation
• TypeScript Types: Enhanced type definitions

Development Tools

• ESLint: Code linting
• Next.js ESLint Config: Next.js specific linting rules

🌐 Deployment

Live Application

The application is deployed and accessible at:

🔗 https://isro-frontend-eta.vercel.app/

🙏 Acknowledgments

This project uses the following open-source libraries and frameworks:

• Next.js - React framework by Vercel
• React - JavaScript library for building user interfaces
• Redux Toolkit - Official Redux toolset
• React Redux - Official React bindings for Redux
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Typed JavaScript at Any Scale
• Lucide React - Beautiful & consistent icon toolkit
• TSParticles - Lightweight particles engine
• clsx - Tiny utility for constructing className strings
• tailwind-merge - Merge Tailwind CSS classes
• uuid - RFC4122 UUID generator
• ESLint - Pluggable JavaScript linter

All copyrights and licenses of these dependencies are retained by their respective owners.

Eagleeye-frontend