Back to articles
Day 43: Adding a Duolingo-style Streak UI to my React Dashboard

Day 43: Adding a Duolingo-style Streak UI to my React Dashboard

via Dev.to ReactEric Rodríguez

Yesterday I built the backend logic for a "Savings Streak" in DynamoDB. Today, I connected the wires to my React SPA to actually show it to the user. The Setup: My AWS Lambda function returns a JSON payload with a current_streak integer. In React, I capture this state and pass it into a custom card component. The UI Magic: I used Tailwind CSS and lucide-react for the icons. The component checks the streak value: If streak > 0: The Flame icon turns orange and uses Tailwind's animate-pulse class to feel "alive". If streak === 0: The UI turns slate gray, signaling failure. By keeping the state in AWS and only using React for presentation, the streak is cross-device compatible and tamper-proof. No LocalStorage hacks required. The full-stack flow is finally coming together!

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
7 views

Related Articles