FlowSpace — GitBook Documentation

Welcome to FlowSpace

FlowSpace is a no-shame study companion built for stressed, overwhelmed, or burnout-prone students. It blends gentle UX, AI-powered learning tools, and accessibility-first design into one calming study environment.

FlowSpace helps you:

• Focus without pressure

• Turn messy notes into clean AI-generated quizzes

• Reset during burnout

• Plan your next 60–90 minutes with ease

• Study in a space that feels human, not grindy

---

1. Overview

What is FlowSpace?

FlowSpace is an all-in-one, student-friendly study toolkit designed to make learning feel lighter, safer, and more vibrant. It turns studying into something soft — not stressful.

Core Philosophy

FlowSpace breaks away from intense productivity culture by providing:

• Compassionate tools

• Soft gradients & calming visuals

• Burnout-aware features

• Accessibility modes built in from day 1

Learning should feel human, not punitive.

---

2. Features

Focus Timer

A gentle focus timer with:

• Adaptive focus modes

• Encouraging visuals, not shame-based pressure

• Dark/Light theme support

• Custom color accents based on user theme

---

Quick Quiz (AI-Powered)

Turn ANY text (notes, textbook, lecture summary) into a set of study questions instantly.

• Paste text → AI generates questions

• Save quiz sets locally

• Choose difficulty: Chill, Normal, Spicy

• Revisit saved sets anytime

---

Safe Space

Mental-health-friendly area featuring:

• Emotional check-ins

• Encouragement prompts

• Light grounding exercises

• Soothing UI to lower overwhelm

---

Time & Priority Coach

AI assistant for planning your next study block.

You get a mini study plan that includes:

• Priorities

• Break reminders

• Estimated durations

• Gentle guidance vs. strict schedules

---

Accessibility Bar

One of FlowSpace’s strongest features:

• Dyslexia-friendly mode

• High-contrast mode

• Text size scaling (A-, A, A+)

• Light/Dark mode toggle

• Fully responsive design

• Font adjustments for readability

---

3. Tech Stack

Frontend

• React

• TypeScript

• Custom CSS variables

• Responsive design (mobile-first)

Backend

• Node.js

• Express

• OpenAI API integration

• Health check endpoint

Additional Tools

• LocalStorage for persistence

• Vite (or React Scripts depending on setup)

• GitHub for source control

• Cline CLI for automated improvements

---

4. Design System

Color Palette

Primary Accent: #58A4B0 Secondary Accent: #B07BAC Deep Base: #171738 Soft Background: #F9F9F9

Typography

• Inter

• Dyslexia-safe variant when enabled

• Accessible sizing: small → medium → large

UI Style

• Rounded corners

• Gradient accents

• Radial backgrounds

• Motion used sparingly

• Emotionally safe color schemes

---

5. Local Storage Architecture

Key	Purpose
flowspace_profile_v1	Stores user name/profile
flowspace_quiz_sets_v1	Saved quizzes
flowspace_theme	Light/Dark mode
flowspace_text_size	Small/Medium/Large
flowspace_dyslexia	Dyslexia mode toggle
flowspace_high_contrast	HC mode toggle

---

6. System Architecture

client/
  ├── src/
  │    ├── App.tsx
  │    ├── Components/
  │    │     ├── HomePage.tsx
  │    │     ├── FlowTimer.tsx
  │    │     ├── QuickQuiz.tsx
  │    │     ├── SafeSpace.tsx
  │    │     ├── TimeCoach.tsx
  │    │     └── ProfilePage.tsx
  │    ├── assets/
  │    └── styles/
server/
  ├── index.js
  ├── routes/
  └── config/

---

7. How to Run Locally

Clone Repo

git clone https://github.com/YOUR-USERNAME/flowspace.git

Install dependencies

cd client
npm install

cd ../server
npm install

Run backend

npm run dev

Run frontend

npm run dev

Backend runs on: http://localhost:3000 Frontend runs on: http://localhost:5173 (or your Vite port)

---

8. Accessibility Philosophy

FlowSpace was intentionally designed for:

• Students with ADHD

• Students with dyslexia

• Burnout-prone students

• Anxious learners

• Neurodivergent users who benefit from gentle UI

Accessibility isn’t an add-on — it’s woven into the core UX.

---

9. Hackathon Tracks

Main Track:

✔️ Make Learning Fun (Primary Submission)

Bonus Tracks:

✔️ GitBook Documentation ✔️ Cline CLI

---

10. Why FlowSpace Matters

Students deserve tools that feel supportive — not strict.

FlowSpace softens the learning experience while still offering powerful features that help you perform at your best.

It’s not just a study tool. It’s a little companion for heavy days.