ClairMail

Inspiration

With very limited prior experience in coding, we wanted to tackle a problem that felt both concrete and meaningful. As we had very basic knowledge in coding, we settled on an idea we thought could solve an all too common problem : each year, many elderly people fall victim to email scams, often because the messages look legitimate. After speaking with several mentors, we realized this issue could be addressed with a simple tool, while also serving as our first real introduction to programming.

What it does

The user simply copies and pastes the text of a suspicious email into the input box on our website. That message is then sent to Google Gemini’s AI through a server. The AI analyzes the content and determines whether the message is likely a scam or not. The result is sent back to the website and displayed clearly for the user. Our website also includes two additional buttons designed to improve accessibility: The first button scrolls the user down the page to a second button that reveals step-by-step instructions, in case help is needed. The second button in the header allows the user to switch between English and French, the two most commonly spoken languages in Québec.

How we built it

The project was developed using a combination of basic HTML web development knowledge, W3Schools tutorials, YouTube videos, and the use of OpenAI and Gemini. The website was built using HTML, CSS, and JavaScript. Finally, our mentors provided valuable guidance and helped us quickly understand unfamiliar concepts.

Challenges we ran into

Building the server was by far the most difficult part of the project. At the beginning, we did not understand what a server was, how to run it, or why it was necessary. We discovered that we needed to install Node.js in order to run the JavaScript server file, and we struggled to understand how APIs actually work. Debugging was also challenging, especially when the AI returned unexpected results or when the server failed silently. We relied heavily on our mentors, who guided us through the process, explained key concepts, and helped us fix errors. We also used AI extensively to debug and iterate on our code. Initially, we planned to use Ollama as a local API, but we later switched to Google Gemini, as the latter was faster.

Accomplishments that we're proud of

We were surprised by how far we were able to go with the support of everyone around us. The organizers and mentors were an incredible help throughout the entire hackathon. Completing a functional web application during our first hackathon felt like a major achievement. We were also grateful for the opportunity to work together and learn new skills, as overcoming moments of frustration made the experience especially rewarding and memorable.

What we learned

Throughout this project, we learned: What servers and APIs are, and why they are necessary How to use Node.js to run a backend server We came to understand some basics of HTML, CSS, and JavaScript How to use AI effectively to build, debug, and iterate on a project How to navigate technical terminology and development tools such as Cursor This project was our first real exposure to web development, and it gave us a foundation we did not have before.