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!
Top comments (0)