user stories

README.md

@@ -1,49 +1,85 @@
-# [your app name here]
+# 🦸‍♂️ HabitHero
 
-CodePath WEB103 Final Project
+### CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+**Designed and developed by:**  
+Ricardo Beale, Vitaliy Prymak, Om Patki
 
-🔗 Link to deployed app:
+🔗 **Link to deployed app:** _coming soon_
 
-## About
+---
 
-### Description and Purpose
+## 🧩 About
 
-[text goes here]
+### 📝 Description and Purpose
+HabitHero is a fullstack web app that helps users build and track positive habits through small daily goals.  
+Each completed habit helps the user’s “hero” grow stronger, motivating consistency and self-improvement.  
+The app allows users to add, edit, and delete habits, view progress, and earn virtual achievements for streaks.
 
-### Inspiration
+### 💡 Inspiration
+We were inspired by apps like **Habitica** and **Duolingo** that combine productivity with fun.  
+Many people struggle to stay consistent, so we wanted to create something that makes tracking habits more engaging — turning discipline into a game.
 
-[text goes here]
+---
 
-## Tech Stack
+## ⚙️ Tech Stack
+- **Frontend:** React, React Router, Tailwind CSS  
+- **Backend:** Express.js, Node.js, PostgreSQL
 
-Frontend:
+---
 
-Backend:
+## 🌟 Features
 
-## Features
+### 🧠 Habit Dashboard
+Users can view all their habits in one place with progress tracking and streak counts.
 
-### [Name of Feature 1]
+### ➕ Add / Edit / Delete Habits
+Users can create new habits, update them, or remove them easily from their dashboard.
 
-[short description goes here]
+### 🧭 Filter by Category
+Users can filter or sort habits by category (e.g. Health, Learning, Mindset).
 
-[gif goes here]
+### 🦸 Default Habits on Signup
+When a new user creates an account, they automatically get 3 starter habits like:
+- “Drink Water”
+- “Read 10 Minutes”
+- “Stretch”
 
-### [Name of Feature 2]
+### 🔄 Progress Update on Same Page
+Users can mark habits as complete for the day **without leaving the dashboard** (handled on same page).
 
-[short description goes here]
+### 💬 Modal Confirmation
+A confirmation modal appears when deleting or completing a habit — no page navigation needed.
 
-[gif goes here]
+---
 
-### [Name of Feature 3]
+## 🔥 Bonus (Stretch Features)
+- Show motivational quotes or toast messages after completing habits  
+- Progress bar animations for hero level  
+- User login with simple authentication
 
-[short description goes here]
+---
 
-[gif goes here]
+## 💻 Installation Instructions
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
-
-## Installation Instructions
-
-[instructions go here]
+### 1. Clone the repository
+```bash
+git clone https://github.com/your-team/habithero.git
+```
+### 2. Install dependencies
+```bash
+cd habithero
+npm install
+cd client
+npm install
+```
+### 3. Create and seed the PostgreSQL database
+```bash
+npm run db:reset
+```
+### 4. Run both servers
+```bash
+npm run dev
+```
+### 5. Open the app
+- Visit: http://localhost:5173

milestones/milestone1.md

@@ -6,27 +6,24 @@ This document should be completed and submitted during **Unit 5** of this course
 
 This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets.
 
-- [ ] Read and understand all required features
-  - [ ] Understand you **must** implement **all** baseline features and **two** custom features
-- [ ] In `readme.md`: update app name to your app's name
-- [ ] In `readme.md`: add all group members' names
-- [ ] In `readme.md`: complete the **Description and Purpose** section
-- [ ] In `readme.md`: complete the **Inspiration** section
-- [ ] In `readme.md`: list a name and description for all features (minimum 6 for full points) you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features)
-- [ ] In `planning/user_stories.md`: add all user stories (minimum 10 for full points)
-- [ ] In `planning/user_stories.md`: use 1-3 unique user roles in your user stories
-- [ ] In this document, complete all thre questions in the **Reflection** section below
+- [x] Read and understand all required features
+  - [x] Understand you **must** implement **all** baseline features and **two** custom features
+- [x] In `readme.md`: update app name to your app's name
+- [x] In `readme.md`: add all group members' names
+- [x] In `readme.md`: complete the **Description and Purpose** section
+- [x] In `readme.md`: complete the **Inspiration** section
+- [x] In `readme.md`: list a name and description for all features (minimum 6 for full points) you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features)
+- [x] In `planning/user_stories.md`: add all user stories (minimum 10 for full points)
+- [x] In `planning/user_stories.md`: use 1-3 unique user roles in your user stories
+- [x] In this document, complete all thre questions in the **Reflection** section below
 
 ## Reflection
 
-### 1. What went well during this unit?
+1. What went well during this unit?
+👉🏾 We brainstormed and agreed quickly on a clear idea — HabitHero — a productivity and motivation app that helps users build daily habits. Our group collaborated well to define the main features, roles, and responsibilities. Everyone contributed ideas for the user stories and feature list.
 
-[👉🏾👉🏾👉🏾 your answer here]
+2. What were some challenges your group faced in this unit?
+👉🏾 It was a bit hard to narrow down which features to include since there are so many possible ideas for a habit tracker. We also had to make sure all required baseline features fit naturally into the project. Setting up the shared GitHub repo and assigning tasks clearly took some coordination time.
 
-### 2. What were some challenges your group faced in this unit?
-
-[👉🏾👉🏾👉🏾 your answer here]
-
-### 3. What additional support will you need in upcoming units as you continue to work on your final project?
-
-[👉🏾👉🏾👉🏾 your answer here]
+3. What additional support will you need in upcoming units as you continue to work on your final project?
+👉🏾 We may need extra help with database relationships (especially many-to-many) and setting up deployment on Render. Some of us also want guidance on connecting the backend API with React efficiently.

milestones/milestone2.md

@@ -6,24 +6,22 @@ This document should be completed and submitted during **Unit 6** of this course
 
 This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets.
 
-- [ ] In `planning/wireframes.md`: add wireframes for at least three pages in your web app.
-  - [ ] Include a list of pages in your app
-- [ ] In `planning/entity_relationship_diagram.md`: add the entity relationship diagram you developed for your database.
-  - [ ] Your entity relationship diagram should include the tables in your database.
-- [ ] Prepare your three-minute pitch presentation, to be presented during Unit 7 (the next unit).
-  - [ ] You do **not** need to submit any materials in advance of your pitch.
-- [ ] In this document, complete all three questions in the **Reflection** section below
+- [X] In `planning/wireframes.md`: add wireframes for at least three pages in your web app.
+  - [X] Include a list of pages in your app
+- [X] In `planning/entity_relationship_diagram.md`: add the entity relationship diagram you developed for your database.
+  - [X] Your entity relationship diagram should include the tables in your database.
+- [X] Prepare your three-minute pitch presentation, to be presented during Unit 7 (the next unit).
+  - [X] You do **not** need to submit any materials in advance of your pitch.
+- [X] In this document, complete all three questions in the **Reflection** section below
 
 ## Reflection
 
 ### 1. What went well during this unit?
-
-[👉🏾👉🏾👉🏾 your answer here]
+Our team did a great job organizing our ideas and visualizing the structure of our project. Creating the entity relationship diagrams helped us clearly understand how our database should be built. The wireframing process also went smoothly since several team members were familiar with Figma, which made it easier to design and collaborate efficiently.
 
 ### 2. What were some challenges your group faced in this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+One of the main challenges we faced was figuring out how to structure our data and connect the different parts of our database properly. It took some trial and error to make sure everything worked together logically. We also had to make sure everyone was on the same page about the project’s overall direction.
 
 ### 3. What additional support will you need in upcoming units as you continue to work on your final project?
-
-[👉🏾👉🏾👉🏾 your answer here]
+Moving forward, we might need more support with backend integration, especially how to connect our database to the front end of the website. Some guidance on best practices for implementing user authentication, managing data relationships, and deploying the project would also be helpful as we start to build everything out.

planning/entity_relationship_diagram.md

@@ -3,15 +3,82 @@
 Reference the Creating an Entity Relationship Diagram final project guide in the course portal for more information about how to complete this deliverable.
 
 ## Create the List of Tables
-
-[👉🏾👉🏾👉🏾 List each table in your diagram]
+- users
+- habits
+- habit_logs
+- achievements
+- user_achievements
+- badges
+- user_badges
 
 ## Add the Entity Relationship Diagram
 
-[👉🏾👉🏾👉🏾 Include an image or images of the diagram below. You may also wish to use the following markdown syntax to outline each table, as per your preference.]
+![Entity Relationship Diagram](db_relationship_diagram.png)
+
+### 🧍‍♂️ Users Table
+| Column Name   | Type                    | Description                                |
+| ------------- | ----------------------- | ------------------------------------------ |
+| id            | SERIAL PRIMARY KEY      | Unique user ID                             |
+| username      | VARCHAR(50)             | User’s display name                        |
+| email         | VARCHAR(100) UNIQUE     | User’s email                               |
+| password_hash | TEXT                    | Hashed password                            |
+| hero_level    | INTEGER DEFAULT 1       | Level of user’s hero based on achievements |
+| created_at    | TIMESTAMP DEFAULT NOW() | Date the user registered                   |
+
+
+### 📆 Habits Table
+| Column Name  | Type                                           | Description                                        |
+| ------------ | ---------------------------------------------- | -------------------------------------------------- |
+| id           | SERIAL PRIMARY KEY                             | Unique habit ID                                    |
+| user_id      | INTEGER REFERENCES users(id) ON DELETE CASCADE | The user who owns this habit                       |
+| name         | VARCHAR(100)                                   | Habit name (e.g., “Drink Water”)                   |
+| description  | TEXT                                           | Description of the habit                           |
+| date        | DATE                                            | Date for the tracked habit               |
+| completed   | BOOLEAN DEFAULT FALSE                           | Whether the habit was completed that day |
+
+
+
+### 📊 Habit Logs Table
+| Column Name | Type                                            | Description                              |
+| ----------- | ----------------------------------------------- | ---------------------------------------- |
+| id          | SERIAL PRIMARY KEY                              | Unique log ID                            |
+| habit_id    | INTEGER REFERENCES habits(id) ON DELETE CASCADE | Linked habit                             |
+
+
+### 🏆 Achievements Table
+| Column Name | Type               | Description                             |
+| ----------- | ------------------ | --------------------------------------- |
+| id          | SERIAL PRIMARY KEY | Unique achievement ID                   |
+| name        | VARCHAR(100)       | Achievement name (e.g., “7-Day Streak”) |
+| description | TEXT               | What the achievement represents         |
+| requirement | TEXT               | Criteria to earn this achievement       |
+| icon        | TEXT               | Icon or image for display               |
+
+
+### 🏅 User Achievements Table
+| Column Name    | Type                                                  | Description                      
+| -------------- | ----------------------------------------------------- | -------------------------------- 
+| id             | SERIAL PRIMARY KEY                                    | Unique record ID                 
+| user_id        | INTEGER REFERENCES users(id) ON DELETE CASCADE        | User who earned this achievement 
+| achievement_id | INTEGER REFERENCES achievements(id) ON DELETE CASCADE | Linked achievement               
+| earned_at      | TIMESTAMP DEFAULT NOW()                               | When it was unlocked             
+
+
+### 🎖️ Badges Table
+| Column Name    | Type               | Description                              |
+| -------------- | ------------------ | ---------------------------------------- |
+| id             | SERIAL PRIMARY KEY | Unique badge ID                          |
+| name           | VARCHAR(100)       | Badge name (e.g., “Consistency Star”)    |
+| description    | TEXT               | Description of the badge                 |
+| icon           | TEXT               | Icon or color associated with badge      |
+| level_required | INTEGER            | Minimum hero level or milestone required |
+
+
+### 💫 User Badges Table
+| Column Name | Type                                            | Description               |
+| ----------- | ----------------------------------------------- | ------------------------- |
+| id          | SERIAL PRIMARY KEY                              | Unique record ID          |
+| user_id     | INTEGER REFERENCES users(id) ON DELETE CASCADE  | User who earned the badge |
+| badge_id    | INTEGER REFERENCES badges(id) ON DELETE CASCADE | Badge earned by the user  |
+| earned_at   | TIMESTAMP DEFAULT NOW()                         | Date the badge was earned |
 
-| Column Name | Type | Description |
-|-------------|------|-------------|
-| id | integer | primary key |
-| name | text | name of the shoe model |
-| ... | ... | ... |

planning/features.md

@@ -0,0 +1,49 @@
+✨ Features
+🧩 1. User Authentication
+
+Users can create an account, log in, and log out securely.
+This ensures personal habit data is saved and accessible only to them.
+(Baseline feature)
+
+✅ 2. Habit Management (CRUD)
+
+Users can add, edit, delete, and mark habits as complete.
+Supports creating personalized habits with names, icons, and schedules.
+(Baseline feature — implements GET, POST, PATCH, DELETE requests)
+
+📊 3. Progress Dashboard
+
+Displays habit completion stats with weekly and monthly streaks.
+Users can visualize their progress with simple charts or streak counters.
+(Baseline feature)
+
+🏆 4. Achievement System
+
+Users earn badges or rewards for consistency (e.g., 7-day streaks).
+This feature auto-generates achievements when a condition is met.
+(Custom feature – “Data automatically generated in response to an event”)
+
+🔍 5. Filter and Sort Habits
+
+Users can filter habits by category (e.g., health, focus, lifestyle) or sort by completion rate.
+Helps organize and find habits easily.
+(Custom feature – “Filter or sort items based on criteria”)
+
+💬 6. Motivational Popup
+
+When users hit milestones or log habits for several days in a row, a modal pops up congratulating them.
+Adds fun interaction without leaving the page.
+(Baseline + nice UX addition)
+
+☁️ 7. Database Reset / Seed Data
+
+Developers can reset the database to default habits for demo or testing purposes.
+(Baseline backend feature requirement)
+
+🧠 8. Optional Stretch Features
+
+Toast notifications for success/error (e.g., “Habit added!” or “Error saving habit”)
+
+Loading spinner during form submissions
+
+User profile picture upload via cloud service

planning/user_stories.md

@@ -1,13 +1,33 @@
-# User Stories
+## User Roles
 
-Reference the Writing User Stories final project guide in the course portal for more information about how to complete each of the sections below.
+User: a person who creates and tracks their daily habits, goals, and progress.
 
-## Outline User Roles
+Admin: a person who manages the app, monitors user activity, and ensures everything runs smoothly.
 
-[👉🏾👉🏾👉🏾 Include at least at least 1, but no more than 3, user roles.]
+## User Stories
 
-## Draft User Stories
+👤 Role 1: Regular User
 
-[👉🏾👉🏾👉🏾 Include at least at least 10 user stories in this format:]
+As a user, I want to create an account and log in, so that I can save my habits and track progress over time.
 
-1. As a [user role], I want to [what], so that [why].
+As a user, I want to add new habits with custom names, icons, and schedules, so that I can track the activities that matter to me.
+
+As a user, I want to mark a habit as completed for the day, so that I can stay motivated and see my streak grow.
+
+As a user, I want to view a dashboard showing my weekly and monthly progress, so that I can visualize how consistent I’ve been.
+
+As a user, I want to edit or delete a habit, so that I can manage my list and keep it up-to-date.
+
+As a user, I want to receive motivational messages or badges when I reach streak goals, so that I stay encouraged.
+
+As a user, I want to filter my habits by category (e.g., health, productivity, mindfulness), so that I can quickly find what I’m working on.
+
+🧑‍🏫 Role 2: Admin 
+
+As an admin, I want to view all registered users and their progress summaries, so that I can understand overall app usage.
+
+As an admin, I want to remove inactive or duplicate accounts, so that the database remains clean.
+
+💬 Role 3: Guest / New Visitor
+
+As a guest, I want to explore a demo mode or preview habits without signing up, so that I can see how the app works before creating an account.