# Project export: IntraView

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 11.0
- Tagline: Your Personalized AI-Powered Technical Interviewer: Simulate real-world coding interviews with tailored feedback to help you prepare for success.
- Devpost: https://devpost.com/software/intraview
- GitHub: https://github.com/Jay-Lalwani/IntraView/
- Team: 1 GitHub contributor(s) — Jay Lalwani (20 commits)

## Devpost submission (written by the team)

### Inspiration

IntraView was inspired by the need to bridge the gap between theoretical coding knowledge and real-world technical interview skills. Many candidates struggle with coding interviews due to lack of practice, real-time feedback, and exposure to diverse problem types. Our goal was to create a platform where users could simulate realistic coding interviews in a controlled and customizable environment, helping them develop both technical and communication skills necessary for success.

### What it does

IntraView provides a complete AI-powered simulation of technical coding interviews. Users can select from various programming languages, adjust the difficulty level, and customize the interviewer’s persona to mimic real-world scenarios. During the interview, the AI presents coding problems, listens to the candidate’s thought process, and offers feedback in real-time based on their performance in problem-solving, communication, code quality, and time management.

### How we built it

We built IntraView using React for the frontend and integrated OpenAI’s Realtime API to handle the interactive interview process. Monaco Editor was used for the code editor, and Web Audio API powers voice input/output for a seamless, voice-controlled experience. The platform includes customizable interview configurations, such as programming language selection, interview difficulty, and interviewer persona settings, to offer a personalized experience. Feedback is generated using AI and delivered based on user performance metrics.

### Challenges we ran into

One of the main challenges we faced was creating a realistic interview flow where the AI could guide the interview without breaking the immersion. Another challenge was handling real-time voice input and integrating the feedback system effectively into the interview process. Additionally, designing a UI that was both functional and user-friendly for simulating technical interviews posed some challenges in balancing customization options and simplicity.

### Accomplishments we're proud of

We’re proud to have created a platform that gives users a realistic and helpful interview experience. Implementing real-time voice interactions and AI-driven feedback was a major technical achievement. Furthermore, the flexibility of allowing users to customize their interview setup and receive performance-based evaluations is something we’re excited to offer to aspiring coders. Being able to deliver personalized feedback on multiple metrics was a key accomplishment as well.

### What we learned

Through building IntraView, we learned a lot about integrating real-time APIs, handling audio processing in a web environment, and improving user experience in complex applications. We also deepened our understanding of how AI can be used not just for automation but for creating meaningful, interactive experiences that help users improve in technical areas.

### What's next

Moving forward, we plan to enhance IntraView by introducing more interview question sets, improving feedback detail, and allowing users to receive mock feedback from multiple personas. We aim to implement deeper analytics and performance tracking to give users insight into their growth over time. Additionally, expanding the AI’s ability to provide tailored hints and suggestions during interviews would make the practice even more effective for users preparing for real-world technical challenges.

## README (from the GitHub repository)

# IntraView

Your Personalized AI-Powered Technical Interviewer: Simulate real-world coding interviews with tailored feedback to help you prepare for success.

### [DEMO](https://drive.google.com/file/d/11950GKLxOF3D2hNiIpPzqWnyXue--lK7/view)

### Inspiration
IntraView was inspired by the need to bridge the gap between theoretical coding knowledge and real-world technical interview skills. Many candidates struggle with coding interviews due to lack of practice, real-time feedback, and exposure to diverse problem types. Our goal was to create a platform where users could simulate realistic coding interviews in a controlled and customizable environment, helping them develop both technical and communication skills necessary for success.

### What it does
IntraView provides a complete AI-powered simulation of technical coding interviews. Users can select from various programming languages, adjust the difficulty level, and customize the interviewer’s persona to mimic real-world scenarios. During the interview, the AI presents coding problems, listens to the candidate’s thought process, and offers feedback in real-time based on their performance in problem-solving, communication, code quality, and time management.

### How we built it
We built IntraView using React for the frontend and integrated OpenAI’s Realtime API to handle the interactive interview process. Monaco Editor was used for the code editor, and Web Audio API powers voice input/output for a seamless, voice-controlled experience. The platform includes customizable interview configurations, such as programming language selection, interview difficulty, and interviewer persona settings, to offer a personalized experience. Feedback is generated using AI and delivered based on user performance metrics.

### To run the code:

```
npm install
npm start
```

Visit http://localhost:3000/


## Detected evidence (automated analysis)

Indexed codebase: 24 recognized source files, 84 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- TypeScript (language) — detected in the code
- OpenAI (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (36 of 36)

```
.eslintrc.json
.gitignore
.prettierrc
LICENSE
package.json
public/index.html
public/robots.txt
README.md
relay-server/index.js
relay-server/lib/relay.js
src/App.scss
src/App.tsx
src/components/button/Button.scss
src/components/button/Button.tsx
src/components/Map.scss
src/components/Map.tsx
src/components/toggle/Toggle.scss
src/components/toggle/Toggle.tsx
src/index.css
src/index.tsx
src/lib/wavtools/index.js
src/lib/wavtools/lib/analysis/audio_analysis.js
src/lib/wavtools/lib/analysis/constants.js
src/lib/wavtools/lib/wav_packer.js
src/lib/wavtools/lib/wav_recorder.js
src/lib/wavtools/lib/wav_stream_player.js
src/lib/wavtools/lib/worklets/audio_processor.js
src/lib/wavtools/lib/worklets/stream_processor.js
src/pages/ConsolePage.scss
src/pages/ConsolePage.tsx
src/react-app-env.d.ts
src/reportWebVitals.ts
src/setupTests.ts
src/utils/conversation_config.js
src/utils/wav_renderer.ts
tsconfig.json
```

### Dependencies

- package.json: @babel/plugin-proposal-private-property-in-object@^7.21.11, @monaco-editor/react@^4.6.0, @openai/realtime-api-beta@github:openai/openai-realtime-api-beta, @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, @types/jest@^27.5.2, @types/leaflet@^1.9.12, @types/lodash@^4.17.12, @types/node@^16.18.108, @types/react@^18.3.5, @types/react-dom@^18.3.0, dotenv@^16.4.5, leaflet@^1.9.4, nodemon@^3.1.7, react@^18.3.1, react-circular-progressbar@^2.1.0, react-dom@^18.3.1, react-feather@^2.0.10, react-leaflet@^4.2.1, react-scripts@^5.0.1, sass@^1.78.0, save@^2.9.0, typescript@^4.9.5, web-vitals@^2.1.4, ws@^8.18.0

### Recent commits (newest first)

- Update LICENSE
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- Update README.md
- post-testing
- working interview config
- config fix
- final3
- final2
- final
- style
- updates
- audio style
- feedback setup
- styling
- progress bars
- interview config

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "openai-realtime-console",
  "version": "0.0.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "@monaco-editor/react": "^4.6.0",
    "@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/leaflet": "^1.9.12",
    "@types/node": "^16.18.108",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "dotenv": "^16.4.5",
    "leaflet": "^1.9.4",
    "react": "^18.3.1",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "^18.3.1",
    "react-feather": "^2.0.10",
    "react-leaflet": "^4.2.1",
    "react-scripts": "^5.0.1",
    "sass": "^1.78.0",
    "save": "^2.9.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "ws": "^8.18.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "zip": "zip -r realtime-api-console.zip . -x 'node_modules' 'node_modules/*' 'node_modules/**' '.git' '.git/*' '.git/**' '.DS_Store' '*/.DS_Store' 'package-lock.json' '*.zip' '*.tar.gz' '*.tar' '.env'",
    "relay": "nodemon ./relay-server/index.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@types/lodash": "^4.17.12",
    "nodemon": "^3.1.7"
  }
}

```

### src/App.tsx

```typescript
import { ConsolePage } from './pages/ConsolePage';
import './App.scss';

function App() {
  return (
    <div data-component="App">
      <ConsolePage />
    </div>
  );
}

export default App;

```

### relay-server/index.js

```javascript
import { RealtimeRelay } from './lib/relay.js';
import dotenv from 'dotenv';
dotenv.config({ override: true });

const OPENAI_API_KEY = process.env.OPENAI_API_KEY;

if (!OPENAI_API_KEY) {
  console.error(
    `Environment variable "OPENAI_API_KEY" is required.\n` +
      `Please set it in your .env file.`
  );
  process.exit(1);
}

const PORT = parseInt(process.env.PORT) || 8081;

const relay = new RealtimeRelay(OPENAI_API_KEY);
relay.listen(PORT);

```

### src/index.tsx

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

### src/lib/wavtools/index.js

```javascript
import { WavPacker } from './lib/wav_packer.js';
import { AudioAnalysis } from './lib/analysis/audio_analysis.js';
import { WavStreamPlayer } from './lib/wav_stream_player.js';
import { WavRecorder } from './lib/wav_recorder.js';

export { AudioAnalysis, WavPacker, WavStreamPlayer, WavRecorder };

```

### src/react-app-env.d.ts

```typescript
/// <reference types="react-scripts" />

```

### src/setupTests.ts

```typescript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

```

### src/index.css

```css
html,
body {
  padding: 0px;
  margin: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'Assistant', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  position: relative;
  width: 100%;
  height: 100%;
}

```

### src/reportWebVitals.ts

```typescript
import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

```

### public/index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>IntraView</title>
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
      rel="stylesheet"
    />
    <!-- Leaflet / OpenStreetMap -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

[14 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]