Affirmations

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.

Affirmations homepage

Design

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.

left: Homepage (affirmations slideshow) center: Navigation right: Setup page (organize affirmations)

About brings the user to a page explaining how the application works and what it can do.

Code

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.

Left: Add page (add affirmations); Center: Edit page (edit affirmations); Right: About page

Future

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

Resources

 • This project is online at:

Https://bretpeters3n.github.io/affirmations-vite/

 • This project is also available on github at:

GitHub - bretpeters3n/affirmations-vite
Contribute to bretpeters3n/affirmations-vite development by creating an account on GitHub.