Team Pufferfish

Pufferfish - Journaling and Reminders Website with Habit Recommendations

Comment

Inspiration

Daily, we are constantly bombarded with tasks, whether it be from work, school, or our personal lives. As a result, many people are left feeling overwhelmed. According to a study conducted by the American Institute of Stress, 33% of Americans report feeling extreme stress in their lives.

In a world where taking care of one's own mental and physical health has become increasingly important, we were interested in creating an experience in which users may reflect on themselves and learn about ways they can improve and enjoy their lives. That's why we created Pufferfish.

What it does

Pufferfish features a journal prompt that users can use to log their daily experiences and mood to receive recommendations on habits and activities they can do to address concerns highlighted in their journal. From there, users can access a calendar and reminder system to keep track of their schedules and plan their activities. Users can opt-in to receive daily email notifications about their upcoming reminders, so they can keep track of what's going on in their lives.

How we built it

The backend is built with Flask and hosted on PythonAnywhere, with a SQLite database. It features an NLP recommendation system built using Pandas and NLTK (for preprocessing), and a pre-trained model from sentence_transformers, based on HuggingFace's Transformers library. Emails were sent using the SMTPlib library. The frontend was built using React and deployed on gh-pages.

Challenges we ran into

Frontend

One of the biggest challenges while building the frontend was building an application that was responsive to different types of browser sizes. The original application was built with a desktop browser in mind, but this app is useful and versatile enough that mobile support is important.

Backend

As the backend performed many CRUD operations, we had to make sure that the data we entered into the database was accurate and consistent. This meant that we had to make sure that we used consistent formatting for attributes such as dates, otherwise these operations may not be performed properly.

Accomplishments that we're proud of

Frontend

CSS Styling and page transitions with framer-motion. The main theme of the website was meant to be calming and features an underwater-esque feeling, as highlighted by the parallax bubbles backdrop for each page.

Backend

Automating sending users notifications about upcoming reminders, creating the login system using a one-time code sent to a user's email.

What we learned

Frontend:

  • React Hooks like useState and useEffect to manage and update state on the browser
  • CSS styling to create a user-friendly website layout and eye-catching animations to transition between pages and actions

Backend:

  • API development using Flask
  • Sending emails using SMTPlib
  • How to effectively preform crud operations using SQLite3 - ensuring SQL queries were accurate, ensuring data types were consistent, communicating schema to other team members etc.
  • How different elements of a backend interact with each other (API, database, scheduling tasks, etc.)

What's next for Team Pufferfish

Front End

Continue development for mobile browser support; this includes dynamic adjustment of sizes and text in order to take advantage of the mobile browser's screen real estate.

Back End

Possibly migrate to more robust hosting (GCP, AWS) and database (MySQL) systems, improving recommendation model to provide more accurate habit recommendations.

Share this project:

Updates