The Win Jar - hacking our positive psychology and building with AWS Amplify

The Win Jar - hacking our positive psychology and building with AWS Amplify

Creating a web app to help us harness the power of celebrating small wins ⚡️

Play this article

Have you ever reached the end of the year and barely remembered what you've achieved between the big milestones? Do you sometimes get demotivated when your big goals feel so far away? Do you want to feel better about your progress and get that ✨ dopamine ✨?

Introducing The Win Jar 🏆 is a web app to help us harness the power of celebrating small wins. It can be used across contexts, for personal wins, wins at work, your business, you name it.

Okay, that sounds fun, but why should I bother? Celebrating small wins help us to build and maintain motivation towards our goals, and helps us to feel good more often - who doesn't want that? But don't just take it from me:

How The Win Jar came to life 🌱

The idea for TWJ came from having a physical win jar last year. Wins and memories were written on post-it notes and opened on New Year's to reflect.

Empty win jar

Full win jar

It was super nice to read through them especially as a lot of those small wins contributed to where I am now:

  • 'Made my intentions clear to managers that I wanted to become a software engineer - even though it was scary!'
  • 'Coded my first portfolio from scratch with HTML and CSS'
  • 'Got through my first coding project and technical interview'
  • 'Started new job as software engineer at HiPeople - my first role in web development'
  • 'Merged my first pull request'

Having a record of these and looking back makes me really happy and proud, and I'd love for other people to experience the same, with their own virtual win jar!

The AWS Amplify x Hashnode Hackathon has given me the perfect motivation to build my first full-stack app, the first version of The Win Jar (and write my first Hashnode article!). I'll also be taking the AWS SAA exam in the near future, so I felt it was also great opportunity to get hands on with some AWS services - a win-win! (see what I did there 😉)

About The Win Jar - what you can do with it now and in the future 🔜


Live link:

GitHub repo: thewinjar

Technology used:

  • React (CRA)
  • TypeScript
  • Tailwind CSS
  • Material UI
  • Storybook
  • AWS Amplify Studio
  • AWS Cognito
  • AWS Amplify Hosting
  • AWS Route53

Current Features 👩🏻‍💻

  • Create an account/sign in with your own Win Jar Account
  • Add a win
  • Remove a win
  • View your wins when you log back in
  • Accessibility considerations, e.g. keyboard navigable

Future improvements 🔮


  • The user can edit wins
  • The user can edit the date of the win to be added
  • The user can 'lock' their win jar access - so they can add wins but only open it on a certain date (e.g. New Year, anniversary, X months in the future)
  • The user can set reminders to add a win (help with habit building)
  • The user can have multiple jars for different contexts (e.g personal, work)
  • Users can have shared win jars (e.g. for teams, families, friends)
  • The user can share wins to socials e.g. Twitter after adding them
  • The user can view statistics about their wins (e.g. win streak (like habit tracking), how many wins in the month etc)
  • The dashboard displays a random win from the past (like Facebook memories, 'hey remember this? go you!!')
  • The user can select and export their wins in a format that can be shared - (e.g. might be useful in a work setting when it comes to performance appraisals so you can share with your manager)
  • Allow user to have and update profile and have personalisation in UI, e.g. 'Hello {FIRST_NAME}'

Technical / Project

  • Add interaction/code tests with Playwright/Jest

The process - from idea to first iteration 🚀


I am using Notion to plan and track tasks. I have an epics board and an implementation board which has tasks that can be connected to the epics.

Notion board showing epics

Notion board showing implementation tasks

I also have the Notion x GitHub integration so I could add the related PRs to the Notion tasks.

I loooove FigJam and I used it to do a giant brainstorm of some initial requirements that I want and a rough architecture diagram. My goal was to make it as simple as possible and see what I could do to build an initial MVP, and then make it fancier later 💅🏼. I thought about what tasks a user may want to do, and noted a list of potential features. I also collected several links from AWS Docs / YouTube which I thought might come in handy during implementation time.

Basic architeture diagram made in FigJam

Simple user flow diagram made in FigJam

Initial wireframe & mockups

I created a very basic wireframe and mockups for what I want the page to look like. The design wasn't to be followed religiously, but more for me to have at least some direction when building.

Basic architeture diagram made in FigJam

Basic wireframe of web page

Version 0 - Project set up

  • Set up project with CRA
  • Set up GitHub repo
  • Install and configure packages e.g. Storybook, Tailwind

Version 1 - First iteration

Building UI Components

  • Created components in Storybook in isolation before putting into App, used with the accessibility add on to check for failing a11y issues when building components
  • Used Tailwind for styling but defined a TypeScript file for reusable styles to keep things more consistent and maintainable (e.g. when updating colours, avoids having to change in many different places)
  • Used Material UI for inputs and buttons


Configuring AWS Amplify

  • Installed and configured the Amplify CLI using this guide
  • Set up AWS Amplify config following this guide

Console output of successful AWS Amplify CLI configuration Yay for green messages 😝

Adding authentication with Amplify & AWS Cognito

  • Added basic authentication with email and password using Amplify Studio - I was so excited when I got this set up the first time and I could log in 😅
  • Used the Authenticator UI component from Amplify UI

Adding backend and database

  • I primarily work on the front end, and so this was the part I was more worried about, but I managed to get it set up in the end!
  • I used the data model designer to set up a very simple data model, and then copied the schema and edited it further locally to add per-user access for the win data. This means the user can see and manage only their wins.
  • I used the Amplify CLI to set up a GraphQL API with the schema

Screenshot of AWS Amplify Studio Data Modeling

Adding interactivity to the app

  • At first I just deployed the main page with unwired components and no interactivity.
  • After creating the backend, I updated the front end to interact with it.
  • I used the create and delete queries that were generated to add interactivity with the input form and display it in a list. I thought it was quite cool that the Amplify codegen generates the mutation which was helpful especially as someone not too familiar with backend.

Deployment with AWS Amplify Hosting

  • Connected GitHub repo for CI/CD
  • Added custom domain with Route53, was having trouble trying to figure out the specific DNS settings needed with my domain provider being Google Domains - but I was saved by this article



I did some manual testing of main user flows (sign up, sign in, add win, remove win), and ironed out some initial bugs I found.

Some screenshots from the first version are below.

You can see a video of the latest version in the GitHub repo readme here or test out the app live at

Screenshot of win jar app

Screenshot of win jar app

Screenshot of win jar app

Screenshot of win jar app

And that's a wrap...for now 💭

I'll be honest - in true ADHD fashion, I had a stint of hyperfocus and the majority of this project was built in a couple of days before the end of the it was really helpful to utilise tools like AWS Amplify that make it easier and faster, and overall enjoyable! 🥲 Overall, I'm grateful for the hackathon opportunity, I'll be adding a few wins from this experience to my win jar for suuuure - there's so much more I want to play with and add (mentioned in the Future Improvements section), so I look forward to improving my little project over time 🙌💜