A modern, high-performance AI chat application built with Next.js 15, featuring real-time messaging, session storage optimization, and comprehensive performance optimizations.
- Real-time AI Chat - Powered by AI SDK with streaming responses
- Session Management - Persistent chat history with optimized navigation
- Project Organization - Organize chats into projects with color coding
- User Authentication - Secure login/signup with JWT tokens
- Responsive Design - Mobile-first design with glassmorphism UI
- Zero Layout Shift - Optimized navigation with session storage caching
- Comprehensive Memoization - All components memoized for maximum performance
- Efficient State Management - Zustand stores for optimal re-renders
- Smart Caching - Session storage prevents unnecessary server requests
- Optimized Rendering - React.memo, useCallback, and useMemo throughout
- Next.js 15 - App Router with Server Components
- React 18 - With concurrent features and Suspense
- TypeScript - Full type safety
- Tailwind CSS - Utility-first styling
- Framer Motion - Smooth animations
- AI SDK - Real-time AI streaming
- Prisma - Type-safe database ORM
- PostgreSQL - Relational database
- Next.js API Routes - Serverless API endpoints
- JWT - Secure authentication
- Glassmorphism Design - Modern glass-effect components
- Auto-resizing Textarea - Dynamic input sizing
- Syntax Highlighting - Code blocks with copy functionality
- Markdown Rendering - Rich text support
- Responsive Modals - Animated modal system
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Chat Page │───▶│ Session Storage │───▶│ Chat ID Page │
│ │ │ (Cached) │ │ (Instant) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Memoized │ │ Optimized │ │ Memoized │
│ Components │ │ Navigation │ │ Components │
└─────────────────┘ └──────────────────┘ └─────────────────┘
- ChatPageClient - Memoized with session storage integration
- ChatPageContainer - Memoized with useCallback for handlers
- MessageCard - Individual message memoization
- ChatInput - Memoized with optimized typing performance
- AutoResizeTextarea - Memoized with useCallback for onChange
- Modal - Memoized with useCallback for click handlers
- All UI Components - Comprehensive memoization
- Node.js 18+
- PostgreSQL database
- npm or yarn
-
Clone the repository
git clone <repository-url> cd aargongpt
-
Install dependencies
npm install # or yarn install -
Set up environment variables
cp .env.example .env
Configure your environment variables:
DATABASE_URL="postgresql://username:password@localhost:5432/aargongpt" NEXTAUTH_SECRET="your-secret-key" NEXTAUTH_URL="http://localhost:3000"
-
Set up the database
npx prisma generate npx prisma db push
-
Run the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
src/
├── app/ # Next.js App Router
│ ├── (main)/ # Main layout group
│ ├── api/ # API routes
│ ├── chat/ # Chat pages
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── auth/ # Authentication components
│ ├── chat/ # Chat-related components
│ ├── common/ # Shared components
│ ├── layout/ # Layout components
│ ├── ui/ # UI components (memoized)
│ └── projects/ # Project management
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── services/ # API services
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
- Instant Navigation - Cached messages prevent layout shifts
- Smart Caching - Automatic cache cleanup prevents stale data
- Fallback Strategy - Server data when cache unavailable
- React.memo - Prevents unnecessary re-renders
- useCallback - Optimizes event handlers
- useMemo - Caches expensive calculations
- Custom Comparison - Precise memoization control
- Virtual Scrolling - Efficient long message lists
- Lazy Loading - On-demand component loading
- Code Splitting - Optimized bundle sizes
- Image Optimization - Next.js automatic optimization
# Unit tests
npm test
# E2E tests
npm run test:e2e
# Performance tests
npm run test:performance- Component Tests - React Testing Library
- Integration Tests - API and database
- E2E Tests - Playwright automation
- Performance Tests - Rendering benchmarks
- Connect your GitHub repository to Vercel
- Configure environment variables
- Deploy automatically on push
# Build the application
npm run build
# Start production server
npm start- ✅ Zero Layout Shift - Smooth navigation experience
- ✅ Memoized Components - 15+ components optimized
- ✅ Session Storage - Instant chat loading
- ✅ Efficient Re-renders - Minimal unnecessary updates
- ✅ Optimized Animations - Smooth Framer Motion
- ✅ Code Splitting - Reduced initial bundle size
- Faster Navigation - Instant chat switching
- Smoother Typing - Optimized input handling
- Reduced CPU Usage - Efficient rendering
- Better Memory Management - Optimized component lifecycle
- Improved Responsiveness - Faster UI interactions
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team - For the amazing framework
- AI SDK - For seamless AI integration
- Prisma - For excellent database tooling
- Tailwind CSS - For beautiful styling utilities
- Framer Motion - For smooth animations
Built with ❤️ using modern web technologies and performance best practices.