<div align="center">

![JavaScript](https://img.shields.io/badge/-JavaScript-f7df1e?style=flat-square&logo=JavaScript&logoColor=black)
![React](https://img.shields.io/badge/-React-61dafb?style=flat-square&logo=React&logoColor=white)
![CSS3](https://img.shields.io/badge/-CSS3-1572b6?style=flat-square&logo=CSS3&logoColor=white)
![Docker](https://img.shields.io/badge/-Docker-2496ed?style=flat-square&logo=Docker&logoColor=white)
![Python](https://img.shields.io/badge/-Python-3776ab?style=flat-square&logo=Python&logoColor=white)
![Flask](https://img.shields.io/badge/-Flask-black?style=flat-square&logo=Flask&logoColor=white)
![SQLAlchemy](https://img.shields.io/badge/-SQLAlchemy-d01f00?style=flat-square&logo=SQLAlchemy&logoColor=white)
![PostgreSQL](https://img.shields.io/badge/-PostgreSQL-336791?style=flat-square&logo=postgreSQL&logoColor=white)

<img src="readme/images/idc.png" alt="ID Navigation Card">


# Persistamp ๐Ÿข
## A Motivational 'Good Activities' Positivity App

**TOC**
[About](#about-persistamp) โ— [Features](#features) โ— [How It Works](#how-it-works) โ— [Installation](#installation) โ— [Development](#development) โ— [Contact Us](#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! ๐Ÿงพ
<!-- ๐ŸŽ€๐ŸŒป๐ŸŒท๐ŸŒผ   -->

![Dashboard webpage for Persistamp](https://i.postimg.cc/28VZZ4pm/linkedin-persistamp-updated.png)


### Try the Demo!
<a href="https://persistamp.herokuapp.com/"><img width="250px" src="readme/images/logo.PNG" alt="Persistamp" title="Click to try Persistamp!"></a>

</div>

---

<div align="center">

## About Persistamp

[[ WEBSITE: https://persistamp.herokuapp.com ]](https://persistamp.herokuapp.com)
*(Inspired by mobile app [Loop Activity Tracker](https://play.google.com/store/apps/details?id=org.isoron.uactivities&hl=en_US&gl=US).)*

</div>
<img src="readme/images/persistamp-1.gif" alt="Animated GIF of a program card for chore-related activities." width="50%" align="left">

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'.

<br clear="both">

## Features
</div>

* 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.
<!-- * Drag-n-drop to manually sort programs, activities, and rewards. -->

### 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.

<div align="center">

## How It Works
<img width="400px" src="readme/images/idc2.png" alt="ID Navigation Card">

***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.*

</div>

>
> **Users can:**
> 1. [Make a program card](#1-make-a-program-card)
> 2. [Add good activities](#2-add-good-activities)
> 3. [Stamp successful days](#3-stamp-successful-days)
> 4. [View activity history & details](#4-view-activity-history-and-details)
> 5. [Create rewards](#5-create-rewards)
> 6. [Redeem rewards with points](#6-redeem-rewards-with-points)
>

### 1. Make a program card
<img src="readme/images/program-card-empty.PNG" alt="Program cards" width="60%" align="right">

- 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.*
<!-- - Tip! Change the order of programs with drag-n-drop. -->

> **Program Ideas?**
> * Exercise, Mental Health, Healthy Diet
> * Chores, Errands, Adulting Tasks
> * Learning, Self-teaching, Self-improvement
> * Social Obligations, Networking, Time for Loved Ones

<br clear="both">

<div align="center">
  <img src="readme/images/form-program2.png" alt="Program form" width="100%">
</div>


### 2. Add good activities
<img src="readme/images/form-activity.PNG" alt="Activity form" width="50%" align="right">
<!-- <img src="readme/images/.PNG" alt="Filled program card"> -->
<!-- <img src="readme/images/.PNG" alt="Drag-n-drop gif"> -->

- 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

<br clear="both">


### 3. Stamp successful days
<!-- <img src="readme/images/.PNG" alt="Multiple program boards with stamps - column"> -->

- 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.*

<img src="readme/images/activity-row.png" alt="A activity row with stamps indicating fulfilled days." width="100%">


### 4. View activity history and details
<img src="readme/images/activity-history-3.PNG" alt="Line graph" width="48%" align="right">

- **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.*
<!-- - Add notes explaining the types of scores, their meanings. -->
<br>
<div align="center">
<img src="readme/images/activity-details-page.PNG" alt="Line graph" width="100%">
</div>
<!-- <img src="readme/images/activity-history-2.PNG" alt="Line graph" width="48%"> -->
<!-- <img src="readme/images/activity" alt="Calendar"> -->
<!-- <img src="readme/images/activity" alt="Statistics"> -->

<br clear="both">

### 5. Create rewards

<div align="center">
<img src="readme/images/program-header.png" alt="Reward shop button in the top-left corner of program card" title=""Reward shop button in the top-left corner of program card">
</div>
<img src="readme/images/form-reward.PNG" alt="Reward form" align="right" width="50%">
<br>

- **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!
>

<br clear="both">

<div align="center">
<img src="readme/images/reward-certificate-2.PNG" alt="Reward certificate for ice cream" width="48%">
<img src="readme/images/reward-certificate-3.PNG" alt="Reward certificate for a new bike" width="48%">
<img src="readme/images/reward-page.PNG" alt="Reward shop page screenshot" width="100%">
</div>


### 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.*

<img src="readme/images/form-redeem.PNG" alt="Redemption form" width="62%">
<img src="readme/images/receipt.PNG" alt="Receipt" width="32%">


<div align="center">

## Installation

</div>

1. Clone this repository.

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

2. Install dependencies.

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

3. Create a `.env` file based on the example with proper settings for your
   development environment.

4. Setup your PostgreSQL user, password, and database and make sure it matches your `.env` file.

5. Get into your pipenv, migrate your database, seed your database, and run your flask app.

   ```bash
   pipenv shell
   ```

   ```bash
   flask db upgrade
   ```

   ```bash
   python seeder.py
   ```

   ```bash
   flask run
   ```

6. 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:
>
>    ```bash
>    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.
>


<div align="center">

  ## Development

  **DEV TOC**
  [Technologies](readme/development.md#technologies) โ— [Concepts](readme/development.md#concepts) โ— [Models](readme/development.md#models) โ— [Routes](readme/development.md#routes) โ— [Wireframes](readme/development.md#wireframes) โ— [Dev Snapshots](readme/development.md#development-snapshots)

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

  <img src="readme/images/dev-2.PNG" height="200px">
  <img src="readme/images/dev-10.PNG" height="200px">
  <img src="readme/images/dev-9.PNG" height="200px">

</div>

---

<div align="center">

  ## Contact Us

  Thank you for taking a look at Persistamp! :D
  Please feel free to reach out and ask us anything.

</div>

### David Lee
*(Full-stack developer, Open to work)*
<a href="readme/Lee_David_Resume(v2.0).pdf" download>![Resume PDF](https://img.shields.io/badge/-Resume-f00?style=flat-square&logo=adobe-acrobat-reader&logoColor=white)</a>
[![David Lee's email](https://img.shields.io/badge/dyclee@umich.edu-f4b400?style=flat-square&logo=gmail&logoColor=black&link=mailto:dyclee@umich.edu)](mailto:dyclee@umich.edu)
[![LinkedIn](https://img.shields.io/badge/-LinkedIn-0077b5?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/daveyclee/)](https://www.linkedin.com/in/daveyclee/)
[![AngelList](https://img.shields.io/badge/-AngelList-black?style=flat-square&logo=AngelList&logoColor=white&link=https://angel.co/u/david-lee-332)](https://angel.co/u/david-lee-332)
[![GitHub dyclee](https://img.shields.io/github/followers/dyclee?label=follow&style=social)](https://github.com/dyclee)

### Alicia Mira Kim
*(Full-stack developer, Open to work)*
<a href="readme/Kim_Mira_Alicia_Resume.pdf" download>![Resume PDF](https://img.shields.io/badge/-Resume-f00?style=flat-square&logo=adobe-acrobat-reader&logoColor=white)</a>
[![Alicia's email](https://img.shields.io/badge/alicia.mira.kim@gmail.com-f4b400?style=flat-square&logo=gmail&logoColor=black&link=mailto:alicia.mira.kim@gmail.com)](mailto:alicia.mira.kim@gmail.com)
[![Blog](https://img.shields.io/badge/-Blog-21759b?style=flat-square&logo=WordPress&logoColor=white&link=https://aliciamirakim.com/)](https://aliciamirakim.com)
[![Linkedin](https://img.shields.io/badge/-LinkedIn-0077b5?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/alicia-mira-kim-416a0a41)](https://www.linkedin.com/in/alicia-mira-kim-416a0a41)
[![AngelList](https://img.shields.io/badge/-AngelList-black?style=flat-square&logo=AngelList&logoColor=white&link=https://angel.co/u/alicia-mira-kim)](https://angel.co/u/alicia-mira-kim)
[![Portfolio](https://img.shields.io/badge/-โค_Portfolio-f58?style=flat-square&logo=a&logoColor=white&link=https://alimirakim.github.io/)](https://alimirakim.github.io)
[![GitHub alimirakim](https://img.shields.io/github/followers/alimirakim?label=follow&style=social)](https://github.com/alimirakim)