Interactive Learning Tool — Espresso

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

Lead

Abdulrasol Alofi — Project Manager, Project Mentor

Designers

Mahika Nagarkar-Jain — Designer

Michelle Mendoza — Designer

Jaime Jeong — Designer

Developers

Greg Chang — Developer

Rani Saro — Developer

Christopher Chen — Developer

Luciann Nguyen — Developer

Rajat Gupta — Developer

Sambhav Agarwal — Developer

Timeframe

Oct 2023 — Jun 2024 | 22 weeks

Tools

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 simplified development as much as possible while still accommodating for the complexities in our application.

The Project

Espresso has now come to life! Let’s dive into the comprehensive overview of our journey and the fruition of our efforts!

Landing Page

Mobile View

Cards View

Flashcards Page:

Mobile View:

Design

Features

1. Spaced Repetition:

• Customizable Intervals: Allows users to review harder flashcards numerous times while evenly spacing out the easier flashcards
• Missed flashcards are reschedules to ensure to material is forgotten

2. Create Deck

• Easy Deck Creation: Easy to create new decks with titles and descriptions

3. Update Accessed (Edit History)

• Keeps a record of every change made by a user so that they can preview recently edited decks

4. Sharing Decks (Permissions)

1. Can Share decks easily with the help of a link
2. Allows to keep track of ownerships/permissions

5. Study Statistics

• Progress Tracking: Displays statistics on user progress such as the amount of cards studied

Low Fidelity

After finalizing the landing page and home page, we started working on various pages where you can view all existing decks, create a new deck, and study those flashcards through either quick study or spaced repetition method.

• Early Page Iterations

Mid-High Fidelity

• Color schemes
• User testing
• Planning out prototyping
• Started branding
• Transitioned to high fidelity

The page we spent most time iterating was the creating a deck page. After numerous feedback and user testing, we decided to separate the editing and studying page.

During this stage, we also finalized design for viewing all deck page.

In addition to those, we focused on small interactions like overlays as well.

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.

Tech Stack

Frontend:Next.js (React.js)

Backend: Express.js, PostgreSQL

Applied Globally: Typescript

Database Design

Challenges

1. Navigating Backend-Frontend Integration
2. Frontend Responsiveness and Layout Cohesion
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. Coordinating collaborative tasks throughout the week

6. Fostering Team Synergy and Communication

7. Determining the optimal timing and locations for establishing and terminating connections to the database

• Ended up connecting & disconnecting whenever a query was called
• Utilizing a Pool of Database Clients to easily handle concurrent requests

Takeaways

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. We hope to continue development on Espresso and stick close to our mission — provide an accessible study platform.