This is a submission for the DEV Weekend Challenge: Community (dev.to in Bing)

Source: Dev.to

resetreel6879.web.app

Project Overview

I built Reset Reel for teens in Baton Rouge who move fast, feel fast, and sometimes react before they can breathe. Many of them experience emotional spikes, overstimulation, and pressure to “act tough,” even when they’re overwhelmed inside. Reset Reel is meant to interrupt that moment—not to lecture, but to give them a second to choose themselves again.

The app is a small React + Vite project designed as a tap‑through emotional interrupt tool. It guides the user through a short sequence of grounding screens, all dark‑themed and calming, aimed at overstimulated teens who don’t want anything childish or preachy.

App Flow

1. Opening – a moment to breathe
2. PeelLayer – a quick emotional reset
3. SelfiePrompt – asks the user to take a selfie
4. SelfieReview – shows the selfie back to them
5. ChooseYourself – a final moment of self‑recognition

After the last screen, the app ends on a placeholder where more tools will be added later.

Screen State Example

const [screen, setScreen] = useState("opening");

Each screen returns its own component, keeping the logic easy to follow and extend.

How I Built It

• React + Vite for fast development
• Component‑based screen flow
• State‑driven navigation
• Simple CSS‑in‑JS styling
• Local‑only development (no GitHub repository)

Tools & Acknowledgements

I’m still learning React, and this project taught me a lot about debugging imports, case sensitivity, JSX structure, and keeping components clean and intentional. I built it with support from Microsoft Copilot, which helped troubleshoot and stay organized through the confusing parts. The project is entirely mine, and I’m grateful for the guidance that helped bring it to life.