Interactive Learning Tool — Espresso

2023–2034 Yearlong Spark Project Update

Introduction

A new online learning platform that merges Quizlet’s simplicity with Anki’s advanced-spaced repetition. A comfortable, aesthetic interactive software design with numerous options for inputting data — customizations are free, removing payment barriers. A solution ensuring an effortless and efficient learning experience for everyone.

The Team

Timeframe

Oct 2023 — Jun 2024 | 22 weeks

Tools

Management & Communication — Jira, Discord, Slack

Design UI/UX — Figma

Software Development — Next.js, Express.js, Typescript, PostgreSQL

The Project

As we are still in the process of developing the web application for this project, here is a preview of our Home Page.

Design

Research + Hurdles

During the research portion of designing the interface for Espresso, we prioritized the need of students — gauging a proper understanding of their visual preferences for a seamless, effective learning experience. We additionally studied many designs of flashcard applications and observed similar features all users expected in a new, improved user experience and design. Finally, we experimented with multiple sign-in options to find the most optimal configuration.

Low Fidelity

Our low fidelity stages were mainly focused on combining all the main features of the application/project to form a design — setting up a good foundation for our future designs.

Mid-High Fidelity

After countless attempts of trial and error, we were finally able to choose a design which reflected our desired functionality and user flow. To visualize the design direction of the application, we were tasked with developing branding at an early stage, choosing a neutral color palette and displaying relevant information immediately without any kind of user intervention.

Development

To manage the complex relation-based nature of the application, as a development team we decided to break up the software into 4 major parts: Users, (Flashcard) Decks, Flashcards, and (Flashcard) Deck Permissions. The software application will support features for users to create, modify, and share flashcard decks while also providing helpful methods of querying those decks. There are multiple other features we want to account for, so this could possibly change as we incrementally add features.

Tech Stack

Frontend — Next.js (React.js)

Backend — Express.js, PostgreSQL

Applied Globally — Typescript

Prioritizing concepts such as code reusability, server-sided rendering, and statically types variables influenced our development choices for the tech. stack. Using the tools above will simplify development as much as possible while still accommodating for the complexities in our application.

Database Design

Here’s a copy of our current PostgreSQL database design, displaying the different tables, fields, and relationships between our data. Maintaining and expanding relationships like one-to-one and one-to-many will ensure a scalable database design, support complex queries, and improve overall efficiency at peak usage. The database design is subject to change as we continue to implement and develop new features.

Challenges

1. Configuring the development environment to properly compile & execute code
2. Coordinating collaborative tasks throughout the week
3. Designing/managing backend utilities given the interdependencies between utilities
   Many backend utilities depended on each other to complete certain tasks; constant coordination between developers was necessary to ensure efficient progress was made weekly
4. Properly maintaining the Git repository & minimizing merge conflicts
   Due to the collaborative nature of the project and dependencies between files — maintaining version control organization was key to a productive development environment
5. Determining the optimal timing and locations for establishing and terminating connections to the database
   a. Ended up connecting & disconnecting whenever a query was called
   b. Utilizing a Pool of Database Clients to easily handle concurrent requests

Takeaways

Accomplishments

Despite learning many new concepts, technologies, and tools — facing technical challenges — we were able to achieve almost all our goals for this quarter. We were also excited and impressed with our ability develop branding and a target audience early on in our development.

Our Goals for Winter 2024

1. Complete backend REST API
2. Finish most of UI/UX designs & implement them on the frontend
3. End of quarter: Transition into a more focused role in terms of user-testing/adding final touches

Thank you for taking on this journey with us — Stay tuned and we’ll see you next quarter! 👋