Roots & Roads

• 

  Youtube

Inspiration

Roots & Roads grew out of conversations with teachers and counselors serving newcomer students who often feel unseen: immigrant, refugee, and rural youth balancing multiple languages, family traditions, and the pressure to “fit in.” We envisioned a hand-drawn, crayon-textured digital space where their stories feel honored, mentors can celebrate small wins, and AI gently bridges cultures rather than replacing them.

## What it does

The prototype delivers a full journey: WorkOS-powered login, a preferred-name gate, a student profile wizard that captures cultural/linguistic context, and a dashboard with AI cultural tips, feeling logs, scenery sharing, and community resources. When APIs are missing, local fallbacks keep flows unblocked so designers, researchers, and educators can test narratives end to end.

## How we built it

We combined React + Vite with Tailwind-style utility classes tuned to the “sun-baked earth & leaves” palette, writing components such as NamePrompt, StudentProfileWizard, Resource/Discover feeds, and Dashboard widgets. API helpers in lib/api.ts abstract the backend contract, supporting WorkOS auth, Netlify Functions stubs, and localStorage drafts. We iterated visually with crayon textures, offset shadows, and rounded typography to mirror sketchbook storytelling.

## Challenges we ran into

• Balancing real backend flows with demo needs meant building layered fallbacks (WorkOS, Netlify Functions, local drafts) while keeping UI states consistent.
• Maintaining the ink + crayon art direction inside utility-first CSS required careful gradients, noise overlays, and hand-drawn borders.
• Designing culturally sustaining interactions demanded constant checks against deficit narratives and privacy concerns.

## Accomplishments that we're proud of

We delivered a cohesive narrative—from login through dashboard—where every screen reinforces dignity and agency. The StudentProfileWizard captures nuanced stories, the dashboard surfaces actionable cultural supports, and documentation (SYSTEM_FLOW.md, api.md) keeps cross-team collaboration aligned.

## What we learned

Interweaving AI mentors with culturally sustaining pedagogy needs thoughtful guardrails: transparency about data use, gentle language, and concrete offline actions. We also learned that rapid prototyping benefits from resilient fallbacks (like developer skip buttons and English mock replies) so UX research never stalls.

## What's next for Roots & Roads

Next steps include wiring real community data (USAHello feeds, local programs), expanding teacher-facing analytics, and integrating GSAP-powered animations for richer motion storytelling. We’ll also pilot with partner schools to validate how AI mentors can scaffold real-world cultural expression and adaptation.

Built With

• and-smartmemory-(context-persistence)-apis
• deploying-the-web-client-on-netlify-while-hosting-backend-services-on-vultr.-data-and-ai-flows-are-powered-by-raindrop?s-smartsql-(structured-storage)
• functions
• netlify
• smartinference-(ai-reasoning)
• we-built-roots-&-roads-with-a-modern-typescript-react-frontend-and-a-node/express-style-backend
• workos