Plants vs. Interview

Our welcome page
Our question page
Figma: Landing, home, and profile pages
Figma: Users can answer questions and receive feedback Different responses will be given by Finn depending on how our response is.

Inspiration

Securing a job is a crucial step in a student's career, and interviews play a key role in the hiring process. As college students ourselves, we recognized how difficult it can be to prepare effectively, especially without structured guidance or feedback. That’s why we created a web platform that makes interview practice more engaging, accessible, and rewarding for everyone.

Our goal is to help users build strong interview skills by providing AI-powered feedback while making the experience as user-friendly as possible. To add an element of motivation, we introduced Finn, a virtual plant that grows as users practice. We wanted the platform to feel polished and professional, while incorporating slight gamification to encourage consistency.

What it does

Allows users to create an account to track their interview preparation progress
Generates interview questions tailored to the user’s chosen field and major
Provides AI-generated feedback, including a rating out of 10, strengths, weaknesses, and insights into what interviewers may look for in responses
Offer users to bookmark questions, track their last practice date, and see their progress over time
Incorporate a gamified system where users “water” Finn, their virtual plant, to encourage daily practice and growth

How we built it

Frontend: React.js with Tailwind for an interactive UI.

Backend: Clerk and Firebase for authentication, storage, and real-time database management.

AI Integration: OpenAI's API to generate interview questions and assess responses.

Graphics: Pixilart to create plant graphics and establish a polished yet playful design.

Challenges we ran into

Backend complexity: Integrating Firebase and Clerk was one of our biggest hurdles. We encountered random data losses, struggled to properly display user progress, and had unexpected issues where working features suddenly broke.
AI fine-tuning: Ensuring the AI-generated feedback was accurate and insightful took longer than expected.
UI/UX challenges: Matching our frontend to our Figma design was difficult due to Tailwind’s constraints.
Real-time updates: Ensuring that user progress was accurately saved and displayed required debugging across multiple components.
Bookmark feature: Creating a bookmarked questions feature on the profile page was scraped halfway due to short hackathon time.

Accomplishments that we're proud of

We successfully integrated Firebase and Clerk, overcoming an initial steep learning curve. Alongside this, we developed a functional AI-powered feedback system that provides users with valuable insights. Our team also created an engaging interface that closely aligns with our Figma design while designing and implementing original graphics to enhance the user experience. Additionally, we have laid the groundwork for future features aimed at improving usability and accessibility for all users.

What we learned

Understanding the context and limitations of our ideas is key. We had many ambitious plans, but we had to narrow them down based on our skills and time constraints. And even when things didn’t go as planned, we still built a fully functional product that can genuinely help job seekers.

What's next for Plants vs. Interview

Accessibility improvements: Speech-to-text integration, text-to-speech support, high-contrast themes, and adjustable text sizes
Usability improvements: Add additional details to the landing page regarding our product. Provide a tutorial on where to access different features
Streak tracking & rewards: Encourage users to practice daily with streaks and milestone achievements
More customization: Users can personalize their plant and unlock new plant designs. They will also be able to choose different themes
Expanded question database: Support for more industries and interview formats

Built With

clerk
css
firebase
next.js
openai.api
react.js
tailwind
typescript

Submitted to

Hack Knight Spring 2025
- Winner Most Popular Hack

Created by

I worked on Frontend (in particular the question page users interact with + connecting buttons on that page with their respective components), a little bit of backend with integrating Clerk and draw our cute plant, Finn, and it's 3 stages.

Madina Monowara
I worked on the back-end and helped my teammates integrate the client-side with the server-side. I implemented OpenAI's API to create feedback and questions tailored to the user's preferred industry and major. I created and updated collections within our firebase database.

Ynalois Pangilinan
I helped design the wireframe on Figma with Angela and helped Madina with the plant graphics. I also worked on the profile page.

Kripamoye Biswas
I worked on the front-end, as well as our Figma design and the backend. Under Yna's guidance I used Open AI API, Clerk and Firebase with Next.js for the first time. I worked on updating all of the pages by accessing the information from the database.

Angela Zhang