Inspiration

My inspiration is really what I faced as a student. I recently completed my A Levels and I had realized that I didn't have a website where I could get everything all at once for studies; instead, I had to go to multiple different websites for past papers, topical papers, notes etc.

What is Study Haven about?

Study Haven is a website where you can get all your practice resources, notes and study plan from. It uses AI to enhance your study patterns and generate questions based on a subject and topic you choose. It also includes many topic-wise questions that you could easily generate with the click of a button. It provides flashcards and an SAT test system too.

How I built it

Before I came up with the idea of Study Haven, I was learning a new web framework called SvelteKit. As I was learning, I realized that I couldn't properly learn it unless I made something using it, and so after days of regular life I came up with Study Haven. I navigated through Svelte's official tutorial and looked at other peoples' projects to understand exactly how Svelte is used. I also had to decide on a UI Framework I was going to use; I initially decided to use Skeleton UI but thought that it was a bit too bland and corporate-like for a website focused on studying. I then stumbled across DaisyUI which had a design I really liked, it also didn't use svelte components and rather used CSS classes which I was more comfortable with.

Challenges I ran into

There were quite a bit of challenges along the road.

UI Design

One of the first challenge I faced was using DaisyUI to create UI that doesn't have proper support. Basically I used UI components where they weren't meant to be used

PDF Generation

Another challenge is about the topicals worksheet generation. I had to spend a few days trying to understand exactly how to create a PDF in TypeScript. I went through multiple pdf libraries and finally decided on pdf-lib. The major issue with pdfs is that I had to generate on the client side, and I couldn't use the server otherwise I would cross my bandwidth limit on vercel. I had to spend multiple hours trying to figure out how I would generate the pdf on the client, and once I finally did figure it out I realized that it slowed the website down and often times lead the browser to believe the website was unresponsive. After asking around, I found Web Workers. They are basically just JavaScript files that run on a separate thread than the website's UI thread meaning it wouldn't slow the site down. It also allowed me to interact with the site's state, so I could implement a progress bar.

Problems with Question Creator AI

One of the largest issues by far was creating a prompt that google's gemini-1.5-flash model could understand and generate consistent responses. My initial approach and the approach I tried to refine way too much was just creating a paragraph that describes what the AI should do. The prompt had no schema and no structure, I just relied on the AI producing a response with some json in it. To extract the json, I relied on the AI ONLY producing json leading to some cases where the AI would include some text around the json which would break the website. Later, I learnt that you could provide the AI with a schema that it can follow and also set the response mode to json; however, it was only a feature available in python. I wasn't ready to switch to python, so I decided to provide a schema without setting the response mode using TypeScript. I found that this caused the AI to produce inconsistent responses, so I sucked up and decided to use a Flask server to handle all the requests I had to make to the AI. It was not the best way, but it was the only way.

SAT Question Bank Inconsistency

While developing the SAT test feature, I had to go through all of collegeboard's different questions in their question bank and realized not all of them followed the same format. I had to implement many different code blocks to extract the question data for many different formats and ended up with one huge problem. There were a few hundred questions - that appeared in official tests - that didn't have a specified answer; they only provided the rationale. I obviously couldn't let my peers and I miss out on these important questions, so after I created the flask server that deals with anything AI related, I implemented an endpoint that would get the AI to respond with specific answers it can find using the rationale. It is pretty consistent and for all the questions I have done, it has never once failed to produce the accurate answer.

Accomplishments that I'm proud of

An accomplishment I'm especially proud of is the topic-wise worksheet generation. It works very smoothly and is able to put hundreds of questions in a single pdf with in a reasonable amount of time. I'm also proud of the AI question creator. It was a very cumbersome to say the least, but I'm glad I was able to get it to work. One more thing I'm pretty happy I added was the SAT test feature. It was a bit of a last minute feature because I faced a few problems while practicing for my SAT. It uses collegeboard's official question bank and generates a test based on what the user would want. They could choose the type of test (English or Math), the difficulty, the number of questions and even the specific skills that a user would want to practice. It also provides a score at the end of the test along with what the user should focus on improving.

What I learnt from this project

Obviously the largest thing I have learnt has to be Svelte and SvelteKit. I think I will be comfortable using svelte and sveltekit for any upcoming projects. One more thing that I am glad I learnt is CORS Policy; it may not appear as something that important, but when making APIs, it is pretty important to understand to maintain security. I learnt many new concepts in web development such as web workers, response objects and even streaming data to the page from the server.

What's next for Study Haven

I plan on implementing a few new features to study haven.

Study Planner

I will be adding a study planner, one with a calendar and a timeline manager. It will also use AI to enhance the timeline to help the user decide how to plan their day out.

Support for other boards and levels

I want to add support for other boards and other levels, and to do this I would need to be able to extract questions from these boards. Currently, the database being used (which was a public database) only has A level and IGCSE support. I've only implemented A levels for now for CAIE. I will soon add support for edexcel and the IB diploma. For this, I am working on a question extractor that uses the pdf2html library and special regex patterns to detect questions in the pdf. It will also use AI to decide the topic for each question.

Achievements

I intend on adding an achievements system similar to khan academy that could encourage students to study more.

Personal AI Assistant for studying

I had a big brain idea recently, it was to train an AI model based on the questions I extract so that it can deliver answers exactly like how they would appear in the question paper. It sounds crazy but I think it is very possible. I wanted to use the llama3 7B model since it looks like the best small-scale LLM. I would have to use supervised learning to train it since it is made to generate a response instead of text classification.

I intend on keeping study haven free to the public and only adding a paywall for any server-intensive features I would add in the future.

PS The question creator appears to be buggy and it is difficult to fix it because google's gemini-1.5-flash model is inconsistent with responses. I will switch to a different model soon (as long as I can find one that's free). I hope this doesn't hinder the experience much.

One more PS The website doesn't scale for mobile yet, it is something I'm actively working on implementing.

Built With

• flask
• gemini
• html
• python
• supabase
• svelte
• sveltekit
• typescript
• vercel