Skip to content

Commit d36d05a

Browse files
nicobytesnicobytes
committed
Update README.md with AI Interview Simulator details and project stack
1 parent df2f3d7 commit d36d05a

File tree

8 files changed

+153
-22
lines changed

8 files changed

+153
-22
lines changed

Diff for: ‎README.md

+151-19
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,166 @@
1-
---
2-
title: AI Interview Simulator
3-
published:
4-
tags: cloudflarechallenge, devchallenge, ai
5-
---
1+
![capture](/images/interview.jpg)
62

7-
*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*
8-
9-
## What I Built
3+
# AI Interview Simulator
104

115
**AI Interview Simulator** is a web application that helps you prepare for your next job interview. It uses AI to analyze your answers and provide feedback on how to improve using the camera and microphone on your device.
126

7+
## 🚀 Services
8+
9+
![capture](/images/services.png)
10+
11+
- Backend: https://interview-api.nicobytes.com/
12+
- Frontend: https://interview.nicobytes.com/
13+
14+
## 🧱 Stack
15+
16+
- Frontend
17+
- Framework: [Angular](https://angular.dev/)
18+
- Styling: [Tailwind CSS](https://tailwindcss.com/)
19+
- Headless component primitives: [Angular CDK](https://material.angular.io)
20+
- Backend:
21+
- API: [HonoJS](https://honojs.com/)
22+
- Infrastructure:
23+
- Cloudflare Pages
24+
- Clodflare Workers
25+
- Workers AI
26+
- Storage: R2
27+
- Database: D1
28+
29+
## 🚀 Quickstart
30+
31+
### 1. Fork and Clone repo
32+
33+
Fork the repo to your Github account, then run the following command to clone the repo:
34+
35+
```
36+
git clone git@github.com/nicobytes/interview-cloudflare-ai
37+
```
38+
39+
### 2. Install dependencies
40+
41+
```
42+
cd apps/website
43+
npm i
44+
45+
cd apps/api
46+
npm i
47+
```
48+
49+
### 3. Run app locally
50+
51+
```
52+
cd apps/website
53+
ng serve
54+
# check the app in http://localhost:4200
55+
56+
cd apps/api
57+
npm run dev:remote
58+
# check the app in http://localhost:3100/docs
59+
```
60+
61+
## 🚀 Backend
62+
63+
The backend is built with HonoJS and Cloudfare Workers, a platform for building serverless applications that run on Cloudflare's global network.
64+
65+
![capture](/images/interview_docs.jpg)
66+
67+
### Folder structure
68+
69+
The backend app is organized in the following folder structure:
70+
71+
```sh
72+
.src/
73+
├── bindings.ts
74+
├── db
75+
│   └── schema.ts
76+
├── dtos
77+
│   ├── feedback.dto.ts
78+
│   ├── message.dto.ts
79+
│   └── simulation.dto.ts
80+
├── index.ts
81+
├── middlewares
82+
│   └── db.middleware.ts
83+
├── routes
84+
│   ├── createFeedback.ts
85+
│   ├── createQuestion.ts
86+
│   ├── createSimulation.ts
87+
│   └── createTranscript.ts
88+
├── services
89+
│   ├── llm.service.ts
90+
│   ├── openai.service.ts
91+
│   ├── simulation.service.ts
92+
│   └── whisper.service.ts
93+
└── types.ts
94+
```
95+
96+
## 🚀 Frontend
97+
98+
The frontend is built with Angular, a platform and framework for building web applications using HTML, CSS and TypeScript.
99+
100+
101+
### Responsive design
102+
103+
![capture](/images/weather_dark.jpg)
104+
105+
### Search for a city
13106

14-
## Demo
107+
The user can search for a city by typing the city name in the search bar, and autocomplete suggestions help the user select the desired city.
15108

16-
<!-- Share a link to your deployed solution on Workers or Pages, and add a screenshot or video embed of your app here. -->
109+
![capture](/images/interview.jpg)
110+
![capture](/images/interview_desk.jpg)
111+
![capture](/images/interview_chat.jpg)
17112

18-
## My Code
113+
### Using Angular Signals
19114

20-
<!-- Show us the code! Share a public link to your repo and be sure to include a README file with installation instructions. We also encourage you to add a license for your code. -->
115+
The application uses Angular signals like a reactive pattern to communicate between components, services, and directives.
21116

22-
## Journey
117+
### Folder structure
23118

24-
<!-- Tell us about your process, the task types and models you used, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
119+
The frontend app is organized in the following folder structure:
25120

26-
**Multiple Models and/or Triple Task Types**
121+
```sh
122+
.
123+
├── app
124+
│   ├── app.component.ts
125+
│   ├── app.config.ts
126+
│   ├── app.routes.ts
127+
│   ├── components
128+
│   │   ├── header
129+
│   │   │   ├── header.component.html
130+
│   │   │   └── header.component.ts
131+
│   │   └── modal-recording
132+
│   │   ├── modal-recording.component.html
133+
│   │   └── modal-recording.component.ts
134+
│   ├── models
135+
│   │   └── message.model.ts
136+
│   ├── pages
137+
│   │   ├── create
138+
│   │   │   ├── create.component.html
139+
│   │   │   └── create.component.ts
140+
│   │   ├── home
141+
│   │   │   ├── home.component.html
142+
│   │   │   └── home.component.ts
143+
│   │   └── simulator
144+
│   │   ├── simulator.component.html
145+
│   │   └── simulator.component.ts
146+
│   └── services
147+
│   └── api.service.ts
148+
├── assets
149+
│   └── images
150+
│   ├── background.png
151+
│   └── interview.jpg
152+
├── environments
153+
│   ├── environment.development.ts
154+
│   └── environment.ts
155+
├── favicon.ico
156+
├── index.html
157+
├── main.ts
158+
└── styles.scss
159+
```
27160

28-
<!-- Let us know if your project utilized multiple models per task and/or if your project used three or more task types. If so, you may qualify for our additional prize categories! If not, please remove this section. -->
161+
## 🚀 Deployment
29162

30-
<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->
163+
This project was structured as a monorepo, with the frontend and backend in the same repository, and with Github actions to detect changes in the code and deploy the app to the cloud. As part of CI/CD, the project has a linter and build step before deploying the app. The project has automatic deployment to Heroku for the API, the frontend in Cloudflare pages.
31164

32-
<!-- Don't forget to add a cover image or an additional tag to this post (if you want). -->
165+
![capture](/images/weather_deployment.jpg)
33166

34-
<!-- Thanks for participating! -->

Diff for: ‎apps/api/src/routes/createFeedback.ts

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { generateFeedback } from '@src/services/llm.service';
55
import { App } from "@src/types";
66
import { HTTPException } from "hono/http-exception";
77
import { getSimulationById } from '@src/services/simulation.service';
8-
import { generateAudio } from '@src/services/openai.service';
98

109
const app = new OpenAPIHono<App>();
1110

Diff for: ‎apps/api/src/routes/createQuestion.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { App } from "@src/types";
88
const app = new OpenAPIHono<App>();
99

1010
const route = createRoute({
11-
tags: ['questions'],
11+
tags: ['simulation'],
1212
method: 'post',
1313
path: '/',
1414
request: {

Diff for: ‎apps/webapp/src/app/pages/home/home.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h1 class="text-4xl mb-10 font-extrabold">
2121

2222
<!--Left Col-->
2323
<div class="flex lg:w-2/5 justify-center">
24-
<img class="rounded-lg" width="400" height="400" ngSrc="/assets/images/interview.jpg" alt="interview">
24+
<img class="rounded-lg" width="401" height="401" ngSrc="/assets/images/interview.jpg" alt="interview">
2525
</div>
2626
</div>
2727
</div>

Diff for: ‎images/interview.jpg

690 KB
Loading

Diff for: ‎images/interview_chat.jpg

434 KB
Loading

Diff for: ‎images/interview_desk.jpg

372 KB
Loading

Diff for: ‎images/interview_docs.jpg

302 KB
Loading

0 commit comments

Comments
 (0)