MangaMatcher

Inspiration

We were inspired by our love for manga and wanted to make a way to recommend new manga to people. Something fun that people can make a community out of. Tinder’s intuitive swipe-based interface also inspired us heavily. We thought, why not apply that same fast-paced, interactive experience to manga recommendations driven by machine learning?

What it does

Our website starts by having users take a quiz, after which they receive personalized manga recommendations that they can either like or reject. Liked titles are saved to the user’s profile, creating a personalized collection. Each manga also includes a direct Amazon link, generated using the ISBN from our dataset through an HTTPS search query, making it easy to access and purchase the book. To add a fun and interactive twist, users can even chat with the main characters of their liked manga, brought to life with generative AI that reflects their personalities.

How we built it

We built our system using a combination of technologies that tied everything together into one platform. Our scraped manga dataset, which started as a CSV, was stored and managed in SQLite as a lightweight database. For the backend, we used Python with Flask to build an API that processed quiz answers and powered our TF-IDF + cosine similarity model to generate personalized recommendations from the ground up.

On the frontend, we developed a responsive UI with React, HTML, CSS, and JavaScript, allowing users to take the quiz, view results, and interact seamlessly. To make the experience more engaging, we integrated the Gemini API to create chatbots that take on the personalities of favorite manga characters, making recommendations feel immersive and fun.

Challenges we ran into

One of the biggest challenges we faced was connecting all the pieces together. While our machine learning model and backend worked on their own, integrating them with the frontend through the Flask API was difficult at first. We didn’t fully understand how everything communicated, so it took time to learn how to structure endpoints, send data back and forth, and keep the frontend and backend in sync. In the process, we had to develop a deeper understanding of full-stack integration in order to solve these challenges.

Accomplishments that we're proud of

We’re especially proud that this was our group’s first time coding a full-stack application from start to finish. We successfully brought together a database, backend, machine learning model, and frontend into one complete system which is no small feat for our group tackling full-stack development for the first time.

What we learned

We learned how to use an API to connect our machine learning recommendation system to the frontend and see results reflected in the user experience. This was our first time bridging backend logic with frontend design, so we had to quickly learn how Flask endpoints work, how to pass data in JSON, and how the frontend consumes that information. On the machine learning side, we used TF-IDF and cosine similarity to match quiz answers with manga descriptions, which taught us how to focus on important keywords and measure similarity to generate relevant recommendations. Overall, we realized how important integration is not just having separate parts that work but combining them into one while also keeping the user in mind.

What's next for MangaMatcher

For the future, we are looking to expand on the user experience in terms of social tools and authentication. Specifically, we have the idea to link what the user likes and be able to interact or socialize with others when it comes to similar interests and recommendations they got. Authentication is also important for this when it comes having a unique person and needing a database to support the ability for the user experience.