My Role:
UI/UX Designer and Full Stack Developer
Problem
University students frequently face time management issues, resulting in last-minute cheat sheet creation before exams. They often depend on shared templates or tools like ChatGPT for summaries, but limitations such as the inability to upload large texts and the cumbersome task of formatting make the process inefficient and stressful.
Solution
My Impact
This project was my first foray into both development and UI/UX design, and it holds a special place in my heart. I designed the mascot and learned Figma and prototyping while working on this project. My design work included the homepage, the depository, the complete cheatsheet generation process—from uploading lecture notes to downloading the final cheatsheet—and the profile page. In terms of development, I managed the implementation of the homepage, depository, profile pages, login/logout functionality, and cheatsheet viewing, and also integrated a feature allowing users to comment on other summaries and cheat sheets.
Process
Brainstorm
The project was inspired by the frequent challenge of last-minute studying due to poor time management, where we often found ourselves creating cheat sheets just before exams. We were frustrated by the tedious process of gathering resources and formatting them into concise cheat sheets, frequently resorting to templates shared in our module's Telegram group. This experience highlighted the need for a more efficient and high-quality solution for creating cheat sheets. Recognizing that university students often face the overwhelming task of processing extensive course materials, we envisioned developing a tool to streamline this process and enhance the quality of content.
Proposed Features
To address the challenges of creating cheat sheets, Yoko includes several key features:
- Efficient Cheatsheet Creation: Yoko facilitates the rapid creation of concise and accurate cheat sheets without compromising content quality.
- User Authentication: Implemented a strict user-authentication process to personalize the user experience and ensure secure access.
- Cheatsheet Repository: Provides a platform for users to share and cross-check their cheat sheets with others, promoting community learning and collaboration.
Wireframes and Prototyping
I created wireframes and prototypes using Figma to visualize the user interface and interactions of Yoko. These designs were essential for presenting the concept and gathering feedback before moving into the development phase.
Below are the wireframes from our initial design phase, showing the layout and functionality of key components of the application:
Development Stages
Initial Setup
We began by setting up a Firebase project and integrating it with our ReactJS frontend. This setup allowed us to implementauthentication flows, enabling users to sign up and log in with email and Google accounts. Firebase managed user information securely, facilitating efficient verification during logins. For Google authentication, we utilized OAuth 2.0 with Google's services.
Development
We then developed the user dashboard that allows users to efficiently manage their cheatsheets. Additionally, we built a cheatsheet maker, enabling users to either upload their existing cheatsheets or create new ones directly within our platform using the integrated tool.
To elevate the user experience even further, we decided to implement a profile page within the dashboard. This enhancement allows users to customise their accounts by adding personal details such as their course of study and year. Just like cheatsheet data, this user information is securely stored in Firebase's cloud.
Backend and Integration
In the third stage, we faced a challenge with our Django setup, realizing we had deployed a standard Django server instead of a Django REST API server. We resolved this by correctly setting up the API and using Axios to connect the Django backend with our React frontend. Additionally, the backend logic was written in Python, and we integrated GPT-3.5 for AI functionalities to enhance the cheat sheet generation process.
Technologies Used
Our tech stack included ReactJS, HTML, and CSS for the frontend; Firebase for backend services; Django (with Django REST API) for backend logic; and GPT-3.5 for AI-based functionalities. Deployment was carried out using Vercel for the frontend and Google Cloud Platform for the backend.