Persistamp 🐢

A Motivational 'Good Activities' Positivity App

TOC About ● Features ● How It Works ● Installation ● Development ● Contact Us

This 'productivity-positivity' app promotes good activities with positive reinforcement! 🌱 Create and keep track of your good activities. 🖍️ Analyze activity trends over time. 💯 Stay motivated by creating rewards in a reward shop. 🎁 Earn points by keeping up good activities. 💎 Redeem those hard-won points on rewards! 🧾

Try the Demo!

About Persistamp

[ WEBSITE: https://persistamp.herokuapp.com ] (Inspired by mobile app Loop Activity Tracker.)

Persistamp's design is inspired by reward cards and sticker reward systems. The visually playful 'program card' system, emulating the style of loyalty reward cards, is meant to encourage users to track their activities by 'stamping' successful days on their personalized cards. The user can view each activity's history analytics, such as a line graph, calendar, and statistics like longest streak.

With each stamp, the user gains points for the program the activity is included in. A program's reward shop can be stocked by the user with their own custom reward ideas ex. 'Take a day off', 'Enjoy a pumpkin spice latte', 'Play games for 1 hour', and set their cost, quantity, and custom color/icon appearance. Receipt rewards are displayed for posterity in a receipt-style log as 'proof of their purchase'.

Features

Create custom categories for activities with 'program cards'.
Add activities to programs, then stamp off every day a activity is fulfilled.
Set a activity's 'frequency'. Checkmarks will show when the week's goal is fulfilled.
Earn a 'reward point' for every activity stamp.
View a activity's history analytics through provided statistics, a line graph, and mini-calendar.
Share a activity's details or keep it private with a 'Public-Private' toggle.
Each program features a reward shop. Create rewards with a custom cost and (opt) quantity.
Use a program's points to redeem rewards. See it logged in a redemption history.
Customize the appearance of programs, activities, and rewards with a choice of color and icon.

Future Stretch Goals

Add friends
Accountability buddies
Messaging
User Profile page
Public/private user profile, programs
Custom frequency options to allow from 'out of any number', rather than only by 'week'. Ex. '3 days out of 30'.
(low) Option to archive and hide-archive activities.

How It Works

Tip: This ID card also works as the site's main navigation. Note the red button! It has many important uses, depending on the webpage.

Users can:

Make a program card

Add good activities

Stamp successful days

View activity history & details

Create rewards

Redeem rewards with points

1. Make a program card

To create a program, click the red stamp icon labeled 'Add' on your ID Card in the top-left corner.
Add a title, description (optional), color, and icon.
To edit or delete a program, click the pencil in the program's top-left corner (it will appear when you hover/click the card).
Tip: The color and icon of new programs default to your user setting icon and settings! Click the green 'Settings' button on your ID card to change them.

Program Ideas?

Exercise, Mental Health, Healthy Diet

Chores, Errands, Adulting Tasks

Learning, Self-teaching, Self-improvement

Social Obligations, Networking, Time for Loved Ones

2. Add good activities

To create a activity, click the + icon in the program card's top-left corner (hover/click card to see).
Add a title, description (optional), color, and icon.
Select a frequency. How many days per week is your goal?
To edit or delete a activity, click the circled icon on the activity's left side.
Tip: The color and icon default to the program's color/icon settings!
Tip: Change the order of activities with drag-n-drop.

Activity Ideas?

Chores: do the dishes, wash laundry, cook a healthy meal, take out trash

Socially: call mom, check e-mail, apply to jobs, send thank-you letters

Hobbies: read a book, draw for 10 minutes, bake bread, try a new recipe

Avoiding bad activities: don't smoke, don't doomscroll more than 30min, don't eat junk food

3. Stamp successful days

To add a stamp, click empty spots in the activity card to mark the day fulfilled for that activity.
To undo a stamp, reclick the stamp.
With enough stamps for a activity's frequency goal, any unstamped spots will now show a checkmark.
Warning! You can only add stamps for within the last seven days, so check in at least once a week.

4. View activity history and details

To see a activity's 'details page', click the name of the activity in its program card.
See the activity's general information in the top-right corner.
To toggle between 'monthly' and 'weekly' view for the line graph, select an option from the dropdown.
The activity can be edited from this page with your ID card's red pencil icon.
Note about privacy! Check the top-right area to find a 'Private' toggle. This setting allows or restricts other people from being able to see this page. To share your a detail page, check that 'Private' is untoggled, then copy-paste the page's URL.

5. Create rewards

Reward shop button in the top-left corner of program card

To see a program's reward points and shop, click the shop icon at the top-right corner of a program card.
To create a reward, when in the reward shop, click the red trophy icon on your ID card.
Add a title, description (optional), color, and icon.
Decide the point cost of the reward.
(Optional) Specify an available quantity for the reward. Leave it blank for no limit.
To edit or delete a reward, click the pencil in the reward certificate's top-left corner.
Tip: The color and icon default to the program's color/icon settings!
Note: The 'limit per member' option is included for a future feature that allows more than one person to subscribe to a program. It ensures that no one program's member can redeem more than a set amount of that reward. Leave it blank to default to no limit.

Reward Ideas?

Something yummy, like a snack, favorite drink, or candy.

A guilt-free present to yourself, like a book, a new laptop, or flowers.

'Fun time': Watch a movie, 2 hours of video games, free internet time.

A dream vacation, time off work, or a night out on the town!

6. Redeem rewards with points

To redeem a reward, click the 'Redeem' button on a reward certificate.
Confirm that you really want to redeem this reward, and the cost will be taken out from your points.
See previously redeemed rewards, including when they were redeemed, in the shop's Reward History.
Indulge yourself in your redeemed reward, or show the receipt to whoever will treat you for it. 💞
Note: If a reward is unable to be redeemed (not enough points, zero quantity), the Redeem button will show red and be unclickable.
Note: There are no refunds! All reward shop sales are final ;D .
Warning! It is possible to go into debt with negative points for a program by buying rewards, then removing more stamps from the program card than there are remaining points. Debt must be made up before earning new points.

Installation

Clone this repository.

git clone https://github.com/alimirakim/persistamp.git

Install dependencies.

pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt

Create a .env file based on the example with proper settings for your development environment.
Setup your PostgreSQL user, password, and database and make sure it matches your .env file.
Get into your pipenv, migrate your database, seed your database, and run your flask app.
```
pipenv shell
```
```
flask db upgrade
```
```
python seeder.py
```
```
flask run
```
To run the React App in development, cd into the react-app directory, then run npm start.

IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:
pipenv lock -r > requirements.txt
ALSO IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.

Development

DEV TOC Technologies ● Concepts ● Models ● Routes ● Wireframes ● Dev Snapshots

This section is kept in a separate document HERE. It details the technical aspects of this project's development. A few sample snapshots are below from the development process.