FocusFlow

Home Page
Page to generate a study plan
View your plans for the day
Credits Page

Inspiration

1A at Waterloo was hell. And that is an understatement. The sleepless nights, endless assignments, and overwhelming pressure were experiences we could never forget. This challenge inspired us to create a solution for future students, aiming to make their academic journey more manageable.

What it does

We built a website where users can input their study goals and deadlines, and in return, receive a personalized calendar that highlights an optimized study schedule. By entering details like subjects, available study time, and deadlines, users get a dynamic plan displayed in an interactive calendar. Each date on the calendar shows the user their personalized plan for the day.

How we built it

At the start of our project, we focused on picking out the primary challenges students face when managing their academic goals. This phase was straightforward, as we could easily draw from our own experiences and reflect on the struggles we encountered through our first year in university.

Next, we moved on to creating a low-fidelity prototype in Figma, which allowed us to outline key design elements such as image placement, taglines, title sizes, and overall layout. Once the prototype was finalized, we shifted to front-end development, where we focused on laying out the website's features, building the necessary routes, and ensuring the platform was responsive across devices.

For the Study Plan Generator, we added a backend server that allowed us to manage user data securely and efficiently. We used tools in express.js Middleware to streamline the process. We then integrated an OpenAI prompt, leveraging its powerful natural language processing capabilities to generate personalized study plans based on the user's input on preferences. Finally, we used its response to build a calendar using tools like react-calendar to ensure that the calendar can display the study plan for each day.

Throughout this process, we continuously tested and iterated on our design and functionality, gathering feedback to make improvements. Our goal was not just to build a functional website, but to create a user-friendly experience that would help students succeed in managing their studies and achieving their goals.

Challenges we ran into

Our main challenge was integrating OpenAI's response into our frontend. It was tricky at first because we needed to ensure that the data generated by OpenAI was not only accurate but also formatted properly for display on the website. The backend needed to interact seamlessly with the front end, so that the user would receive a personalized study plan in real-time without any delays or errors.

To overcome this, we spent a lot of time refining the backend server to handle user input efficiently and process the OpenAI prompts accurately. We also had to implement a robust system for error handling, ensuring that if any issues arose with the AI generation, the user would still receive meaningful feedback.

Accomplishments that we're proud of

All of our members are beginners as this was our FIRST ever hackathon. We were able to use what we learned in our first year class to come together and make this project. We’re proud of how we combined our diverse skills, from Engineering concepts to first-year technical fundamentals, to bring our vision to life. This journey not only strengthened our technical abilities but also showcased the power of collaboration and the willingness to embrace challenges as a team. We surpassed our goal of just making a basic website by adding an AI component to the study planner. All in all, creativity and teamwork overcame all our challenges.

What we learned

Through this project, we learned the importance of user-centered design and the challenges of integrating advanced technologies like OpenAI into a web application. We gained valuable experience in prototyping, front-end development, and building a responsive user interface. We also learnt how to use new tools including node.js and express.js. For some of us, we learnt how to create a react app and make simple pages!

What's next for FocusFlow

We are looking to add a user login feature so that users can create accounts and track their study plans over time. This will allow them to save their progress, set recurring goals, and access their personalized study plans across multiple devices. Additionally, we plan to introduce more advanced features, such as the ability to set priorities for different subjects, receive reminders for upcoming study sessions, and integrate with calendar apps for ideal scheduling.