Inspiration
Students often struggle to manage assignments, organize their study schedules, and remember upcoming exams. We wanted to build a simple solution that brings these essential study activities together in one place. This inspired us to create StudyMate AI, a personal study companion that helps students stay organized and approach exam preparation with greater confidence.
What it does
StudyMate AI is a student productivity dashboard with several useful features:
Task Management: Add, complete, and delete study tasks.
Study Planner: Generate a structured study plan based on a learning goal.
Exam Reminders: Add exam subjects, dates, and times, and mark preparation as complete.
Voice Input: Ask questions using speech in supported browsers.
Read-Aloud: Listen to the assistant's responses.
Saved Data: Store tasks, study plans, and chat messages in browser local storage so they persist between visits.
These features bring everyday study organization into one accessible web application.
How we built it
We built StudyMate AI using React and Vite for the frontend, JavaScript for application logic, and CSS for styling. React state manages interactive features, while browser local storage preserves tasks, plans, and chat messages between sessions.
We also used browser speech-recognition capabilities for voice input and speech synthesis for reading responses aloud. The current assistant uses rule-based demo responses for common study topics, rather than a connected live AI model.
Challenges we ran into
One of our main challenges was integrating several interactive features into one application while keeping the interface functional. We also worked through JavaScript and JSX syntax errors, implemented persistent browser storage, and connected voice input and read-aloud functionality.
Debugging these issues helped us understand how individual components work together in a React application.
Accomplishments that we're proud of
We are proud to have developed a working prototype that combines study task management, study planning, exam tracking, and voice interaction in one dashboard.
We also implemented persistent storage so students can retain important study information between visits. Building and debugging these features helped us turn an idea into an interactive application.
What we learned
Through this project, we gained practical experience with React, Vite, JavaScript, CSS, browser storage, and browser speech APIs. We learned how to manage application state, handle user input, debug JSX errors, and connect different features into a single user experience.
We also learned the importance of testing each feature and keeping the application reliable while making improvements.
What's next for StudyMate AI
Our next goal is to connect a real AI model through a secure backend so students can receive more personalized answers and study guidance. We also plan to expand conversation history, improve exam notifications, and introduce more personalized revision recommendations.
Ultimately, we want StudyMate AI to become a more intelligent and reliable study companion that helps students organize their learning and prepare more effectively.
Built With
- api
- copy
- css
- html
- javascript
- local-storage
- react
- speech
- vite
- web
Log in or sign up for Devpost to join the conversation.