This 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.
🎓 Academic Achievement: 99/100 Grade This project successfully demonstrated mastery of full-stack web development, achieving the highest possible score in the course evaluation.
ai-chat-interface/
├── backend/ # Express API server
│ ├── middleware/ # Express middleware (e.g., validation)
│ ├── routes/ # API route definitions (e.g., chat.js)
│ ├── utils/ # Backend utilities (e.g., openai.js)
│ ├── test/ # Backend test helpers and route tests
│ ├── tests/ # (empty/reserved for future tests)
│ ├── node_modules/ # Backend dependencies
│ ├── package.json # Backend dependencies/config
│ └── server.js # Main server file
├── frontend/ # React + Vite + Tailwind frontend
│ ├── src/
│ │ ├── components/ # React components (ChatInterface, MessageList, etc.)
│ │ ├── hooks/ # Custom React hooks (useChat.js)
│ │ ├── utils/ # Frontend utility functions
│ │ ├── assets/ # Static assets (e.g., react.svg)
│ │ ├── test/ # Frontend test setup
│ │ ├── App.jsx # Root component
│ │ ├── main.jsx # Vite entry point
│ │ ├── App.css # App-level styles (Tailwind only)
│ │ └── index.css # Tailwind base styles
│ ├── public/ # Static public assets (favicons, manifest, etc.)
│ ├── cypress/ # E2E test setup (fixtures, support, e2e)
│ ├── dist/ # Production build output
│ ├── node_modules/ # Frontend dependencies
│ ├── package.json # Frontend dependencies/config
│ ├── tailwind.config.js # Tailwind CSS config
│ ├── vite.config.js # Vite config
│ ├── vitest.config.js # Vitest config
│ ├── postcss.config.cjs # PostCSS config
│ └── README.md # Frontend-specific documentation
├── docs/ # Project documentation (design, tests, deployment)
├── docs_assignement/ # Assignment transcript and requirements
├── docs_phase3/ # Phase 3 deliverables (abstract, screencast, etc.)
├── instructions/ # Project instructions and checklists
├── .github/ # GitHub workflows and templates
├── .vercel/ # Vercel deployment config
├── node_modules/ # Root dependencies (if any)
├── package.json # Root dependencies/config
├── package-lock.json # Root lockfile
├── vercel.json # Vercel monorepo deployment config
├── env.example # Example environment variables
├── LICENSE # License file
└── README.md # Main project documentation
- 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/. - Frontend: React 18, Vite, Tailwind CSS. Functional components, custom hooks, mobile-first responsive design, and all UI logic in
frontend/src/. - Testing:
- Frontend: Unit tests (Vitest), E2E structure (Cypress)
- Backend: API and route tests (Mocha, helpers)
- Documentation: All design, test, and deployment docs in
/docs. Assignment and requirements in/docs_assignement. Phase 3 deliverables in/docs_phase3. - Deployment: Monorepo setup for Vercel, with configuration in
vercel.jsonand.vercel/.
For the architecture diagram and detailed design choices, see docs/design_choices_and_changes.md.
- Node.js (v18 or higher)
- npm (v8 or higher)
- OpenAI API key (optional, demo mode available)
- Clone the repository:
git clone https://github.com/NikVince/ai-chat-interface.git cd ai-chat-interface - Install dependencies:
npm install cd frontend && npm install cd ../backend && npm install
- Create environment files:
# In backend directory cp .env.example .env # Edit .env with your configuration
- Start development servers:
# From root directory npm run dev - Access the application:
- Frontend: http://localhost:5173
- Backend: http://localhost:3000
Create a .env file in the backend directory with:
PORT=3000
NODE_ENV=development
FRONTEND_URL=http://localhost:5173- Real-time chat interface with OpenAI integration
- Settings management (API key, model selection)
- Demo mode for evaluation without API key
- Responsive design (mobile-first)
- Secure API key handling (never exposed to frontend)
- Error handling and loading states
- Rate limiting and CORS protection
- Export Chat Transcript (dynamic frontend-backend feature)
For a full feature list and rationale, see docs/design_choices_and_changes.md.
- Frontend: Unit tests with Vitest & React Testing Library
cd frontend npm run test
- Backend: API tests with Mocha & Sinon
cd backend npm test
- Manual Test Plan: See docs/test_cases.md for comprehensive manual test cases covering all user actions, features, error cases, demo mode, settings, export, and accessibility.
- Purpose: Allows full evaluation of the chat interface without an OpenAI API key.
- How to Use: Toggle "Demo Mode" in the settings panel. All chat features will work with simulated responses.
- Note: Demo mode always returns the same default response, regardless of the type of input message.
- Two dynamic aspects: Real-time chat + Export Chat transcript (frontend-backend communication)
- Responsive design: Mobile-first with Tailwind CSS
- Frontend-backend communication: RESTful API
- Functioning application: NOT mockups - actually works
- Demo mode: Tutors can evaluate without API keys
- GitHub repository: Professional, complete, public
- Security: API keys never exposed to frontend
- Documentation: JSDoc, README, architecture
- Error handling: User-friendly messages, loading states
- Quality gates: All core requirements tested and documented
For full compliance details and rationale, see docs/design_choices_and_changes.md.
- Final submission (Phase 3) has been completed and includes:
- This repository (all code, docs, and installation instructions)
- A 2-page abstract (available in
/docs_phase3) - A screencast video (available in
/docs_phase3) - Zipped folder structure as per assignment requirements
All Phase 3 deliverables have been successfully completed and submitted.
This 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.