Quizzy

Inspiration: As a university student and front-end developer, I noticed how time-consuming and laborious studying is. Converting lectures and large files into flashcards was a tedious and slow process. Quizzy was born from the need for a smart and fast tool that helps students like me study more efficiently.

What it does: Quizzy is a web application that uses artificial intelligence to change the way students study. Its key features include:

AI-powered creation: Users can paste any topic or notes, and AI instantly converts them into Q&As in the form of flashcards.

File uploading: It allows uploading files like PDFs and Word documents and converting them into sets of flashcards ready for study.

Smart assistant (AI chat): It includes a dedicated chatbot that students can ask any question about their coursework, and it will provide explanations and answers.

Competitive system: It features a leaderboard to motivate students to study and compete.

Integrated Design: The website is fully responsive across mobile and desktop devices, supports Arabic and English, and features a light/dark theme.

How I Built It: The project is built using React and TypeScript with Vite for the front end and Tailwind CSS for styling. The backend is built with Node.js and Express, with a MongoDB database for storing user and card data. A Large Language Model (LLM) API is integrated to power AI-powered creation and chat features.

Challenges I Faced: The biggest challenge was effectively integrating AI to generate accurate and useful cards from the context of uploaded files. The second challenge was building a fully responsive user interface from scratch for both mobile and desktop versions and integrating it into a single, organized codebase using Tailwind.

What I learned: I learned how to build a full-stack project from scratch, and how to use React with TypeScript to manage complex states. This project also deepened my experience using Tailwind CSS to build responsive designs quickly and efficiently, and of course, I learned a lot about how to integrate and interact with AI models (LLMs) in a practical way.

What I learned while building the Quizzy project: I gained significant practical experience in:

Building a full-stack application using React and Supabase.

Working with AI APIs.

Deploying a web application on a cloud platform like Microsoft Azure.

A deeper understanding of the importance of user experience design in educational applications.