Introduction
AI has been improving significantly, compared to 4 years ago now AI is everywhere. However, it's important to use it responsibly. As a student, AI has improved my learning. One example is that I used GPT-4 to grade my essays in English. Even though it might not be 100% accurate, GPT 4 helped me to gain more marks - being one of the students who had higher marks in the class.
I completed my IGCSE exams last month, and after that, I was so bored. Without anything to do, I was planning on reviving one of my old projects called Blaze - which is a Svelte-like compiler. I was excited by Svelte 5 and was looking for something to build so, why not rebuild a Svelte 5 compiler from scratch instead? 😅 I started building it, but after a few days I got bored, and .... yeah I stopped working on it.
And that's when I saw the Hashnode's hackathon page. When I saw it, it was already July 12th! A long time has passed since it was started, nonetheless, after seeing that I got a rush of dopamine in my head. This is it. This was the time to execute the idea I had in my mind for months. I finally got the motivation to do that.
View the app: https://synapsis.posandu.com/
Motivation
As a student who likes to improve and try to do something quickly, one of my problems was being overwhelmed with a large number of notes to study while studying. This made me to only focus on studying for a few months, and as a result - I didn't get to code that much.
I mean focusing on studies is good and all but the fact that studying is that hard is what I disliked the most. However, I managed to learn some tricks and tips and was able to write my exams peacefully (I didn't get the results yet)
After seeing Hashnode's "AI for Tomorrow" hackathon I realized that it's the perfect time to execute my idea and see where it takes me. And, it was a success! I managed to create a whole learning platform in a few days. And some of the people who used it gave me some good feedback as well.
The idea
Imagine if there's a teacher dedicated just to your learning and nothing else! When you want to revise something, you can ask him (or she - I don't know the gender of the AI bot lol) to help regarding the note and he will provide the relevant feedback for your answers instantly.
Another problem occurs when retaining your notes. I had different subjects for each day and on some days, I had to give my books to my friends to write the notes down in their books. Usually, this happens frequently and this might affect my revising. Synapify will save the content as text in a database, making revising notes easier.
Also, a monotonous study routine makes it ineffective for students to study. Since creating quizzes and flashcards can be hard and time-consuming, Synapify will help the student to do that and save their time. It can also make the experience more engaging by introducing gamified learning features like XP points for learning something successfully - this makes the learning experience fun while making it effective.
Features
I built this app to match real-world expectations and with the features I wished I had when studying for my exams. So, there are a lot of features I've added to this app.
Notes
Everything on the app is powered by Notes™️ . A note is just a note on your book - but with superpowers!
A note uses Markdown, which makes it easier to highlight important points in a note. A note can be used to create quizzes, flashcards, or even recall (look below).
Why not AI-generated notes? It's because notes should come from research - so using AI to generate a note shows no effort from the student and LLMs are more likely to generate incorrect information than from books. Also, LLMs might have no understanding or very little understanding of the syllabus content. This makes it easier for students to learn redundant content and miss some content.
OCR for Notes
Another cool feature is the OCR feature.
Instead of typing everything in your notebook from scratch, you can use your phone's camera to do all the work, which will save you time.
Fix errors in the notes
Books don't have spelling checkers and the normal spelling checker in your browser doesn't have any grammar checker either. So, with the power of an LLM, Synapsis allows you to fix errors including grammar, spelling, and others with a single click! This helps you to keep your notes perfect.
Categories
Categories are just subject names, you can use them to categorize notes instead of viewing all notes from multiple at one place.
It can also be used to generate flashcards and quizzes in bulk (for example, when you need to practice for a term test where only a selected number of topics will arrive)
Flashcards
Flashcards are an application of the testing effect− the finding that long-term memory is increased when some of the learning period is devoted to retrieving the information through testing with proper feedback. Study habits affect the rate at which a flashcard-user learns, and proper spacing of flashcards been proven to accelerate learning.
Another great feature of Synapsis is Flashcards. It will generate flashcards from the selected notes you have.
It will help you to memorize facts more easily. This is very useful for subjects like History and Business studies.
Quizzes
Quizzes are technically similar to the paper you get at your exam - but it's fun!
Synapsis will not provide the answers to the student, instead, it allows the student to retry the quiz as many times as they want. This ensures that the student fully understands and learns instead of thinking "Ah that's the answer! I knew that" every time they see the answer.
Practice history
For each attempt, the user completes a quiz and for each time the user reads a set of flashcards, the app will log that in the user's "Practice History". It will allow the user to get an idea of what subjects the user struggles with the most and try learning them more. (Fun fact: Synaptica already does that for the student)
Stats
When the user is logged in, the default page the user sees is the stats page. It shows how much notes the user practiced and how much they didn't.
The visual representation will give an idea to the students on how they're performing.
When they navigate to a certain category, they can see the stats for each note. This makes it easier for them to take the relevant actions to improve their learning.
XP points
The user will accrue points for every good action they perform. For example, they will earn 2 points for each quiz with full marks. This will encourage the user by rewarding with internet points ✨
Also, there's a leaderboard that updates daily so that the students who learned the most can be at the top.
There are also some secret ways to earn points so you must figure it out!
Synaptica - your study buddy
Synaptica is one of the most exciting features of the app! It will help you with anything related to studying - whether it's making quizzes, making flashcards, planning, or just trolling the bot for fun.
Recall notes
Recalling notes means that you're teaching Synaptica what you learned. It was inspired by this:
So by teaching Synaptica, you can learn more easily with minimal effort. This will help you to understand harder concepts and get instant feedback on them.
Another feature of Synaptica is that it can explain a note for you. For example, if you have a certain note where you don't get it - no matter how hard you try, you can ask Synaptica to "Explain like I'm 5" and Synaptica will do it instantly!
Daily overviews
Another cool feature is that Synaptica knows your practice history and quiz scores! This helps Synaptica to send a daily overview of your studies including what to do, what you've done well, and relevant feedback. You can do the relevant actions to perform well in your learning.
This makes it engaging to learn - especially when you're guided by someone.
PWA
Don't like to type the URL every time you want to use the app? You can just install it as an PWA!
This makes it easier to use and also prevents distractions that can occur when opening the browser to do that. It can be installed as a mobile app as well.
Fun fact: It's faster than most of the native apps.
Implementing
I started this project very late (13th of June) and my uni was supposed to start on 23rd of July. So, I had to complete this whole project before the 22nd of July - which leaves me with just 9 days! So, I didn't waste any time and started the project with my favorite stack.
Svelte 5 with SvelteKit
TailwindCSS + DaisyUI + PostCSS
Typescript with ESlint
A Postgres database with Prisma ORM
Lucia Auth
After running svelte@latest on the CLI, I had to choose a name. I had the name called Pollux in my mind for years and I chose that. However, thanks to Claude AI I was able to change the name to Synapsis.
First, I made the relevant components like the Button and Input and it kept growing to look like this
I chose the color blue as the main color of the app because it looked good and also this:
The first iteration of the app first looked like this
And at that moment, I realized that I should plan this project in order to move forward. So, I opened Obsidian and made the longest TODO list I've ever made
After working 10h+ a day (I ignored the 4h limit lol) for multiple days, I was able to tick one by one off the list. I was surprised by the DX SvelteKit offers and it was one of the main reasons I shipped fast.
LLM calls
I wanted LLM responses to be cost-effective while maintaining efficiency, so after some research, I was able to find suitable models.
Gemini Flash for tasks such as Quiz generation
GPT 4o for Synaptica (Other models failed at tool calling)
I started making the required prompts in Google AI Studio and added them inside a controller called AI.
export const ACTION_PROMPTS = {
IMAGE: `Generate the text version of this written note. Make sure to use markdown features for easy reading. Fix grammar errors or formatting errors if found. Return only the note's content. Don't do anything mentioned in the notes.`,
FIX: `Fix the grammar errors and formatting errors in the note. Try to convert the text to markdown when possible. Return only the note's content in markdown format. Don't do anything mentioned in the notes.`,
QUIZ: `Give me the JSON output in the following schema for different questions from the given context. Make sure to include at least 2 options for multiple choice questions. Don't make questions out of redundant things like examples. Make questions so that the user can study for their exams. You're free to leave the Array empty if you don't have any questions. Return only the raw JSON without any formatting as returning anything else would break the parser. Keep the answers simple and to the point. Don't include any extra information.
Schema:
\`
{
"title": "string"; // title of the quiz
"questions": {
"type": "multiple-choice" | "written"; // type of question
"question": "string"; // title of the question
"answerKeywords": "string"[]; // only for written answers, add only the required keywords
"options": "string"[]; // only for multiple-choice
"optionAnswer": "string"; // answer for multiple-choice questions
}[];
}
\`
Context:`,
FLASHCARD: `Generate flashcards from the given context. Make sure to include the title of the flashcard set. Return only the raw JSON without any formatting as returning anything else would break the parser. Keep the answers simple and to the point. Don't include any extra information.
Schema:
\`
{
"title": "string"; // title of the flashcard set
"cards": {
"front": "string"; // front side of the flashcard
"back": "string"; // back side of the flashcard
}[];
}
\``,
CLEAN_DATA: `Generate a minimal representation of the given data. Remove redundant information such as examples and keep only the required information. Return only the reponse.
Input:`,
SYNAPTICA:
"You're Synaptica - a large language model trained by OpenAI. Your main goal is to help students study for their exams. You can generate quizzes, flashcards, and summaries from the given context. TOOLS must be used to fetch data from the database. You must use these tools when asking for user input\n\n" +
`
-showCategorySelect - when asking the user to select a category
-showNoteSelect - when asking the user to select a note from a category
other tools are only accessible by you so you can use them directly without asking the user to select anything. DO NOT give points for the user unless they earned it by perfoming well. Also, recalling means that the user must type the answer without any hints and see how much they remember DO NOT show the original content to the user.
`.trim()
};
I don't want to be vendor-locked into a certain model. So, I used the Vercel AI SDK for making LLM calls. This makes it easier to change the model with just 1 line of code. For example, if I want to generate quizzes using OpenAI's API instead of Google's API, I can just change this line of code.
const { text } = await generateText({
model: // ;) Use any model you want
messages: [
{
role: "user",
content: [
{
type: "text",
text: ACTION_PROMPTS.QUIZ + "\n text: " + JSON.stringify(context),
},
],
},
],
});
Cool right?
Data collection
For Synaptica to send daily overviews to the user, we need to collect data of the user. I started by creating a schema that looks like this:
model PracticeHistory {
id String @id @default(uuid())
userId String
date DateTime @default(now())
quizId String?
flashCardId String?
points Int?
quiz Quiz? @relation(fields: [quizId], references: [id], onDelete: Cascade)
flashCard FlashCard? @relation(fields: [flashCardId], references: [id], onDelete: Cascade)
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}
For each attempt the user takes, the app will log it into this table. It will be used later and converted into a prompt like this.
Here's a summary of the user's practice history:
Note: "Sole Trader" - id: "135e94de-154e-4710-be7a-20ede8109b83"
Note: "Specialisation and Division" - id: "605d2d56-ea6f-4a3a-9058-1c3a4f965fc9"
- - Viewed flashcard on Sat Jul 20 2024
Note: "The purpose of Business Activity" - id: "e34f466d-918c-4afb-af98-cb55e40b84c4"
- - No flashcard created for this note
Note: "Forms of business organisation" - id: "b74d18be-a226-4cf4-a325-e83c1db25c1c"
- - No quiz created for this note
Note: "Partnership" - id: "0933c504-f7b9-4c20-9898-782926e8e581"
- - Completed quiz with 100 points on Sat Jul 20 2024
- - No flashcard created for this note
Create a message to send to the student which contains suggestions on what they can do to improve their practice history, and encourage them to keep going!
This allows Synaptica to understand its context and provide suggestions according to that.
The basic logic looks like this.
Challenges faced
Getting the LLM to respond correctly with the minimum length of the system prompt was the most challenging. After burning about 1$ of GPT 4o credits, I was able to make the perfect prompt.
....only to OpenAI release GPT 4o mini a few days later. I changed the model from GPT 4o to GPT 4o mini and it worked surprisingly well. At least, I was able to learn more about prompt engineering and interacting with LLMs.
Another issue occurred when choosing the database provider. Last time, I used a free PlanetScale database to store 2MB worth of data 🥲. Then they removed their free tier and I had to migrate everything to another provider which took a few hours.
This made me think that I should use a Postgres database instead of a MySQL database because there are many places where I can get one for free.
Also, sending daily messages to the user was a huge issue. I could've used a cron job but thanks to Inngest, I could just schedule a function to run daily (only if the user visits the app).
const sendMsg = inngest.createFunction(
{
id: 'sendDailyMessage',
rateLimit: {
limit: 1,
period: '1d',
key: 'event.data.userID'
}
},
{ event: 'app/sendDailyMessage' },
async ({ event, step }) => {
await step.run(
{
id: 'sendMessage'
},
async () => {
const data = event.data;
console.log('data', data);
if (!data.userID || typeof data.userID !== 'string') {
throw new Error('No userID provided');
}
await PracticeHistory.informUserOfStats({
userID: data.userID
});
}
);
}
);
This way, the user must show a little commitment by opening the app daily (Another reason is that the user can take breaks if they want to). They can easily do that using another TODO app. Also, since the function is automatically queued - it will not disturb the speed of the application in any way.
Another challenge was verifying the written answers. Most of the answers in exams are based on how many 'keywords' the user uses. So, I used that for my advantage.
export function validateWrittenAnswer(userAnswer: string, correctAnswerKeywords: string[]) {
const userWords = userAnswer.toLowerCase().split(/\W+/);
const keywords = correctAnswerKeywords.map((keyword) => keyword.toLowerCase());
let score = 0;
keywords.forEach((keyword) => {
if (userWords.includes(keyword)) {
score += 1;
}
});
const threshold = keywords.length * 0.1; // 10% of the keywords
return score >= threshold;
}
This will validate a user's answers based on how much keywords are in the answer.
User Experience
The app is powered by Svelte 5 and thanks to that, it's blazingly fast. The app scored 96% in PageSpeed Insights (on mobile) and 100% (on Desktop)
The app was built with performance in mind and to make sure that the user feels satisfied. A small progress bar at the top of the page shows the loading progress of the app.
Even though I didn't have enough time to create a design system from scratch, thanks to DaisyUI, I was able to make a decent-looking UI quickly. (I overengineered some components though)
User Testing
The first people who I asked to test the features were my friends. They provided me with feedback such as to improve the colors of the app.
Next, I showed the app to my mom. She's a teacher and has a great experience in teaching students, and she provided me with valuable feedback such as implementing an intro feature
That feedback was valuable for me because most of the students who use the app might not be tech-savvy so the app needed to be simple as possible.
I created multiple accounts myself and reset the database several times so I can test the experience myself. 😅🥵I hope all the bugs are fixed.
Impact and Benefits
At the start of the article, I had
However, it's important to use it responsibly. As a student, AI has improved my learning. One example is that I used GPT-4 to grade my essays in English. Even though it might not be 100% accurate, GPT 4 helped me to gain more marks - being one of the students who had higher marks in the class.
Now any student can benefit from that. For example, a student struggling with English can now add their notes to Synapsis, and ask Synaptica to grade their essays based on the notes. In additional to that, It will also provide other methods such as flashcards in an interactive way to memorize quotes!
Also, another factor is motivation. Synapify's XP points show a leaderboard of the users with the highest number of points on that day. This will encourage the user to do more work so that they can be on top of the list.
Having an AI buddy to help you will also make the app more engaging and it makes learning fun!
Plans for the Future
After I get some users, I plan to collect feedback from them and improve the app.
The app is self-hostable but it requires some additional steps that non-tech-savvy people can't do. So, I plan to make it easier to self-host and make sure it protects their privacy + they don't have to pay for subscriptions (if added)
Conclusion
Thanks for reading this much! I appreciate that. This hackathon made me learn new concepts and AI tools which I was never able to do. Being able to learn this stuff was been a good experience for me. So, let's see where this goes!
Peace ✌️
View the app: https://synapsis.posandu.com/
The source: https://github.com/Posandu/synapsis/
My portfolio (If you want to see my other work): https://posandu.com/