Affirmations App

This app was designed and developed as a personal project of mine. It allows users to create, update, view, and delete groups of affirmations to boost their mood for specific life challenges.
Initial screen of Affirmations app
Affirmations homepage


The design is quite simple and straightforward. The user is instantly shown the affirmations slideshow when they arrive at the homepage. Upon further inspection the user will find the navigation showing three simple options; play, settings, info.
'PLAY' represents the homepage
'SETTINGS' brings the user to a page giving them access to all affirmation groups they currently have. From here the user can switch groups, create new groups, add affirmations, edit affirmations, and delete affirmations.
'ABOUT' brings the user to a page explaining how the application works and what it can do.
Initial screen of Affirmations app
left: Homepage (affirmations slideshow) • center: Navigation • right: Setup page (organize affirmations)


I was able to practice a lot of development concepts building this application. In addition to using packages I've used a lot in the past like React Router, I was able to use some new ones like Toastify to allow for UI feedback.
I decided to just use localStorage to store all user info for the project. My following planned projects include using databases, so I just decided to simplify this one and not use one here.
Initial screen of Affirmations app
left: Add affirmations • center: Edit affirmations • right: About page


There are some features I plan to add to this application. One is the ability to share affirmation groups with others. The other feature is to create some more stock lists of affirmations that a user can pull in so users don't always have to create them from scratch. Stay-tuned for those.

Technical Sheet

Code technologies I got involved with while working on this project:

  • React
  • Vite
  • MUI
  • Framer Motion
  • UUID
  • Toastify
  • Bootstrap
  • GitHub Pages