Update README.md with AI Interview Simulator details and project stack

README.md

@@ -1,34 +1,166 @@
----
-title: AI Interview Simulator
-published: 
-tags: cloudflarechallenge, devchallenge, ai
----
+![capture](/images/interview.jpg)
 
-*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*
-
-## What I Built
+# AI Interview Simulator
 
 **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.
 
+## 🚀 Services
+
+![capture](/images/services.png)
+
+- Backend: https://interview-api.nicobytes.com/
+- Frontend: https://interview.nicobytes.com/
+
+## 🧱 Stack
+
+- Frontend
+  - Framework: [Angular](https://angular.dev/)
+  - Styling: [Tailwind CSS](https://tailwindcss.com/)
+  - Headless component primitives: [Angular CDK](https://material.angular.io)
+- Backend: 
+  - API: [HonoJS](https://honojs.com/)
+- Infrastructure:
+  - Cloudflare Pages
+  - Clodflare Workers
+  - Workers AI
+  - Storage: R2
+  - Database: D1
+
+## 🚀 Quickstart
+
+### 1. Fork and Clone repo
+
+Fork the repo to your Github account, then run the following command to clone the repo:
+
+```
+git clone [email protected]/nicobytes/interview-cloudflare-ai
+```
+
+### 2. Install dependencies
+
+```
+cd apps/website
+npm i
+
+cd apps/api
+npm i
+```
+
+### 3. Run app locally
+
+```
+cd apps/website
+ng serve
+# check the app in http://localhost:4200
+
+cd apps/api
+npm run dev:remote
+# check the app in http://localhost:3100/docs
+```
+
+## 🚀 Backend
+
+The backend is built with HonoJS and Cloudfare Workers, a platform for building serverless applications that run on Cloudflare's global network.
+
+![capture](/images/interview_docs.jpg)
+
+### Folder structure
+
+The backend app is organized in the following folder structure:
+
+```sh
+.src/
+├── bindings.ts
+├── db
+│   └── schema.ts
+├── dtos
+│   ├── feedback.dto.ts
+│   ├── message.dto.ts
+│   └── simulation.dto.ts
+├── index.ts
+├── middlewares
+│   └── db.middleware.ts
+├── routes
+│   ├── createFeedback.ts
+│   ├── createQuestion.ts
+│   ├── createSimulation.ts
+│   └── createTranscript.ts
+├── services
+│   ├── llm.service.ts
+│   ├── openai.service.ts
+│   ├── simulation.service.ts
+│   └── whisper.service.ts
+└── types.ts
+```
+
+## 🚀 Frontend
+
+The frontend is built with Angular, a platform and framework for building web applications using HTML, CSS and TypeScript.
+
+
+### Responsive design
+
+![capture](/images/weather_dark.jpg)
+
+### Search for a city
 
-## Demo
+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.
 
-<!-- Share a link to your deployed solution on Workers or Pages, and add a screenshot or video embed of your app here. -->
+![capture](/images/interview.jpg)
+![capture](/images/interview_desk.jpg)
+![capture](/images/interview_chat.jpg)
 
-## My Code
+### Using Angular Signals
 
-<!-- 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.  --> 
+The application uses Angular signals like a reactive pattern to communicate between components, services, and directives.
 
-## Journey
+### Folder structure
 
-<!-- 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. -->
+The frontend app is organized in the following folder structure:
 
-**Multiple Models and/or Triple Task Types**
+```sh
+.
+├── app
+│   ├── app.component.ts
+│   ├── app.config.ts
+│   ├── app.routes.ts
+│   ├── components
+│   │   ├── header
+│   │   │   ├── header.component.html
+│   │   │   └── header.component.ts
+│   │   └── modal-recording
+│   │       ├── modal-recording.component.html
+│   │       └── modal-recording.component.ts
+│   ├── models
+│   │   └── message.model.ts
+│   ├── pages
+│   │   ├── create
+│   │   │   ├── create.component.html
+│   │   │   └── create.component.ts
+│   │   ├── home
+│   │   │   ├── home.component.html
+│   │   │   └── home.component.ts
+│   │   └── simulator
+│   │       ├── simulator.component.html
+│   │       └── simulator.component.ts
+│   └── services
+│       └── api.service.ts
+├── assets
+│   └── images
+│       ├── background.png
+│       └── interview.jpg
+├── environments
+│   ├── environment.development.ts
+│   └── environment.ts
+├── favicon.ico
+├── index.html
+├── main.ts
+└── styles.scss
+```
 
-<!-- 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. -->
+## 🚀 Deployment
 
-<!-- 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. -->
+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.
 
-<!-- Don't forget to add a cover image or an additional tag to this post (if you want). -->
+![capture](/images/weather_deployment.jpg)
 
-<!-- Thanks for participating! -->

apps/api/src/routes/createFeedback.ts

@@ -5,7 +5,6 @@ import { generateFeedback } from '@src/services/llm.service';
 import { App } from "@src/types";
 import { HTTPException } from "hono/http-exception";
 import { getSimulationById } from '@src/services/simulation.service';
-import { generateAudio } from '@src/services/openai.service';
 
 const app = new OpenAPIHono<App>();
 

apps/api/src/routes/createQuestion.ts

@@ -8,7 +8,7 @@ import { App } from "@src/types";
 const app = new OpenAPIHono<App>();
 
 const route = createRoute({
-  tags: ['questions'],
+  tags: ['simulation'],
   method: 'post',
   path: '/',
   request: {

apps/webapp/src/app/pages/home/home.component.html

@@ -21,7 +21,7 @@ <h1 class="text-4xl mb-10 font-extrabold">
 
     <!--Left Col-->
     <div class="flex lg:w-2/5 justify-center">
-      <img class="rounded-lg" width="400" height="400" ngSrc="/assets/images/interview.jpg" alt="interview">
+      <img class="rounded-lg" width="401" height="401" ngSrc="/assets/images/interview.jpg" alt="interview">
     </div>
   </div>
   </div>