A modern, responsive React application built with TypeScript that provides an AI-powered chatbot interface for Oduduwa University Ipetumodu (OUI) students. Get instant information about university services, procedures, and campus life through an intuitive chat interface.
- AI-Powered Chat Interface - Interactive chatbot for university information
- User Authentication - Secure login/signup with JWT token management
- Real-time Messaging - Instant responses with smooth chat experience
- Chat History Management - Persistent conversation history
- Responsive Design - Optimized for desktop and mobile devices
- Dark/Light Theme Toggle - Customizable appearance
- Pre-defined Questions - Quick-start suggestions for common queries
- Auto-scroll Messages - Automatically scrolls to latest messages
- Mobile-First Design - Collapsible sidebar for mobile users
- Markdown Support - Rich text formatting in chat responses
- Type-Safe Development - Full TypeScript implementation
- Modern State Management - Zustand for efficient state handling
- API Integration - React Query for optimized data fetching
- Component Library - Shadcn/ui for consistent design system
- Form Validation - React Hook Form with Zod schemas
- React 18.3.1 - Modern React with hooks and concurrent features
- TypeScript 5.5.3 - Type-safe JavaScript development
- Vite 5.4.1 - Fast build tool and development server
- TailwindCSS 3.4.11 - Utility-first CSS framework
- Shadcn/ui - High-quality component library
- Radix UI - Headless UI primitives
- Lucide React - Beautiful SVG icons
- next-themes - Theme management
- Zustand - Lightweight state management
- TanStack React Query - Data fetching and caching
- React Hook Form - Form state management
- Zod - Schema validation
- React Router DOM - Client-side routing
- React Navigation - Programmatic navigation
- ESLint - Code linting
- Prettier - Code formatting
- TypeScript ESLint - TypeScript-specific linting rules
- Node.js 18.0 or higher
- npm or bun package manager
- Git for version control
-
Clone the repository
git clone https://github.com/emmanuelayinde/OUI-InfoMate.git cd OUI-InfoMate/frontend -
Install dependencies
# Using npm npm install # Using bun (recommended) bun install
-
Environment Setup
# Copy environment template cp .env.example .env # Configure your environment variables VITE_BASE_API_URL=http://localhost:8000
-
Start development server
# Using npm npm run dev # Using bun bun dev
-
Open your browser Navigate to
http://localhost:5173
frontend/
├── public/ # Static assets
│ ├── favicon.ico
│ ├── placeholder.svg
│ └── robots.txt
├── src/ # Source code
│ ├── api/ # API layer
│ │ ├── auth.ts # Authentication endpoints
│ │ ├── chat.ts # Chat endpoints
│ │ ├── axios.ts # HTTP client setup
│ │ └── index.ts # API exports
│ ├── components/ # Reusable components
│ │ ├── ui/ # Shadcn/ui components
│ │ ├── ChatSidebar.tsx
│ │ ├── Loader.tsx
│ │ └── theme-toggle.tsx
│ ├── hooks/ # Custom React hooks
│ │ ├── auth/ # Authentication hooks
│ │ ├── use-mobile.tsx
│ │ └── use-toast.ts
│ ├── lib/ # Utility libraries
│ │ └── utils.ts # Helper functions
│ ├── pages/ # Application pages
│ │ ├── Chat.tsx # Main chat interface
│ │ ├── Dashboard.tsx # User dashboard
│ │ ├── Landing.tsx # Homepage
│ │ ├── Login.tsx # Login page
│ │ ├── NotFound.tsx # 404 page
│ │ └── Signup.tsx # Registration page
│ ├── store/ # State management
│ │ ├── use-auth.ts # Authentication state
│ │ └── use-chat.ts # Chat state
│ ├── types/ # TypeScript definitions
│ │ ├── auth.ts # Auth types
│ │ ├── chat.ts # Chat types
│ │ └── index.ts # Type exports
│ ├── utils/ # Utility functions
│ │ ├── cookie.ts # Cookie management
│ │ ├── markdown.ts # Markdown processing
│ │ └── index.ts # Utility exports
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── .env.example # Environment template
├── package.json # Dependencies and scripts
├── tailwind.config.ts # TailwindCSS configuration
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite configuration
# Development
npm run dev # Start development server
npm run build # Build for production
npm run build:dev # Build for development
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run format # Format code with Prettier
# Type Checking
npm run type-check # Run TypeScript compiler checkCreate a .env file in the root directory:
# Backend API Configuration
VITE_BASE_API_URL=http://localhost:8000
# Optional: Additional configuration
VITE_APP_NAME=OUI Assistant
VITE_APP_VERSION=1.0.0- Login/Signup Pages - User registration and authentication
- Protected Routes - Route guards for authenticated users
- Token Management - JWT token storage and refresh
- User Profile - Profile management and display
- Chat Sidebar - Chat history and navigation
- Message Display - Rich message rendering with markdown
- Input Handler - Message composition and sending
- Pre-defined Questions - Quick-start conversation starters
- Auth Store - User authentication state
- Chat Store - Chat history and active conversation
- UI State - Theme, sidebar, and global UI state
The application supports both light and dark themes:
- Theme Toggle - Switch between light/dark modes
- System Preference - Respects user's system theme
- Persistent Storage - Theme preference saved locally
- CSS Variables - Customizable color scheme
npm run build# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod# Build the project
npm run build
# Deploy dist folder to NetlifyThe project uses a custom TailwindCSS configuration with:
- Custom Colors - OUI brand colors
- Typography Plugin - Enhanced text styling
- Animation Classes - Smooth transitions and animations
Strict TypeScript configuration with:
- Path Mapping -
@/alias for src directory - Strict Mode - Enhanced type checking
- Module Resolution - Node.js style imports
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add some amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
This project follows these coding standards:
- ESLint for code quality
- Prettier for code formatting
- TypeScript for type safety
- Conventional Commits for commit messages
Build Errors
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm installType Errors
# Run type checking
npm run type-checkEnvironment Issues
- Ensure
.envfile exists and contains required variables - Check API endpoint connectivity
- Verify backend server is running
This project is licensed under the MIT License - see the LICENSE file for details.
- Emmanuel Ayinde - @emmanuelayinde
- Oduduwa University Ipetumodu - For project inspiration
- Shadcn/ui - For the excellent component library
- TailwindCSS - For the utility-first CSS framework
- React Team - For the amazing framework
For more information about the backend API, see the Backend Documentation.
Happy Coding! 🚀