{"id":28754429,"url":"https://github.com/nikvince/ai-chat-interface","last_synced_at":"2026-04-06T09:32:28.004Z","repository":{"id":298665024,"uuid":"998938216","full_name":"NikVince/ai-chat-interface","owner":"NikVince","description":"Privacy-first AI chat interface where users provide their own OpenAI API keys. Built with React + Vite frontend and Node.js/Express backend featuring secure API proxy, real-time messaging, and responsive design. No data stored on servers.","archived":false,"fork":false,"pushed_at":"2025-06-12T08:19:29.000Z","size":61,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-12T08:32:59.454Z","etag":null,"topics":["chat","express","javascript","nodejs","openai","portfolio","privacy","react","tailwind","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NikVince.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-09T13:44:37.000Z","updated_at":"2025-06-12T08:19:33.000Z","dependencies_parsed_at":"2025-06-12T08:36:17.658Z","dependency_job_id":"5af25758-b3ce-4a0a-b5ea-9a2d389c49a3","html_url":"https://github.com/NikVince/ai-chat-interface","commit_stats":null,"previous_names":["nikvince/ai-chat-interface"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NikVince/ai-chat-interface","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikVince%2Fai-chat-interface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikVince%2Fai-chat-interface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikVince%2Fai-chat-interface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikVince%2Fai-chat-interface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NikVince","download_url":"https://codeload.github.com/NikVince/ai-chat-interface/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikVince%2Fai-chat-interface/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260269457,"owners_count":22983648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","express","javascript","nodejs","openai","portfolio","privacy","react","tailwind","vite"],"created_at":"2025-06-17T01:09:25.249Z","updated_at":"2025-12-30T20:07:07.670Z","avatar_url":"https://github.com/NikVince.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Chat Interface\n\n[![University](https://img.shields.io/badge/University-IU%20International%20University-blue)](https://iu.org)\n[![Course](https://img.shields.io/badge/Course-DLBCSPJWD01-green)](https://github.com/NikVince/ai-chat-interface)\n[![Assignment](https://img.shields.io/badge/Assignment-Portfolio%20Project-orange)](https://github.com/NikVince/ai-chat-interface)\n[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Phase](https://img.shields.io/badge/Development%20Phase-3%20of%203-green)](https://github.com/NikVince/ai-chat-interface)\n[![Grade](https://img.shields.io/badge/Academic%20Grade-99%2F100-brightgreen)](https://github.com/NikVince/ai-chat-interface)\n\n## 📚 Academic Context\n\nThis project was developed as part of the **Project Java and Web Development (DLBCSPJWD01)** portfolio assignment at **IU International University**. The assignment followed a structured three-phase approach designed to demonstrate comprehensive understanding of modern full-stack web development principles.\n\n**🎓 Academic Achievement: 99/100 Grade**\nThis project successfully demonstrated mastery of full-stack web development, achieving the highest possible score in the course evaluation.\n\n---\n\n## 🏗️ Architecture Overview\n\n```\nai-chat-interface/\n├── backend/                  # Express API server\n│   ├── middleware/           # Express middleware (e.g., validation)\n│   ├── routes/               # API route definitions (e.g., chat.js)\n│   ├── utils/                # Backend utilities (e.g., openai.js)\n│   ├── test/                 # Backend test helpers and route tests\n│   ├── tests/                # (empty/reserved for future tests)\n│   ├── node_modules/         # Backend dependencies\n│   ├── package.json          # Backend dependencies/config\n│   └── server.js             # Main server file\n├── frontend/                 # React + Vite + Tailwind frontend\n│   ├── src/\n│   │   ├── components/       # React components (ChatInterface, MessageList, etc.)\n│   │   ├── hooks/            # Custom React hooks (useChat.js)\n│   │   ├── utils/            # Frontend utility functions\n│   │   ├── assets/           # Static assets (e.g., react.svg)\n│   │   ├── test/             # Frontend test setup\n│   │   ├── App.jsx           # Root component\n│   │   ├── main.jsx          # Vite entry point\n│   │   ├── App.css           # App-level styles (Tailwind only)\n│   │   └── index.css         # Tailwind base styles\n│   ├── public/               # Static public assets (favicons, manifest, etc.)\n│   ├── cypress/              # E2E test setup (fixtures, support, e2e)\n│   ├── dist/                 # Production build output\n│   ├── node_modules/         # Frontend dependencies\n│   ├── package.json          # Frontend dependencies/config\n│   ├── tailwind.config.js    # Tailwind CSS config\n│   ├── vite.config.js        # Vite config\n│   ├── vitest.config.js      # Vitest config\n│   ├── postcss.config.cjs    # PostCSS config\n│   └── README.md             # Frontend-specific documentation\n├── docs/                     # Project documentation (design, tests, deployment)\n├── docs_assignement/         # Assignment transcript and requirements\n├── docs_phase3/              # Phase 3 deliverables (abstract, screencast, etc.)\n├── instructions/             # Project instructions and checklists\n├── .github/                  # GitHub workflows and templates\n├── .vercel/                  # Vercel deployment config\n├── node_modules/             # Root dependencies (if any)\n├── package.json              # Root dependencies/config\n├── package-lock.json         # Root lockfile\n├── vercel.json               # Vercel monorepo deployment config\n├── env.example               # Example environment variables\n├── LICENSE                   # License file\n└── README.md                 # Main project documentation\n```\n\n- **Backend:** Node.js, Express.js. RESTful API, modular middleware, secure proxy for OpenAI, input validation, and rate limiting. All API endpoints are defined in `backend/routes/`.\n- **Frontend:** React 18, Vite, Tailwind CSS. Functional components, custom hooks, mobile-first responsive design, and all UI logic in `frontend/src/`.\n- **Testing:**\n  - **Frontend:** Unit tests (Vitest), E2E structure (Cypress)\n  - **Backend:** API and route tests (Mocha, helpers)\n- **Documentation:** All design, test, and deployment docs in `/docs`. Assignment and requirements in `/docs_assignement`. Phase 3 deliverables in `/docs_phase3`.\n- **Deployment:** Monorepo setup for Vercel, with configuration in `vercel.json` and `.vercel/`.\n\n\u003e **For the architecture diagram and detailed design choices, see [docs/design_choices_and_changes.md](docs/design_choices_and_changes.md).**\n\n---\n\n## 🛠️ Installation \u0026 Setup\n\n### Prerequisites\n- Node.js (v18 or higher)\n- npm (v8 or higher)\n- OpenAI API key (optional, demo mode available)\n\n### Quick Start\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/NikVince/ai-chat-interface.git\n   cd ai-chat-interface\n   ```\n2. Install dependencies:\n   ```bash\n   npm install\n   cd frontend \u0026\u0026 npm install\n   cd ../backend \u0026\u0026 npm install\n   ```\n3. Create environment files:\n   ```bash\n   # In backend directory\n   cp .env.example .env\n   # Edit .env with your configuration\n   ```\n4. Start development servers:\n   ```bash\n   # From root directory\n   npm run dev\n   ```\n5. Access the application:\n   - Frontend: http://localhost:5173\n   - Backend: http://localhost:3000\n\n### Environment Variables\nCreate a `.env` file in the backend directory with:\n```env\nPORT=3000\nNODE_ENV=development\nFRONTEND_URL=http://localhost:5173\n```\n\n---\n\n## 🚀 Features (Summary)\n\n- Real-time chat interface with OpenAI integration\n- Settings management (API key, model selection)\n- **Demo mode** for evaluation without API key\n- Responsive design (mobile-first)\n- Secure API key handling (never exposed to frontend)\n- Error handling and loading states\n- Rate limiting and CORS protection\n- **Export Chat Transcript** (dynamic frontend-backend feature)\n\n\u003e **For a full feature list and rationale, see [docs/design_choices_and_changes.md](docs/design_choices_and_changes.md).**\n\n---\n\n## 🧪 Testing (Summary)\n\n- **Frontend:** Unit tests with Vitest \u0026 React Testing Library\n  ```bash\n  cd frontend\n  npm run test\n  ```\n- **Backend:** API tests with Mocha \u0026 Sinon\n  ```bash\n  cd backend\n  npm test\n  ```\n- **Manual Test Plan:** See [docs/test_cases.md](docs/test_cases.md) for comprehensive manual test cases covering all user actions, features, error cases, demo mode, settings, export, and accessibility.\n\n---\n\n## 🧑‍💻 Demo Mode\n\n- **Purpose:** Allows full evaluation of the chat interface without an OpenAI API key.\n- **How to Use:** Toggle \"Demo Mode\" in the settings panel. All chat features will work with simulated responses.\n- **Note:** Demo mode always returns the same default response, regardless of the type of input message.\n\n---\n\n## ✅ Assignment Compliance Checklist\n\n- [x] Two dynamic aspects: Real-time chat + **Export Chat transcript** (frontend-backend communication)\n- [x] Responsive design: Mobile-first with Tailwind CSS\n- [x] Frontend-backend communication: RESTful API\n- [x] Functioning application: NOT mockups - actually works\n- [x] Demo mode: Tutors can evaluate without API keys\n- [x] GitHub repository: Professional, complete, public\n- [x] Security: API keys never exposed to frontend\n- [x] Documentation: JSDoc, README, architecture\n- [x] Error handling: User-friendly messages, loading states\n- [x] Quality gates: All core requirements tested and documented\n\n\u003e **For full compliance details and rationale, see [docs/design_choices_and_changes.md](docs/design_choices_and_changes.md).**\n\n---\n\n## 📖 Documentation \u0026 Further Reading\n\n- [Design Choices \u0026 Changes to Proposal](docs/design_choices_and_changes.md)\n- [Manual Test Cases](docs/test_cases.md)\n- [Vercel Deployment Guide](docs/vercel_deployment_guide.md)\n\n---\n\n## 📦 Submission \u0026 Finalization\n\n- **Final submission (Phase 3) has been completed and includes:**\n  - This repository (all code, docs, and installation instructions)\n  - A 2-page abstract (available in `/docs_phase3`)\n  - A screencast video (available in `/docs_phase3`)\n  - Zipped folder structure as per assignment requirements\n\n\u003e **All Phase 3 deliverables have been successfully completed and submitted.**\n\n---\n\n\n\n---\n\n## 📝 Academic Integrity\n\nThis project represents original work completed as part of the IU International University curriculum, achieving a 99/100 grade. All external resources, libraries, and references are properly documented and attributed according to academic standards.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikvince%2Fai-chat-interface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikvince%2Fai-chat-interface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikvince%2Fai-chat-interface/lists"}