+
+ );
+ }
+
+ const handleOk = () => {
+ navigate("/habits");
+ };
+
+ return (
+ Timer Finished
+Could not load habit details, but your session is done.
+ +
+
+ );
+}
diff --git a/client/src/pages/HabitDetail.jsx b/client/src/pages/HabitDetail.jsx
new file mode 100644
index 000000000..06e3ee972
--- /dev/null
+++ b/client/src/pages/HabitDetail.jsx
@@ -0,0 +1,72 @@
+// client/src/pages/HabitDetails.jsx
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+
+export default function HabitDetails() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const [habit, setHabit] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function loadHabit() {
+ try {
+ const res = await fetch(`http://localhost:3001/api/habits/${id}`);
+ if (!res.ok) {
+ console.error("Failed to load habit", res.status);
+ return;
+ }
+ const data = await res.json();
+ setHabit(data);
+ } catch (err) {
+ console.error("Error fetching habit:", err);
+ } finally {
+ setLoading(false);
+ }
+ }
+ loadHabit();
+ }, [id]);
+
+ async function handleDelete() {
+ if (!confirm("Delete this habit?")) return;
+ try {
+ const res = await fetch(`http://localhost:3001/api/habits/${id}`, {
+ method: "DELETE",
+ });
+ if (!res.ok && res.status !== 204) {
+ alert("Failed to delete habit");
+ return;
+ }
+ navigate("/habits");
+ } catch (err) {
+ console.error("Error deleting habit:", err);
+ alert("Error deleting habit");
+ }
+ }
+
+ if (loading) return {habit.title}
+Done!
++{pointsEarned} pts!
+Good job!
+ +Loading…
; + if (!habit) returnHabit not found
; + + return ( +
+
+ );
+}
diff --git a/client/src/pages/Habits.jsx b/client/src/pages/Habits.jsx
new file mode 100644
index 000000000..09f4dc04b
--- /dev/null
+++ b/client/src/pages/Habits.jsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function Habits() {
+ const navigate = useNavigate();
+
+ const [habits, setHabits] = useState([]);
+ const [showForm, setShowForm] = useState(false);
+ const [form, setForm] = useState({ title: "", description: "" });
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function fetchHabits() {
+ try {
+ const res = await fetch("http://localhost:3001/api/habits");
+ const data = await res.json();
+ setHabits(data);
+ } catch (err) {
+ console.error("Failed to load habits", err);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ fetchHabits();
+ }, []);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setForm((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!form.title.trim()) return alert("Please enter a title.");
+
+ try {
+ const res = await fetch("http://localhost:3001/api/habits", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ title: form.title,
+ description: form.description,
+ }),
+ });
+
+ if (!res.ok) {
+ const errData = await res.json().catch(() => ({}));
+ alert(errData.error || "Failed to create habit");
+ return;
+ }
+
+ const newHabit = await res.json();
+ setHabits((prev) => [newHabit, ...prev]);
+ setForm({ title: "", description: "" });
+ setShowForm(false);
+ } catch (err) {
+ console.error("Error creating habit", err);
+ alert("Something went wrong creating the habit.");
+ }
+ };
+
+
+ if (loading) {
+ return {habit.title}
+{habit.description || "No description provided"}
+ + {/* Habit actions row */} +
+
+
+ Edit
+
+
+
+ Loading habits...
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
new file mode 100644
index 000000000..e8c4530bf
--- /dev/null
+++ b/client/src/pages/Home.jsx
@@ -0,0 +1,8 @@
+export default function Home() {
+ return (
+ Your Habits
+Track and manage your daily habits here!
+ + + + {showForm && ( +
+
+ )}
+
+ Create Habit
+ + +-
+ {habits.length === 0 &&
- No habits yet. } + + {habits.map((h) => ( +
- navigate(`/habit/${h.id}`, { state: { habit: h } })}
+ style={{
+ padding: "10px",
+ margin: "10px 0",
+ border: "1px solid #ccc",
+ borderRadius: "5px",
+ cursor: "pointer",
+ }}
+ >
+ {h.title} – {h.description || "No description"}
+
+ + Created:{" "} + {h.created_at + ? new Date(h.created_at).toLocaleString() + : "Unknown"} + +
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/StickerGallery.jsx b/client/src/pages/StickerGallery.jsx
new file mode 100644
index 000000000..1b3c74001
--- /dev/null
+++ b/client/src/pages/StickerGallery.jsx
@@ -0,0 +1,8 @@
+export default function StickerGallery() {
+ return (
+ Welcome to Beam
+Hello World
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/TimerView.jsx b/client/src/pages/TimerView.jsx
new file mode 100644
index 000000000..6027048a5
--- /dev/null
+++ b/client/src/pages/TimerView.jsx
@@ -0,0 +1,153 @@
+// client/src/pages/TimerView.jsx
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useUser } from "../UserContext"; // whatever file you put UserContext in
+
+export default function TimerView() {
+ const { id } = useParams(); // habit id from route /habit/:id/timer
+ const navigate = useNavigate();
+ const { points, setPoints } = useUser(); // points shown in header
+
+ const [minutesInput, setMinutesInput] = useState("20");
+ const [secondsRemaining, setSecondsRemaining] = useState(0);
+ const [startedMinutes, setStartedMinutes] = useState(0);
+ const [isRunning, setIsRunning] = useState(false);
+ const [hasCompleted, setHasCompleted] = useState(false);
+ const [status, setStatus] = useState("");
+
+ // format MM:SS
+ const displayMinutes = Math.floor(secondsRemaining / 60)
+ .toString()
+ .padStart(1, "0");
+ const displaySeconds = (secondsRemaining % 60).toString().padStart(2, "0");
+
+ function handleStart() {
+ const mins = parseInt(minutesInput, 10);
+ if (!Number.isFinite(mins) || mins <= 0) {
+ alert("Enter a positive number of minutes");
+ return;
+ }
+ setStartedMinutes(mins);
+ setSecondsRemaining(mins * 60);
+ setHasCompleted(false);
+ setIsRunning(true);
+ setStatus("");
+ }
+
+ function handleCancel() {
+ setIsRunning(false);
+ setSecondsRemaining(0);
+ setStatus("Timer cancelled");
+ }
+
+ async function completeHabit() {
+ // prevent double calls
+ if (hasCompleted) return;
+ setHasCompleted(true);
+ setIsRunning(false);
+
+ try {
+ const res = await fetch(
+ `http://localhost:3001/api/habits/${id}/complete`,
+ {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ minutes: startedMinutes || 1 }), // award at least something
+ }
+ );
+
+ if (!res.ok) {
+ const errData = await res.json().catch(() => ({}));
+ console.error("Failed to complete habit:", errData);
+ alert(errData.error || "Server error when completing habit.");
+ return;
+ }
+
+ const data = await res.json();
+ console.log("Complete response:", data);
+
+ if (setPoints && typeof data.totalPoints === "number") {
+ setPoints(data.totalPoints);
+ }
+
+ setStatus(
+ `Done! +${data.pointsEarned ?? startedMinutes} pts. Total: ${
+ data.totalPoints ?? "?"
+ }`
+ );
+ } catch (err) {
+ console.error("Error calling /complete:", err);
+ alert("Network error when completing habit.");
+ }
+ }
+
+ // countdown effect
+ useEffect(() => {
+ if (!isRunning) return;
+
+ if (secondsRemaining <= 0) {
+ // reached zero → finish and award points once
+ completeHabit();
+ return;
+ }
+
+ const id = setInterval(() => {
+ setSecondsRemaining((prev) => prev - 1);
+ }, 1000);
+
+ return () => clearInterval(id);
+ // we deliberately don't include completeHabit in deps to avoid re-creating interval
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isRunning, secondsRemaining]);
+
+ // debug: finish immediately button
+ async function handleFinishNow() {
+ if (!startedMinutes) {
+ const mins = parseInt(minutesInput, 10);
+ if (Number.isFinite(mins) && mins > 0) {
+ setStartedMinutes(mins);
+ } else {
+ setStartedMinutes(1);
+ }
+ }
+ await completeHabit();
+ }
+
+ return (
+ Sticker Gallery
+ +
+
+ );
+}
diff --git a/client/src/style.css b/client/src/style.css
new file mode 100644
index 000000000..8df73e3b2
--- /dev/null
+++ b/client/src/style.css
@@ -0,0 +1,96 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+ filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/creatingHabits1.0.gif b/creatingHabits1.0.gif
new file mode 100644
index 000000000..296082fdb
Binary files /dev/null and b/creatingHabits1.0.gif differ
diff --git a/milestones/milestone1.md b/milestones/milestone1.md
index 52b9b0038..a8a6d6426 100644
--- a/milestones/milestone1.md
+++ b/milestones/milestone1.md
@@ -21,12 +21,12 @@ This unit, be sure to complete all tasks listed below. To complete a task, place
### 1. What went well during this unit?
-[👉🏾👉🏾👉🏾 your answer here]
+Our brainstorming process went really well. Everyone in the group contributed their thoughts and ideas, which helped us narrow down a solid direction for our project. We were able to collaborate effectively and communicate our goals clearly, which made it easier to get started.
### 2. What were some challenges your group faced in this unit?
-[👉🏾👉🏾👉🏾 your answer here]
+Interestingly, brainstorming was both our strength and our challenge. We had a lot of different ideas, and it was sometimes difficult to choose which one to focus on. It took time for everyone to agree on a final concept and ensure that it was realistic to complete within the given timeframe. In addition, we suspect occasional struggles with scheduling conflicts and making sure everyone is on the same page about the technical aspects of our plan.
### 3. What additional support will you need in upcoming units as you continue to work on your final project?
-[👉🏾👉🏾👉🏾 your answer here]
+As we move forward, we could use more guidance on how to code and implement some of the new ideas we want to include in our application. Having examples or tutorials related to similar projects would help us strengthen our technical approach. It would also be helpful to have a bit more dedicated time to work together as a group, so we can refine our ideas, troubleshoot issues, and make sure our project stays on track.
diff --git a/milestones/milestone2.md b/milestones/milestone2.md
index e3178cd81..f4a6027de 100644
--- a/milestones/milestone2.md
+++ b/milestones/milestone2.md
@@ -6,24 +6,24 @@ 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 group was able to get the ball rolling with clear ideas of what we wanted our website/app to look like. We discussed layouts, features, and design elements early on, which helped us visualize the overall direction of our project and stay organized as we moved forward.
### 2. What were some challenges your group faced in this unit?
-[👉🏾👉🏾👉🏾 your answer here]
+One of the main challenges we faced was paying attention to the small details that would make our website more engaging and appealing to users. We also had to think carefully about customer behavior, understanding what users might want or expect when navigating the app, which took time and thoughtful planning.
### 3. What additional support will you need in upcoming units as you continue to work on your final project?
-[👉🏾👉🏾👉🏾 your answer here]
+We may need additional guidance on improving the user interface and user experience design aspects of our project. Support in conducting user testing or receiving feedback on our layout and functionality would also help us refine our website/app to make it more intuitive and user-friendly.
diff --git a/milestones/milestone3.md b/milestones/milestone3.md
index 571ce7651..9492e9847 100644
--- a/milestones/milestone3.md
+++ b/milestones/milestone3.md
@@ -8,34 +8,34 @@ This unit, be sure to complete all tasks listed below. To complete a task, place
You will need to reference the GitHub Project Management guide in the course portal for more information about how to complete each of these steps.
-- [ ] In your repo, create a project board.
+- [x] In your repo, create a project board.
- *Please be sure to share your project board with the grading team's GitHub **codepathreview**. This is separate from your repository's sharing settings.*
-- [ ] In your repo, create at least 5 issues from the features on your feature list.
-- [ ] In your repo, update the status of issues in your project board.
-- [ ] In your repo, create a GitHub Milestone for each final project unit, corresponding to each of the 5 milestones in your `milestones/` directory.
- - [ ] Set the completion percentage of each milestone. The GitHub Milestone for this unit (Milestone 3 - Unit 7) should be 100% completed when you submit for full points.
-- [ ] In `readme.md`, check off the features you have completed in this unit by adding a ✅ emoji in front of the feature's name.
- - [ ] Under each feature you have completed, include a GIF showing feature functionality.
-- [ ] In this documents, complete all five questions in the **Reflection** section below.
+- [x] In your repo, create at least 5 issues from the features on your feature list.
+- [x] In your repo, update the status of issues in your project board.
+- [x] In your repo, create a GitHub Milestone for each final project unit, corresponding to each of the 5 milestones in your `milestones/` directory.
+ - [x] Set the completion percentage of each milestone. The GitHub Milestone for this unit (Milestone 3 - Unit 7) should be 100% completed when you submit for full points.
+- [x] In `readme.md`, check off the features you have completed in this unit by adding a ✅ emoji in front of the feature's name.
+ - [x] Under each feature you have completed, include a GIF showing feature functionality.
+- [x] In this documents, complete all five questions in the **Reflection** section below.
## Reflection
### 1. What went well during this unit?
-[👉🏾👉🏾👉🏾 your answer here]
+Setting up a clear project management structure went well. Our group established an organized workflow and communication plan, which helped everyone stay on the same page and understand their responsibilities.
### 2. What were some challenges your group faced in this unit?
-[👉🏾👉🏾👉🏾 your answer here]
+A major challenge was organizing the project into smaller, manageable issues that could be assigned to individual members. Many components of the project are interconnected, which made it difficult to isolate tasks without affecting others.
### Did you finish all of your tasks in your sprint plan for this week? If you did not finish all of the planned tasks, how would you prioritize the remaining tasks on your list?
-[👉🏾👉🏾👉🏾 your answer here]
+Yes, we completed all of our planned tasks for the week. Our tasks were primarily setup-based, including establishing the project structure, installing dependencies, rendering the database, and creating a solid project plan.
### Which features and user stories would you consider “at risk”? How will you change your plan if those items remain “at risk”?
-[👉🏾👉🏾👉🏾 your answer here]
+The image upload feature and implementation of more custom art are currently “at risk.” If we run short on time, we’ll prioritize completing our core features first and leave these as stretch goals to revisit later if time permits.
### 5. What additional support will you need in upcoming units as you continue to work on your final project?
-[👉🏾👉🏾👉🏾 your answer here]
+None at this time as our team feels confident moving forward with the current plan and structure.
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..a6096e566
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "codepath-web103-capstone",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}
diff --git a/planning/entity_relationship_diagram.md b/planning/entity_relationship_diagram.md
index 12c25f62c..e5ccc5229 100644
--- a/planning/entity_relationship_diagram.md
+++ b/planning/entity_relationship_diagram.md
@@ -4,14 +4,28 @@ Reference the Creating an Entity Relationship Diagram final project guide in the
## Create the List of Tables
-[👉🏾👉🏾👉🏾 List each table in your diagram]
+** User Table **
+| Column Name | Type | Description |
+|-------------|------|-------------|
+| userID | integer | primary key |
+| username | text | unique user alias |
+| password | text | login credential to access |
+| points | integer | points accuraled from mastering habits |
+| timeCreated | timestamp | how long the user has been with the app |
+
+** Habits Table **
+| Column Name | Type | Description |
+|-------------|------|-------------|
+| userID | integer | primary key |
+| habitName | text | habit to be tracked |
+| description | text | description of habit |
+| pointWeight | integer | how many points the user will recive from completing the habit |
+| frequency | integer | how frequent the user wants to do this habit |
+| duration | integer | how long the user wants to spend doing this habit |
+| status | text | if the user has already created habit into a habit |
## 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.]
-| Column Name | Type | Description |
-|-------------|------|-------------|
-| id | integer | primary key |
-| name | text | name of the shoe model |
-| ... | ... | ... |
+
diff --git a/planning/user_stories.md b/planning/user_stories.md
index 1e55ecbcd..9b074eea4 100644
--- a/planning/user_stories.md
+++ b/planning/user_stories.md
@@ -4,10 +4,19 @@ Reference the Writing User Stories final project guide in the course portal for
## Outline User Roles
-[👉🏾👉🏾👉🏾 Include at least at least 1, but no more than 3, user roles.]
+1. Student: with many tasks they need to organize
+2. New Grad/Young Adult: with unstructured time they need to plan
## Draft User Stories
-[👉🏾👉🏾👉🏾 Include at least at least 10 user stories in this format:]
+1. As a new grad trying to build healthy habits, I want a tool that will allow me to visualize the time I spend dedicated towards my goals.
+2. As a student with a long and varied to do list, I want a place to keep track of all my tasks so I can stay organized.
+3. As a new grad learning to manage my time independently, I want a way to track and celebrate small wins, so that I can stay motivated and recognize progress even when larger goals feel far away.
+4. As a new grad lacking motivation, I want my focus sessions and task completions to translate into in-app rewards or growth, so that I feel like my effort tangibly builds something over time.
+5. As student who values aesthetic satisfaction, I want the visualization of my progress to be beautiful and calming, so that opening the app feels rewarding and reflective rather than stressful.
+6. As a student who enjoys gamified structure, I want my habits and tasks to impact a virtual ecosystem, so that I associate productivity with care and positive reinforcement.
+7. As a new grad who wants accountability, I want the app to respond to my engagement—whether through progress decay or gentle reminders, so that I feel a sense of responsibility to maintain my virtual world.
+8. As a goal-oriented new grad, I want to quantify my progress through clear metrics, so that I can measure growth and set meaningful targets.
+9. As a student, I want to customize my task categories, visual themes, or icons, so that my to-do list feels personal and reflects my mindset or aesthetic preferences.
+10. As a new grad, I want to review past streaks, milestones, or visual changes in my world, so that I can appreciate long-term consistency and feel proud of my journey.
-1. As a [user role], I want to [what], so that [why].
diff --git a/planning/wireframes.md b/planning/wireframes.md
index fbcd15a0c..dd784585e 100644
--- a/planning/wireframes.md
+++ b/planning/wireframes.md
@@ -2,20 +2,41 @@
Reference the Creating an Entity Relationship Diagram final project guide in the course portal for more information about how to complete this deliverable.
+Timer
+ + + +
+ {displayMinutes}:{displaySeconds} remaining
+
+
+
+
+
+
+
+ {status && {status}
} + + +