Design Philosophy

Frictionless entry

• We placed emphasis on allowing users to access all of our platform’s resources on guest mode and instead provided an optional cloud sync if they wanted to create an account.

Calm UX

• Since mental health is a sensitive topic, we ensured that the user had a calm experience through carefully guarded and empathetic interactions and an accessible HTML.

Sea Design

• Throughout the webpage, we used a consistent sea theme through a uniform color palette of light blues, greens and browns, the otter mascot, Sisu and the scattered images of sea items like shells and rocks. This projected to the user a cohesive and serene environment that differentiated our product from other tools available.
  

Empathise on mobile usage

• To allow for quick accessibility to our website’s resources, we placed a high importance on how the webpage will be viewed on mobile devices.

Tech Stack

Frontend

• The UI was built with a combination of React and Vite and styled with Tailwind CSS and custom CSS theming.

Data

• Data is stored locally by default, however it can be stored in Supabase for usage over multiple devices.

State

• It is run with a React context for the wellness and authentication aspects and uses custom hooks for storage synchronization, timers and sound effects.
  

Who is Sisu for

Sisu is aimed at anyone who wants a low pressure and convenient way to keep track of their mental health through check-in and exercises. This application is not meant to replace professional healthcare workers, however it assists users to practice taking care of themselves and provides connection to other resources when needed.

hackathon-cs-girlies/
├── golden-rules.md               # Core Engineering & Architecture Rules
├── README.md                     # Project Overview & Setup Guide
├── architecture/
│   └── README.md                 # System Architecture & Layering Rules
├── agents/                       # AI Agent specification
│   ├── .architect.md             # AI Agent architect prompt
│   ├── .engineer.md              # AI Agent engineer prompt
│   └──  .README.md               # Agent architecture overview
├── context/
│   ├── ai-constraints.md         # Runtime & AI context guidelines
│   └── design-contracts.md       # Component, Hook, & Service contracts
├── design_sessions/              # All the design sessions
│   ├── active-design.md          # Currently active design session
│   └── TEMPLATE.md               # Design session template
├── languages/                    # Language conventions
│   └── README.md                 # Language guidelines
├──  node_modules/                # Json package
├── src/                          # All the source code  
├── assets/                       # All images used
│   ├── components/               # React components
│   ├── context/                  # React context
│   ├── hooks/                  # React JS hooks
│   ├── services/               # React JS Service modules
│   └── styles/                 # All the styles
│        ├── App.jsx                 # The entry point to the application
│        └── main.jsx                # The entry point to the application
├── supabase/                     # Supabase database schema and configuration
└── workflows/                    # AI workflow commands ($prepare, $design-session, etc.)

Built With

• cloud
• javascript
• node.js
• react
• supabase