diff --git a/docs/agile docs/Living Document 0cfda53982fb40e0bb52a6b3a1228e37/StressLess_Demo.png b/docs/agile docs/Living Document 0cfda53982fb40e0bb52a6b3a1228e37/StressLess_Demo.png new file mode 100644 index 00000000..70984021 Binary files /dev/null and b/docs/agile docs/Living Document 0cfda53982fb40e0bb52a6b3a1228e37/StressLess_Demo.png differ diff --git a/docs/agile docs/Living Document 0cfda53982fb40e0bb52a6b3a1228e37/image 2.png b/docs/agile docs/Living Document 0cfda53982fb40e0bb52a6b3a1228e37/image 2.png deleted file mode 100644 index 71406c93..00000000 Binary files a/docs/agile docs/Living Document 0cfda53982fb40e0bb52a6b3a1228e37/image 2.png and /dev/null differ diff --git a/docs/agile docs/Living Document.md b/docs/agile docs/Living Document.md index 3b755ed0..f69c27bb 100644 --- a/docs/agile docs/Living Document.md +++ b/docs/agile docs/Living Document.md @@ -255,9 +255,7 @@ Our system consists of several key software components that interact to provide ### d) Diagram of StressLess system's architecture. -[https://docs.google.com/presentation/d/1bnXGg1ByNbccVPqFxQus0D66CyCj5prQ6tJ-d1poBzU/edit?usp=sharing](https://docs.google.com/presentation/d/1bnXGg1ByNbccVPqFxQus0D66CyCj5prQ6tJ-d1poBzU/edit?usp=sharing) - -![image.png](Living%20Document%200cfda53982fb40e0bb52a6b3a1228e37/image%202.png) +![StressLess Demo.png](Living%20Document%200cfda53982fb40e0bb52a6b3a1228e37/StressLess_Demo.png) ### e) Assumptions underpinning our chosen architecture @@ -422,7 +420,7 @@ Find an optimal schedule which gives her enough time to attend her practicals, s ### **Trigger** -Julie receives her practical and curriculum schedules at the beginning of the semester. +Julie brainstorms productivity times as well as her start/end times for her workday. ### **Preconditions** @@ -430,20 +428,19 @@ Julie has set blocks of times in which she knows she has to be at school or at t ### **Postconditions** -Julie gets a custom schedule integrating all of her set responsibilities generated, which suggests available time for self-care and friends/family. +Julie is able to take a survey accounting for her productivity times and work hour preferences. ### **Flow:** 1. Julie opens the homepage of the app and completes the sign-up process. -2. Julie takes the survey . -3. Input major upcoming dates practical shifts and curriculum exams into the calendar (i.e. dates, locations, times) -4. Calendar becomes populated, including major upcoming dates as well as suggested study blocks, practical shift preparation times, self-care hours, and days for family and friends +2. Julie takes the survey. +3. Julie saves her responses. ### **Alternative Flow:** -1. Julie’s professor has an unexpected family emergency mid-semester, and thus, her curriculum schedule changes. -2. Julie clicks the “Retake Survey” button in the profile page. -3. She can update the old dates according to the new schedule, and the app will adjust to these changes by customizing her schedule again and developing new suggested times for other activities such as studying and hanging out with family and friends. +1. While filling out the survey, Julie realizes she had input the wrong productivity times in her response. +2. She drags the slider to edit her productivity times. +3. Then, her changes are saved after she saves her responses. ## Use Case 4 diff --git a/docs/agile docs/Sprint 4/Speaker Notes for Demo.pdf b/docs/agile docs/Sprint 4/Speaker Notes for Demo.pdf new file mode 100644 index 00000000..6922bac0 Binary files /dev/null and b/docs/agile docs/Sprint 4/Speaker Notes for Demo.pdf differ diff --git a/docs/agile docs/Sprint 4/Sprint 4 Demo.pdf b/docs/agile docs/Sprint 4/Sprint 4 Demo.pdf new file mode 100644 index 00000000..32c78d5a Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint 4 Demo.pdf differ diff --git a/docs/agile docs/Sprint 4/Sprint 4 Demo.pptx b/docs/agile docs/Sprint 4/Sprint 4 Demo.pptx new file mode 100644 index 00000000..02ed9e7b Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint 4 Demo.pptx differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 1.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 1.png new file mode 100644 index 00000000..0b29811f Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 1.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 2.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 2.png new file mode 100644 index 00000000..ccbad152 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 2.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 3.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 3.png new file mode 100644 index 00000000..8e009a64 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 3.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 4.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 4.png new file mode 100644 index 00000000..03de35fd Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 4.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 5.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 5.png new file mode 100644 index 00000000..5094e9ad Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 5.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 6.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 6.png new file mode 100644 index 00000000..e7b80282 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 6.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 7.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 7.png new file mode 100644 index 00000000..b532d719 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 7.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 8.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 8.png new file mode 100644 index 00000000..55b8bd92 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 8.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 9.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 9.png new file mode 100644 index 00000000..f5463c01 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image 9.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image.png b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image.png new file mode 100644 index 00000000..17f883f2 Binary files /dev/null and b/docs/agile docs/Sprint 4/Sprint Journal 4 1d581728581b80c481bff79f466f1475/image.png differ diff --git a/docs/agile docs/Sprint 4/Sprint Journal 4.md b/docs/agile docs/Sprint 4/Sprint Journal 4.md new file mode 100644 index 00000000..ba518430 --- /dev/null +++ b/docs/agile docs/Sprint 4/Sprint Journal 4.md @@ -0,0 +1,1045 @@ +# Sprint Journal 4 + +## 1. **External Documentation and Stakeholder Meetings** + +### **Overview** + +- Who you tested it with. Name, occupation, other relevant information about the test user + - Istar - computer science and sociology major and senior + - Nina - intended major physics and German, freshman + - Maral- computer science and statistics concentration and a second year +- Date and time of the test session + - Istar - Mon 4/21/2025 3:00 - 4:00 pm + - Nina - Tues 4/22/2025 11:00 - 11:30 am + - Maral- Fri 4/25/2025 4:00 - 5:00 pm + +### Meeting with Istar + +- Description of the test session and feedback + - Istar first attempted to sign up. She put her email, password, and display name. Then, she put in all her preferences. After, she tried the editing feature and checked if it worked for her. Then, Nifemi routed her to the calendar page. Alyssa prompted her to add and delete events. Lastly, she tried to log in and log out of her account, which worked +- What was their behavior of interacting with the documentation? + - Istar first used the documentation to make sure she was signing up correctly. After signing up, she did not refer to the documentation and it seemed that she found the sign-up process pretty intuitive. + - When filling out the preference form, she filled the first questions by herself and referred to the documentation once, to make sure she was doing the right thing. + - Next, her account profile was created, and she attempted to edit the form (before editing, she again referred to the documentation. + - When editing the calendar, Alyssa prompted her to add/delete events, so she did not refer to the documentation. + - Finally, Tim prompted her to try to log in her account, which succeeded! She did not refer to the documentation for this task. +- Did they succeed or get stuck? + - Istar succeeded in her first two tasks of signing up and filling in the preference form (and editing it). Furthermore, she she seemed to be able to seamlessly get through the calendar interface without looking at the documentation. +- What feedback did they provide about documentation? + - Can be organized better, but is easy to read due to its conciseness +- What questions did you ask, and what were the stakeholder's answers? + - How easily were you able to navigate the product? + - Navigating the website was not as easy as Istar thought. She felt that the preference form was not intuitive, and the documentation was not in order. + - Did the help guides help you understand how to use the app or was there anything that could be explained better? + - The documentation was helpful for Istar, but she felt that it was out of order. + - What feature do you think was the most useful for you in the product? + - Dragging and dropping! + - What features did you like about the product? + - Dark and light mode design + - Was there anything that was unclear or confusing while using the product + - Navigating between preferences + - If there is anything that you would change about this product to make it easier for you to navigate/be more explanatory, if so what would it be? + - Move the “Already have an account” prompt on the bottom of the “Log in” box +- Changes based on stakeholder feedback: + - Provide user-facing documentation within the app + - Be more specific for the survey questions form. For example, explain the units that the answers should be in (hours, minutes, etc.) + - Make sure survey question help page is consistent with the information provided in the survey questions form itself in terms of units. It is important that the help pages and other user-facing documentation is updated at the speed of our development progress. + +--- + +### Meeting with Nina + +- **Description of the test session and feedback** + - Nina was initially confused about whether she should enter her personal information during sign-up. + - After she submitted the form, the page reloaded and erased her input—we think the program was running incorrectly, as it had worked for Alyssa before. + - The program was re-run, and after Nifemi fixed the issue, she created a new account using a different Gmail. + - She was directed to the preference page, which she filled out with ease. + - She discovered the sidebar and navigated to her user profile. + - She noticed that the sleep value she entered as “8” was displaying as “-8.5” in her preferences. + - She edited her name successfully. + - She returned to the calendar page easily. + - She was confused about how to add an event and asked to see the help page. + - After reading that she could drag pre-existing events, she attempted to do so. + - When she tried to rename a dragged event, she only saw an option to delete it. + - Alyssa explained that she had to click on a date to create a new event and reminded her to use the help guide. + - Nina successfully found the weekly view and could move through months easily. + - She also used dark mode without issues. + - She did not know that she could change the duration of events in weekly mode. + +--- + +- **What was their behavior of interacting with the documentation?** + - Nina asked to see the help page when she was confused about adding events. + - She followed the instructions and tried dragging a pre-existing event. + - When she tried to rename the event but only got a delete option, Alyssa reminded her to click on a date to create a new event. + - Outside of this situation, Nina did not heavily rely on the documentation, suggesting that she found most of the interface easy to navigate. + +--- + +- **Did they succeed or get stuck?** + - Nina ran into a bug during her first sign-up attempt, but after the issue was fixed, she successfully created an account. + - She easily completed the preference form and profile editing. + - She navigated the calendar and sidebar features successfully. + - She was confused about event creation and renaming, but after viewing the documentation and receiving some verbal instructions, she was able to proceed. + - She was not aware of the option to change event durations in weekly view, which may suggest the need for clearer UI indicators or documentation support. + +--- + +- **What questions did you ask, and what were the stakeholder's answers?** + - How easily were you able to navigate the product? + - Going between profile and calendar was explanatory + - Adding an event was a bit confusing + - Did the help guides help you understand how to use the app or was there anything that could be explained better? + - Help guide for adding a custom event should be a little more specific + - What feature do you think was the most useful for you in the product? + - Having a calendar to see all of the events in one place + - Was there anything that was unclear or confusing while using the product + - Didn’t know what she could do with the events like dragging them or dragging them to specific times + - If there is anything that you would change about this product to make it easier for you to navigate/be more explanatory, if so what would it be? + - Have a pop up guide for the calendar about different features that she can do would be helpful +- **Changes Based on Feedback** + - A change based on feedback is to have one help guide of relevant features per page like having the relevant features per page to help making it less confusing. It’s not one long overwhelming to the user + +### Meeting with Maral + +**Description of the Test Session and Feedback** + +- Maral was guided through accessing the Help page and understood the landing page was the home page. +- Clicked **"Get Started"** and carefully read through the account options. +- Asked clarifying questions about account creation, such as whether any username could be used and if the password could be seen while typing. +- Successfully created an account and entered her productivity preferences. +- Mentioned her most productive hours were **11 PM–3 AM**, but the form did not support that range. +- Entered specific values for work (130 minutes), sleep (8 hours), start of day (9 AM), and end of day (2 AM)—received an error due to cross-day input. +- Easily interacted with the calendar by dragging and creating events. +- Attempted to edit an event but only saw a delete option. +- Asked about an unknown button next to Month/Week view. +- Navigated through months and created events without difficulty. +- Asked if emojis could be added and whether the navbar (Profile/Calendar) was functional. +- Noticed that editing productive hours defaulted to original values instead of her custom ones—found this odd. +- Logged out and back in, and was pleased that her preferences were saved. +- Loved that the app recognized her login status and allowed quick access to the dashboard. +- Mentioned wanting to see her password using the **eye emoji** icon. + +--- + +**What Was Maral's Behavior When Interacting with the Documentation?** + +- Accessed the Help page when shown how to do so. +- Did not return to the documentation on her own; preferred to ask questions in real time. +- Used verbal questions to resolve confusion about features (e.g., unknown buttons, editing limitations). + +--- + +**Did Maral Succeed or Get Stuck?** + +- **Succeeded:** + - Navigated onboarding and account creation smoothly. + - Understood and inputted work/sleep preferences. + - Dragged and created calendar events easily. + - Explored navigation bar, profile, and dashboard. + - Logged out and logged in successfully; preferences were retained. +- **Got Stuck or Confused:** + - Could not set productivity hours that extend past midnight (11 PM–3 AM). + - Received an error for an "end of workday" value of 2 AM (cross-day issue). + - Noticed that productive hours editing reverted to default values. + - Found only a delete option when trying to edit events. + - Unclear about the purpose of a button next to Month/Week views. + +--- + +- **What questions did you ask, and what were the stakeholder's answers?:** + - How easily were you able to navigate the product? + - It was really easy to navigate + - Comparing to the paper prototype, thought the paper was cool, but noticed that selecting times for events was missing. + - **Did the help guide help you understand the app, and was there anything better that could be done?** + - Only looked at the first two sentences, had a lot of scrolling + - App was intuitive to use without the help guide + - What feature do you think was the most useful in the product + - Dragging events, but could have event customization. + - Was there anything that was unclear or confusing while using the product? + - I don’t think so, but not being able to edit events and some buttons that did not do anything. + - Not a single stakeholder tried that button + - Is there anything to change about this product to make it easier to navigate or make it more explanatory? + - Navigation was very easy, and there isn’t a need to change anything. I like that the explanations are not too wordy, since we have very short attention spans. + - How can you make the help button better? + - The first sentences could be better since we can make each help button specific to each page. +- **Proposed changes based on stakeholder feedback:** + - Restructure the help button so that it does not contain a list of FAQs or instructions for the entire application. Instead, provide context-sensitive information for each page. + - Handle work hours that occur overnight in the user preferences survey rather than rejecting them + - Populate survey questions form with saved answers when user is trying to edit them + +## 2. Internal Documentation Lab + +### Subgroup 1: Alyssa & Madel + +- Identify the code that you worked with in the lab (e.g. calico.java, lines 1-437) + - Alyssa:Responses.ts, lines 1-53 and user_routes.ts, lines 1-17 + - Madel: env.test.ts, lines 1-36 +- Write a paragraph to describe the changes that you made to the code and the documentation + - Alyssa: I had my code commented already, so I didn’t need to add much. I added numbered steps in the Responses.ts file though, so it was easier to follow. There was a point Madel thought I was accessing the answers and not the questions. So I added numbers, so the steps were more clear that first we were accessing the questions, then we were finding the users answers, and then we were storing them in the array. + - Madel: I had already had descriptive documentation on my code, so I did not need to add much descriptions, as Alyssa confirmed that what I put was helpful. What I ended up adding was just an extension to my current documentation, which further described what lines 16-18 do in the file env.test.ts. +- Identify existing documentation that was helpful + - Alyssa: The documentation I had for about every 2-4 lines helped Madel process what was happening within each section of the code. + - Madel: The current documentation I had which described each chunk of code helped Alyssa to identify what each line of code was doing. +- Identify the commit hash of the commit in which you wrote your new documentation. Provide a Github link where your instructor can view the diff of that commit. + - Alyssa: commit hash: bacc0c74325d542c040c0ad6811b4b5e4a86a541 + + diff of commit: [https://github.com/StressLess-Team/StressLess/pull/63/commits/bacc0c74325d542c040c0ad6811b4b5e4a86a541](https://github.com/StressLess-Team/StressLess/pull/63/commits/bacc0c74325d542c040c0ad6811b4b5e4a86a541) + + - Madel: commit hash: 8c501a0da8f3ef81b7de43968dcc81fec9ef88e7 + diff of commit: [https://github.com/StressLess-Team/StressLess/commit/8c501a0da8f3ef81b7de43968dcc81fec9ef88e7](https://github.com/StressLess-Team/StressLess/commit/8c501a0da8f3ef81b7de43968dcc81fec9ef88e7) +- If you created or updated any issues in your issue tracker, show a "before" and "after" snapshot of the detailed view of each issue so that the difference can clearly be seen + - Madel (Before) + + ![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image.png) + + - Madel (After) + * Only added a comment because the whole Trello task was not completed yet. + + ![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%201.png) + + +### Subgroup 2: Nifemi & Tim + +- Identify the code that you worked with in the lab (e.g. calico.java, lines 1-437) + - We looked at controllers/EventController.ts, routes/index.ts (the entire files, since they are about 150 lines in total). +- Write a paragraph to describe the changes that you made to the code and the documentation + - We did not make any changes to the code. However, we discussed how we can invoke the EventController functions from the frontend. This will help us make sure we are able to add or delete calendar events. We added documentation at the top of the file to describe the purpose of EventController. In the documentation, we explained how HTTP requests can be used by the frontend to invoke the functions that EventController has. +- Identify existing documentation that was helpful + - Tim has already documented the functions within the EventController. +- Identify the commit hash of the commit in which you wrote your new documentation. Provide a Github link where your instructor can view the diff of that commit. + - [https://github.com/StressLess-Team/StressLess/pull/58/commits/e87b97dcaa5964dcf2e5f486550989425e8183c5](https://github.com/StressLess-Team/StressLess/pull/58/commits/e87b97dcaa5964dcf2e5f486550989425e8183c5) + - Commit hash e87b97dcaa5964dcf2e5f486550989425e8183c5 +- If you created or updated any issues in your issue tracker, show a "before" and "after" snapshot of the detailed view of each issue so that the difference can clearly be seen + - N/A + +### Subgroup 3: Khanh & Cheyanne + +- Identify the code that you worked with in the lab + - Khanh: `frontend/app/calendar/page.tsx`, `docs/dev docs/ui-styling/light-and-dark-mode.md, global-css-guide.md, shadcnui-guide.md` +- Write a paragraph to describe the changes that you made to the code and the documentation + - added all those markdown files to describe how styling is done on the frontend, syntax on how to change colors based on light and dark mode, how we are using prebuilt accessible UI components from ShadcnUI. + - Khanh made the change to a line for the draggable item to show Cheyanne how reading the docs would help her know how to configure light and dark theme on the calendar page but then deleted it to let Cheyanne do it later on. +- Identify existing documentation that was helpful + - Seeing how the dark feature was used to switch colors on the landing page and `global.css` (understanding code) + - There was no existing documentation +- Identify the commit hash of the commit in which you wrote your new documentation. Provide a Github link where your instructor can view the diff of that commit. + - https://github.com/StressLess-Team/StressLess/commit/2f450b9c4cc3085c87a875ab5785f28d75dc8754 + - commit hash: 2f450b9c4cc3085c87a875ab5785f28d75dc8754 +- If you created or updated any issues in your issue tracker, show a "before" and "after" snapshot of the detailed view of each issue so that the difference can clearly be seen + +before: + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%202.png) + +after: + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%203.png) + +## 3. **Self-Selected Work toward Minimum Viable Product (MVP)** + +### **MVP Description** + +The MVP is a **smart calendar scheduler** designed to help students optimize their time. It integrates user-specific information such as class schedules, sleep times, and peak study hours. Key features of the MVP include: + +- Full authentication and authorization system +- Ability for users to input and update preferences +- Interactive calendar with the capability to add events and deadlines +- Automated scheduling of study blocks based on user input and class schedule + +### **Chosen Work** + +To contribute toward building the MVP, we focused on both frontend and backend components of the app. Our completed tasks include: + +- Implemented **unit tests for all API endpoints** using a **separate testing database** to ensure stability and correctness +- Developed full **CRUD (Create, Read, Update, Delete)** API endpoints for events and deadlines +- Built out the **navigation bar and** **help-pop up** for improved user experience +- Finalized the **authentication system**, including **route protection** and a **log out** feature to enhance security +- Began exploring the logic and structure for the **automated scheduling algorithm** that will assign study times based on user preferences and availability + +### Remaining Work + +Although significant progress has been made, several core components are still needed to complete the MVP: + +- **Calendar API Call Integrated:** Although we have defined all endpoints for Create-Read-Update-Delete (CRUD) for events and deadlines, the frontend needs to call these endpoints. Hence, we still have to integrate these calls. +- **Study Scheduling Algorithm**: Finalize and implement the algorithm that automatically schedules study blocks based on user preferences, class times, and deadlines (Backend work). Then make the frontend display the automatically scheduled calendar. + +### Plan for Completion + +- To make API calls from the frontend, the frontend developers will work with the backend developers to accomplish this. Since the frontend is usable, about 4 team members will work on making the correct API requests upon loading the page, adding an event, editing an event, and deleting an event. We also need to do the corresponding actions for deadlines, so some work on the frontend is needed to make a distinction between event and deadline. All of this can be worked on right now and does not depend on any other work, so we expect to finish it before the final presentation. +- The scheduler algorithm will involve two parts: parsing data from the database and the scheduler algorithm itself. The scheduler algorithm will add time blocks to the calendar for working towards deadlines. We plan on creating a simple algorithm which respects the user’s working style preferences but may not guarantee maximum efficiency of the schedule, speeding up development for the MVP. Since all work for this is done on the backend, we will only need 2 team members. Potentially one team member might be needed for the creation of “deadlines” as a separate calendar item in addition to events. Nonetheless, since our data schema is determined, the work for the scheduler algorithm can be done right now and does not depend on frontend work, so we also expect to finish it. + +## 4. **Generative AI Experiment** + +*Your team will choose one or more ways to use generative AI towards your learning, writing, and/or product development relevant to this sprint's work. **Each member of your team must participate actively** in the use of AI and the following reflection, either individually or in a pair/trio programming setup.* + +### a. Khanh’s usage of AI in generating text for write-ups + +**Name the members of your team who tried it:** + +Khanh + +**Going into this use of AI, what were your goals and expectations?** + +Before this sprint, I have noticed how tiresome it can sometimes be to manually write up tons of documentations, design docs, sprint planning, sprint journal, sprint review and whatnot and so I have an expectation that this use of AI will help make this process less painful and much more time efficient so I can focus on coding. My goal is to be a better student and engineer with the help of AI, not letting it take over my job but use it with thoughtful prompt. I have done my own debugging by making an icon that when I click will print out the `user.displayName`. I verified that it prints out the correct name but still render the default fallback. + +**Describe the use specifically in detail. How did you prompt the AI, and what was its output?** + +- **Context**: I was working on the view of our web app and was running into a bug. I was trying to render the authenticated user’s display name, but it always render the default fallback instead. I couldn’t figure out what was the problem with my code but I do know it’s because it takes longer to fetch the authenticated user’s information than rendering a string on screen and it doesn’t rerender once the information arrived. +- **Prompt to Chat GPT:** I copy pasted code snippet that I think has the bug: + +```tsx + const { user, loading } = useAuth(); + // Using state to hold user preferences + const [userPreferences, setUserPreferences] = useState | null>(null); + // Using state to open page + const [open, setOpen] = useState(false); + // Using state to set edit username + const [editMode, setEditMode] = useState(false); + // Using state to set display name + const [displayName, setDisplayName] = useState( + user?.displayName || 'Studious Student' + ); + + useCallback(() => { + if (user) { + setDisplayName(user.displayName || 'Studious Student'); + } + }, [user]); +``` + +Along with this text: “why when i open this page, it still render "Studious Student", but when I console log user.displayName it correctly return the name”. + +- **Chat GPT Output:** + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%204.png) + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%205.png) + +- I went further and asked it to explain to me the difference between React `useEffect` and `useCallback` to learn and not just blindly follow its advice. Its output: + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%206.png) + +**How did this use of AI affect your product development or other sprint deliverables?** + +The result is that I was able to debug and our web page now render the correct name. I also learnt important differences between two critical React hooks. + +**If you integrated any of its output directly into your code base, include a link to a pull request where the generated output can be clearly distinguished.** +[https://github.com/StressLess-Team/StressLess/pull/74/](https://github.com/StressLess-Team/StressLess/pull/74/) + +**Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations?** + +I think because of my detailed prompt (giving it the code snippet, providing it with context and knowledge gained from my own debugging), the AI was able to identify the problem right away and helped me solved it. It also taught me about the bug and how to move on from there. I’d say it definitely achieved my goals and conformed to my expectations. + +### b. Alyssa’s usage of AI in partially generating code or documentation + +**Name the members of your team who tried it:** Alyssa + +**Going into this use of AI, what were your goals and expectations?** + +My goal of using AI is to have the AI help me understand how to debug and fix code, so I can see why certain code isn’t working the way I thought it was. When I ask AI, I want it not just to help fix the code, but explain to me why it isn’t working, so it can help my learning and understanding, so I’m not just fixing bugs because it works, but I can understand why they aren’t working the way they are supposed to. + +**Describe the use specifically in detail. How did you prompt the AI, and what was its output?** + +I prompted the AI to ask about why the where clause for the Prisma CRUD functions was giving an error for the following functions: putDeadline and deleteDeadline. + +**Prompt to ChatGPT:** *Why is the where clause giving me an error both both of these functions* + +/* + +* Updates a deadline + +*/ + +public static async putDeadline(req: Request, res: Response) { + +try { + +const values = this.getUserDeadlineValues(req); + +const result = await prisma.user_deadlines.update({ + +where: {event_id: req.params.event_id}, + +data: { ...values }, + +}); + +res.json(result); + +} + +catch { + +res.status(404).json({ error: 'Not found' }); + +} + +} + +/* + +Deletes a deadline + +*/ + +public static async deleteDeadline(req: Request, res: Response) { + +try { + +const deadline = await prisma.user_deadlines.delete({ + +where: { + +event_id: req.params.event_id + +} + +}); + +res.json(deadline); + +} + +catch { + +res.status(404).json({ error: 'Not found' }); + +} + +} + +**Chat GPT’s Response** + +The issue likely lies in the way you're using where: { event_id: req.params.event_id } in both your putDeadline and deleteDeadline functions. + +**Here's what could be going wrong:** + +✅ **1. Your event_id might not be the primary key.** + +In Prisma, the where clause for .update() and .delete() **must** uniquely identify a record—usually using the **primary key**. + +If event_id is **not** the primary key of the user_deadlines table, then using it alone in where will throw an error like: + +Argument where for update/delete requires a unique identifier + +✅ **2. Check your Prisma schema** + +Look at your schema.prisma file for the user_deadlines model. Example: + +prisma + +CopyEdit + +model user_deadlines { + +id        String   @id @default(uuid()) + +userId    String + +event_id  String + +deadline  DateTime + +} + +In this example, id is the primary key, not event_id. You can only use: + +ts + +CopyEdit + +where: { id: req.params.id } + +—unless event_id is marked as @id or part of a composite primary key like: + +prisma + +CopyEdit + +@@id([userId, event_id]) + +Then you'd need: + +ts + +CopyEdit + +where: { userId_event_id: { userId: req.user.id, event_id: req.params.event_id } } + +✅ **3. How to fix it** + +You have two options: + +**A. Change the where clause to use the correct unique identifier:** + +ts + +CopyEdit + +where: { id: req.params.id } // assuming 'id' is your PK + +**B. Define a unique constraint on event_id (if that's appropriate):** + +prisma + +CopyEdit + +model user_deadlines { + +id        String   @id @default(uuid()) + +event_id  String   @unique // if event_id should be unique + +... + +} + +✅ **4. Double-check req.params.event_id** + +Make sure it's actually being passed in the route and is a string (or converted correctly). + +Let me know your user_deadlines Prisma model if you're not sure—I'll tell you exactly what the where should be! + +**If you integrated any of its output directly into your code base, include a link to a pull request where the generated output can be clearly distinguished.** + +I didn’t copy and paste anything exactly from ChatGPT, but I did take its advice and changed the event_id to just the id and not the user_id like it should be when calling the code. I change req.params.event_id to req.params.id + +[https://github.com/StressLess-Team/StressLess/pull/67/files](https://github.com/StressLess-Team/StressLess/pull/67/files) + +**Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations?** + +I think ChatGPT was able to help me achieve my goals. My goal was to be able to understand why certain bugs have an error in my code and how to fix those bugs. Originally I thought that I was supposed to retrieve the event id and not the actual id. I also thought that the original issue was that I was calling where and that I would have to switch to calling data or another function instead of where instead. However, ChatGPT helped me understand that it wasn’t the where that was the issue with my code, it was what I was accessing inside the where. There was another point that I thought it could potentially be user id as well. ChatGPT helped me understand that the where clause wasn’t working because I was using the wrong type of id in the code. ChatGPT helped me understand why the where clause wasn’t working and how I was referencing the wrong fields. I should be accessing id instead of event id or the user id. I don’t want to access the user_id for these specific functions because I don’t want all of the user’s deadlines and user_id, only the specific one. I want to use id because id accesses each individual event because it is marked with an id type making each id unique while event id is marked with a string type meaning multiple events could have the same event_id which is why we would use id when accessing or modifying a specific deadline in the code. + +### c. Madel’s use of AI for generating documentation in (future) source code files + +1. Name the members of your team who tried it. + + Madel + +2. Going into this use of AI, what were your goals and expectations? + + I used AI, specifically ChatGPT, to generate documentation in my source code files. Before getting into this, I set out a goal to get a deeper understanding of what each built-in function in my code does. I expected that ChatGPT would be very helpful for this tasks, as I have used it in a previous project to help me understand my code on a deeper level. + +3. Describe the use specifically in detail. How did you prompt the AI, and what was its output? + + I prompted ChatGPT by asking it the question, “Can you explain aysnc and await in coding for me like i am 10 years old?” The bot responded with the following answer: + + ![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%207.png) + +4. How did this use of AI affect your product development or other sprint deliverables? If you integrated any of its output directly into your code base, include a link to a pull request where the generated output can be clearly distinguished. + + This use of AI actually developed my product development in a very productive way. Usually, I am used to just plugging in built-in functions to my code, and I often do not even fully understand what their true purpose is. However, by prompting ChatGPT to explain the purpose of a certain built-in function at the most basic level, I develop a better understanding of the function and learn how to use its implementation fully, rather than relying on documentation all the time. Although this new knowledge of mine is not implemented into my documentation yet, it will be in a future task or sprint! + +5. Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations? + + My use of AI achieved my goal to a very high extent. I ended up learning exactly how a given built-in function works, and I even found myself being able to explain what it does without using the internet anymore. The use of AI conformed to my expectations, because as previously mentioned, I have used ChatGPT to explain built-in functions to me before, and it has been really useful! + + +### d. Cheyanne’s Use of AI + +Usage 1: + +**1. Going into this use of AI, what were your goals and expectations?** + +The goal was to see how someone like Maral would naturally use the app without much help. We wanted to find out if the app was easy to understand, if anything was confusing, and how well it worked overall. We expected Maral to ask questions and explore, and she did exactly that. We thought she might run into issues with setting times that go past midnight or editing events, and that did happen. At the same time, we were hoping she would notice and appreciate the features that work well, like how her preferences were saved after logging out. Overall, the test helped show what parts of the app are working and what parts still need to be improved + +**2. Describe the use specifically in detail. How did you prompt the AI, and what was its output?** + +prompt: + +answer these using bullet points: - **Description of the test session and feedback** + +- **What was their behavior of interacting with the documentation?** +- **Did they succeed or get stuck?** +- **Did they succeed or get stuck?** + +use the testers name Maral + +**Raw Input:** + +first we showed her how to acess the help page and said the landing page is the home page, she pressed get started button, read description on whether or not she had an account, she asked do i just create anything as in any username. she asked can you look at the password as you type. then she made an account and said her most productive is 11pm to 3am which is not supported by our form. enterted works for 130 minutes and sleeps for 8 hours start of workday is 9am and the end of workday she typed 2am but got an error message that it must be in the same day but she meant 2am the next day. she easily dragged events and then tried to edit the event1 but it only gave option to delete (not implemented yet) she asked what the button is next to month/week(we are not sure the function) she easily chnaged the months and made events. she asked can she go here(the naviagition bar with profile and calandar) she asked if she can add emojis. she noticed that when she goes to edit her productive hours time it defaults to orginal times instead of her previous entry(she found it a bit odd). she logs out and logs back in and its impressed that she can sign in and see her preferenced are saved. she said that she wants to see her password after she entered it with the eye emoji. she loved how once she was signed in the changed route to landing page the page said she was already signed in and then she clicked the button go the dashboard + +Output: + +- **Description of the Test Session and Feedback** + +--- + +- Maral was guided through accessing the Help page and understood the landing page was the home page. +- Clicked **"Get Started"** and carefully read through the account options. +- Asked clarifying questions about account creation, such as whether any username could be used and if the password could be seen while typing. +- Successfully created an account and entered her productivity preferences. +- Mentioned her most productive hours were **11 PM–3 AM**, but the form did not support that range. +- Entered specific values for work (130 minutes), sleep (8 hours), start of day (9 AM), and end of day (2 AM)—received an error due to cross-day input. +- Easily interacted with the calendar by dragging and creating events. +- Attempted to edit an event but only saw a delete option. +- Asked about an unknown button next to Month/Week view. +- Navigated through months and created events without difficulty. +- Asked if emojis could be added and whether the navbar (Profile/Calendar) was functional. +- Noticed that editing productive hours defaulted to original values instead of her custom ones—found this odd. +- Logged out and back in, and was pleased that her preferences were saved. +- Loved that the app recognized her login status and allowed quick access to the dashboard. +- Mentioned wanting to see her password using the **eye emoji** icon. + +--- + +**What Was Maral's Behavior When Interacting with the Documentation?** + +- Accessed the Help page when shown how to do so. +- Did not return to the documentation on her own; preferred to ask questions in real time. +- Used verbal questions to resolve confusion about features (e.g., unknown buttons, editing limitations). + +--- + +**Did Maral Succeed or Get Stuck?** + +- **Succeeded:** + - Navigated onboarding and account creation smoothly. + - Understood and inputted work/sleep preferences. + - Dragged and created calendar events easily. + - Explored navigation bar, profile, and dashboard. + - Logged out and logged in successfully; preferences were retained. +- **Got Stuck or Confused:** + - Could not set productivity hours that extend past midnight (11 PM–3 AM). + - Received an error for an "end of workday" value of 2 AM (cross-day issue). + - Noticed that productive hours editing reverted to default values. + - Found only a delete option when trying to edit events. + - Unclear about the purpose of a button next to Month/Week views. + +**3. How did this use of AI affect your product development or other sprint deliverables?** + +Using AI during this test really helped me move faster with product development. Instead of spending half an hour organizing Maral’s feedback, I was able to quickly turn her experience into a clear summary. + +**4. Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations?** + +The use of AI mostly met my goals and matched my expectations. I wanted help turning Maral’s feedback into something organized and useful for the team, and AI did exactly that. It helped me clearly identify where she got stuck, what she liked, and what needed improvement. I expected AI to make the process faster and easier. + +Usage 2: + +**1. Going into this use of AI, what were your goals and expectations?** + +--- + +My primary goal in using AI during this sprint was to streamline the documentation process for our user testing sessions. I had a lot of raw observational notes that needed to be cleaned up and formatted in a structured way to be shared with the team. I expected AI to help me turn those notes into polished bullet-point outlines that aligned with the format we were using for all test participants. + +--- + +**2. Describe the use specifically in detail. How did you prompt the AI, and what was its output?** + +**Prompt I gave the AI:** + +> rewrite this so it uses bullet points +> + +**Raw Input I gave the AI:** + +> Meeting with Nina +> +> +> she was confused if she should put in her own personal information for the sign up area +> +> once she signed up the page reloaded and got rid of all her information(we think we ran it wrong since before it was just working for Alyssa +> +> We re ran the program and asked her to create an account, nefemi fixed the issue so then she was directed to the preference page (she made a new random account with a dif gmail) +> +> she filed out the preference page pretty easily +> +> she found the side bar and got to her user profile +> +> when she saw her preferences the sleep she entered was 8 but it showed -8.5 when she went to edit her sleep +> +> changed her name easily +> +> found her way back to the calander easily +> +> was confused on how to add an event and asked to see the help page and see that she can drag pre existing events so she goes to try that +> +> then once she dragged the event she tried to re name her event but when she clicked it it just asked her if she wanted to delete it. Alyssa had to tell her that she has to click on a date to create an event. alyssa remeined her to use tot help guide when she needs +> +> easily found how to see weekly view +> +> easily moved through the months +> +> used dark mode easily +> +> didnt know she could change the duration of the event when in the weekly mode +> + +**AI Response:** + +> **Description of the test session and feedback** +> +> - **Nina** +> - Nina was initially confused about whether she should enter her personal information during sign-up. +> - After she submitted the form, the page reloaded and erased her input—we think the program was running incorrectly, as it had worked for Alyssa before. +> - The program was re-run, and after Nifemi fixed the issue, she created a new account using a different Gmail. +> - She was directed to the preference page, which she filled out with ease. +> - She discovered the sidebar and navigated to her user profile. +> - She noticed that the sleep value she entered as “8” was displaying as “-8.5” in her preferences. +> - She edited her name successfully. +> - She returned to the calendar page easily. +> - She was confused about how to add an event and asked to see the help page. +> - After reading that she could drag pre-existing events, she attempted to do so. +> - When she tried to rename a dragged event, she only saw an option to delete it. +> - Alyssa explained that she had to click on a date to create a new event and reminded her to use the help guide. +> - Nina successfully found the weekly view and could move through months easily. +> - She also used dark mode without issues. +> - She did not know that she could change the duration of events in weekly mode. + +--- + +- **What was their behavior of interacting with the documentation?** + - **Nina** + - Nina asked to see the help page when she was confused about adding events. + - She followed the instructions and tried dragging a pre-existing event. + - When she tried to rename the event but only got a delete option, Alyssa reminded her to click on a date to create a new event. + - Outside of this situation, Nina did not heavily rely on the documentation, suggesting that she found most of the interface easy to navigate. + +--- + +- **Did they succeed or get stuck?** + - **Nina** + - Nina ran into a bug during her first sign-up attempt, but after the issue was fixed, she successfully created an account. + - She easily completed the preference form and profile editing. + - She navigated the calendar and sidebar features successfully. + - She was confused about event creation and renaming, but after viewing the documentation and receiving some verbal instructions, she was able to proceed. + - She was not aware of the option to change event durations in weekly view, which may suggest the need for clearer UI indicators or documentation support. + +--- + +**3. How did this use of AI affect your product development or other sprint deliverables?** + +Using AI significantly improved the speed and quality of the test description with Nina. Instead of spending extra time rewording and formatting the user testing notes manually, I was able to hand over the raw notes to the AI and get back a clean, polished outline within seconds. + +--- + +**4. Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations?** + +The AI completely met my expectations. It was able to interpret my shorthand notes and format them into a clear structure that matched the style I had previously created. It handled phrasing, organization, and indentation just as I requested. This not only saved time but also ensured a consistent tone and layout across user reports. + +### e. Nifemi’s Use of AI + +--- + +**1. Going into this use of AI, what were your goals and expectations?** + +My main goal was to save time and reduce the work of writing well-structured GitHub issues for our sprint. I expected the AI to help generate clear, concise, and actionable issue templates based on rough outlines or requirements I provided. I also hoped it would improve consistency across the issues. + +--- + +**2. Describe the use specifically in detail. How did you prompt the AI, and what was its output?** + +I gave chat a description of what the issue is for “Change time format in preference form to standard time” and “Preference page not intuitive” and I also gave it the format that I wanted: + +A description of what the issue is and why it’s an issue + +steps to reproduce (What are the steps for someone unfamiliar with the issue to see it) + +expected behavior(what we want it to look like) + +Fix suggestion + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%208.png) + +--- + +**3. How did this use of AI affect your product development or other sprint deliverables?** + +It saved me time and helped me express the UX problem in a way that was immediately understandable to devs. Instead of spending time formatting and wording the issue properly, I could actually use that time to fixing the issue. The generated issue was added directly to our GitHub board and helped move the improvement forward. + +--- + +**4. Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations?** + +It achieved my goal in terms of the issue coming out clearer than what I could’ve written myself, but I went in and aligned it better to my taste and formatting preferences, but it definitely cut down the time it would’ve taken me. + +### f. Tim’s use of AI for generating tutorials between frontend and backend work + +--- + +**1. Name the members of your team who tried it.** + +Tim Yu + +**2. Going into this use of AI, what were your goals and expectations?** + +I wanted to use AI to generate short explainers or tutorials on how to send requests from the frontend to the backend. Many online pages that describe this is irrelevant and uses different libraries for sending requests, for example. I thought that using AI would be more concise and relevant to our project specifically. + +**3. Describe the use specifically in detail. How did you prompt the AI, and what was its output?** + +I provided ChatGPT 4o (April 24, 2025) with some information on the structure of the tutorial/explainer page I want to make for the frontend developers. I give it some examples of functions, libraries, and the database schema we are using so the chatbot understands examples on how we might want to use the API. While the output followed the structure for the most part, it assumed some things, like the directory structure, which I did not provide, meaning I had to manually read and edit the output. + +The prompt and output can be viewed below: + +Prompt: + +```markdown +Canvas Please fill in the following documentation meant to teach an undergraduate student on how to use an Express backend: + +# How to Use the Backend +*Note: This text is partially generated using a large language model.* + +## In short, what are HTTP requests? + +## How can you send HTTP requests? + +Let's consider the following controller: +```typescript +/** + * Adds a new event to database using values in the request. + * @param req.body - Fields have the same names of the columns in the + * `user_events` table. `id` will be ignored since an UUID will be generated. + */ + public static async postEvent(req: Request, res: Response) +``` +with the following database schema: +```prisma +model user_events { + id String @id @default(uuid()) + user_id String + title String @db.VarChar(255) + start_time DateTime @default(now()) + end_time DateTime? + description String? + location_place String? @db.VarChar(255) + is_recurring Boolean @default(false) + recurrence_pattern String? @db.VarChar(255) + recurrence_start_date DateTime? + recurrence_end_date DateTime? + is_generated Boolean @default(false) + break_time String? + created_at DateTime @default(now()) +} +``` + +The controller is linked to the following route +```typescript +// Add an event +router.post('/events', EventController.postEvent); +``` +which can be accessed using the URL `/api/calendar/events`. + +### What are API routes and controllers in Express? + +### Using the `axios` library from the frontend to access the API + +## Testing the backend using `supertest` +``` + +Outputs: + +```markdown +# How to Use the Backend + +*Note: This text is partially generated using a large language model.* + +## In short, what are HTTP requests? + +HTTP (Hypertext Transfer Protocol) requests are the foundation of communication between clients (like browsers or mobile apps) and servers on the web. There are several types of HTTP requests, also known as methods, but the most common ones include: + +- `GET`: Retrieve data from the server. +- `POST`: Send data to the server, usually to create something new. +- `PUT`: Update existing data on the server. +- `DELETE`: Remove data from the server. + +These requests usually contain: + +- A URL (endpoint) +- A method (e.g., GET, POST) +- Headers (e.g., authentication tokens) +- A body (for POST/PUT requests) containing the data to be sent + +## How can you send HTTP requests? + +There are several ways to send HTTP requests, including: + +- **Frontend JavaScript**: Using `fetch` or libraries like `axios` +- **Backend code**: Using libraries like `axios`, `node-fetch`, or built-in Node.js HTTP modules +- **Command line tools**: Such as `curl` +- **API testing tools**: Like Postman or Insomnia + +## What are API routes and controllers in Express? + +In an Express application, API routes define the endpoints the frontend can call, and controllers contain the logic for handling those requests. + +For example: + +```typescript +router.post('/events', EventController.postEvent); +``` + +- This route listens for POST requests at `/events`. +- It delegates the request to `EventController.postEvent`, which is a function responsible for processing the request. + +### Controller Function Example + +```typescript +public static async postEvent(req: Request, res: Response) { + // Logic to insert a new event into the database +} +``` + +The controller reads the request body (`req.body`), validates it, and interacts with the database using an ORM like Prisma. + +## Using the `axios` library from the frontend to access the API + +To send data from the frontend to this backend endpoint, you can use `axios` like so: + +```javascript +import axios from 'axios'; + +const newEvent = { + user_id: '1234', + title: 'Study Session', + start_time: new Date().toISOString(), + end_time: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(), + description: 'Math revision', + location_place: 'Library', + is_recurring: false, +}; + +axios.post('/api/calendar/events', newEvent) + .then(response => { + console.log('Event created:', response.data); + }) + .catch(error => { + console.error('Error creating event:', error); + }); +``` + +Make sure the API endpoint `/api/calendar/events` is correctly proxied or reachable by your frontend. + +## Testing the backend using `supertest` + +You can test your Express routes using the `supertest` library, which lets you simulate HTTP requests in your tests. + +Example test for `postEvent`: + +```typescript +import request from 'supertest'; +import app from '../src/app'; // Your Express app instance + +describe('POST /api/calendar/events', () => { + it('should create a new event', async () => { + const response = await request(app) + .post('/api/calendar/events') + .send({ + user_id: 'test-user', + title: 'Test Event', + start_time: new Date().toISOString(), + }); + + expect(response.status).toBe(200); // or 201, depending on your setup + expect(response.body).toHaveProperty('id'); + expect(response.body.title).toBe('Test Event'); + }); +}); +``` + +This test checks if the route correctly creates an event and returns the expected response. +``` + +> Done! The guide now covers HTTP requests, Express routes and controllers, how to use `axios` from the frontend, and how to test your backend with `supertest`. If you’d like examples for other HTTP methods or more in-depth explanation of Express concepts, just let me know! +> + +**3. How did this use of AI affect your product development or other sprint deliverables? If you integrated any of its output directly into your code base, include a link to a pull request where the generated output can be clearly distinguished.** + +We often are confused when reading documentation for technologies we use since the tech stack (the full set of technologies) that a documentation presumes we use are different. By specifying the technologies we use when letting AI generate documentation, I can create communications that are more targeted to our current project and spend less time worrying about how to describe how to use certain technologies to each other. + +Link to pull request: [https://github.com/StressLess-Team/StressLess/pull/85](https://github.com/StressLess-Team/StressLess/pull/85) + +**4. Refer back to your answer to question 2. To what extent did the use of AI achieve your goals and conform to your expectations?** + +While I was able to use the AI to create documentation, it got the general ideas right, and it was relatively tailored to our technologies, I realized several difficulties. First, I need to ensure I include all the technologies and directory structure used in our project, or else the AI chatbot will output incorrect assumptions about where code is located (for instance, the Express app instance can be accessed from testing using `../index` rather than `../src/app` ). Likewise, it does not have full understanding of certain libraries we are using, like Prisma, since it assumed Prisma required a date to be converted to a string, but the Prisma documentation says it does not need to. Altogether, while AI could generate concise and relevant documentation, it fell short in some details both because of missing information during my prompting as well as incorrect “knowledge” about the libraries we are using. + +## 5. Demo Presentation + +### a. Summary of new features + +- User’s preferences answers are shown on Profile Page. Before, it uses default values. Now, it fetches the data from the backend to show on the frontend. +- When an user edit their preferences and save their new preferences, the database is updated with the new answers. When the users come back to their Profile Page, that new information replaced the old one. +- When an user add an event (either by dragging or submitting a form), that event is added to the database. +- There is now a side-bar (or called hamburger menu) that centralizes all routes that we have: Calendar, Profile Page. Upon signed-in, user is routed to `/dashboard` where they can click on the side-bar button to show navigations to other places of the app. +- There is now a Log out button that log the user out. +- If the user is not signed-in (or not authenticated), they can only route to `/` . Meaning if they try to go to `/dashboard`, they will be automatically redirected. +- If the user is signed-in (or is authenticated), they will not see the Sign up, Sign in form on the landing page `/`, but they will have the option to click on a button that says `Go to dashboard`. +- There is now a Help button on the top right corner of the app. Upon clicking, a pop-up will appear that says how to use the app in detailed. + +**Client-invisible Updates** + +- API Endpoints Create-Read-Update-Delete (CRUD) operation for events and deadlines, ready to be integrated end-to-end. +- Backend Fake Data and Table set up for unit testing as well as API Endpoints unit tests written. +- Continuous Deployment pipeline implemented: Our deployment for both frontend and backend on Render works. We added a Github Action for deployment that automatically trigger redeployment upon commit to the `main` branch. + +### b. How to start-up and activate these new features + +**Initial Set-Up** + +1. **Clone the Repo**: Visit our [GitHub Repository](https://github.com/StressLess-Team/StressLess/tree/development) and follow the instructions in the README to clone the project. You need node and pnpm to run the project. +2. **Install Dependencies**: At the root of the project, run `pnpm install` to install necessary packages. +3. **Configure Environment Variables**: Obtain the `.env` files from a team member and place them in the appropriate directories (`/frontend` and `/backend`). There are a total of 3 files you need. +4. **Start the App Locally**: +- Go to `frontend/` and `pnpm dev`. +- Go to `backend/` and run `pnpm exec prisma generate`. Then, run `pnpm start`. +- The frontend should run on `http://localhost:3000`, and the backend on `http://localhost:3001` (or as specified in your `.env` file). + +**Feature Walkthrough** + +1. **User Preferences Display on Profile Page** + - Sign in or create an account. + - Click the **hamburger menu** (top-left corner) and navigate to **Profile Page**. + - You will see your personal preferences (e.g., sleep time, study peak time) displayed. These are fetched directly from the backend. +2. **Editing and Saving Preferences** + - On the **Profile Page**, edit any of the input fields (e.g., change your sleep time). + - Click **Save Preferences**. + - Your preferences will be updated in the database. + - Refresh or revisit the Profile Page to confirm your changes are reflected. +3. **Adding New User Event** + - On the **Calendar Page**, open console log via **Inspect** (Developer Tools). + - Add a new event by clicking on a time slot, add title, click **Create**. + - Verified changes made to the **Neon** database and the console log. + - Do the same thing but by dragging the Event 1 into a timeslot instead. +4. **Navigation with Sidebar (Hamburger Menu)** + - After logging in, you are routed to `/dashboard`. + - Click the **menu icon (≡)** in the top-left corner. + - You will see navigation options to **Calendar** and **Profile Page**. + - Click any of these to route through the app. +5. **Authentication-Based Routing** + - If **not signed in**, you are only allowed to access `/` (the landing page). + - Try navigating to `/dashboard` — you will be redirected back to `/`. + - If **signed in**, the `/` page changes: + - Instead of Sign In/Up forms, you will see a **Go to Dashboard** button. + - Clicking it will take you to `/dashboard`. +6. **Log Out Feature** + - While logged in, click the **Log Out** button (top-right corner or sidebar). + - You will be redirected to the landing page. + - Attempting to access `/dashboard` again will now redirect you away unless you sign in. +7. **Help Button Popup** + - On any page after signing in, locate the **Help** button (top-right corner). + - Click it — a **popup modal** will appear with detailed usage instructions and tips on how to use the app. + +**Client-Invisible Updates (for developers)** + +To test backend/API updates: + +1. **CRUD Endpoints for Events and Deadlines** + - Use tools like **Postman** or frontend integration (coming soon) to test creating, reading, updating, and deleting events. +2. **Unit Testing & Test Environment** + - Run `pnpm test` in the backend to execute all unit tests. + - Tests are run against a separate test database, ensuring real data is unaffected. +3. **Continuous Deployment** + - All commits to the `main` branch automatically trigger re-deployment via **GitHub Actions**. + - Both frontend and backend are hosted on **Render**, ensuring live updates with every merge. + +![image.png](Sprint%20Journal%204%201d581728581b80c481bff79f466f1475/image%209.png) + +Our backend api will not be provided to the public but our frontend deploy is served at [https://stressless-frontend.onrender.com/](https://stressless-frontend.onrender.com/). Please know that we use the free tier of Render and so it will take several minutes to start up. + +# Changes to Living Document + +The differences can be found here: [https://github.com/StressLess-Team/StressLess/compare/a1a62c8..8198b0e](https://github.com/StressLess-Team/StressLess/compare/a1a62c8..8198b0e) + +It can also be found at Pull Request #90. \ No newline at end of file diff --git a/docs/agile docs/Sprint 4/SprintReview4.md b/docs/agile docs/Sprint 4/SprintReview4.md new file mode 100644 index 00000000..f3ac9d01 --- /dev/null +++ b/docs/agile docs/Sprint 4/SprintReview4.md @@ -0,0 +1,46 @@ +# Sprint Review 4 + +During this sprint, we updated the frontend by adding a user help guide, adding a sidebar to be able to navigate from the calendar page to the user route page, and users can now edit their display name on their user profile. We also edited questions in the frontend, so they are more consistent with the rest of the questions like instead of half of them being in military time and the other half of the questions being in an AM/PM format, they are now all in an AM/PM format. We also added a log out button as well that reroutes to the landing page. We also fetched the user preferences from the backend to be able to display the user’s preferences in the front end and users can now edit their display name as well. + +In the backend, we added routes and controllers for navigating deadlines. We also set up testing API base and configured CI and wrote tests for the user and calendar routes and how the backend helps update the database. We also protected the routes, so users can’t access their information unless they’re logged in. We also implemented the logic for a log out button as well. In the backend, they added a put preference controller as well. + +## Sprint Review Questions + +- How has your product improved or progressed from a customer perspective? + - We Implemented some changes to allow our product to be more easier for users to navigate. We added a help button with detailed instructions for how to use each page and navigate our app. Also we altered the initial preferences questions to allow for a more intuitive experience. We changed the preference questions to specify what type of unit user response should be(minute/hours), and converted the time display to AM/PM format. User’s are able to stay logged in without being prompted to sign in. We added a navigation bar that allows users to route between calendar and profile page, and added a log out button that routes users back to landing page. Calendar is visible in night mode as well. +- Describe in terms of high-level features that a non-technical user could recognize and appreciate. + - Protected routings that users can’t access unless logged in + - Accessible routing transition between calendar and profile page + - Logout button terminates user’s authentication requiring them to re-authenticate to access account again +- What progress have you made that is not visible to a common user? + - We started working on storing calendar events to the backend + - Created testing to see how well the backend communicates with the database + - We started working on displaying instructions in the help page that pertains to the current page + +## Customer-visible Progress + +- Implemented a User Help Button and Guide + - The user can now hover over the help button to see the user help guide that helps tell users what they should do with the website +- Adding a sidebar to navigate between the calendar and user profile page + - A sidebar now exists on the side, so if the user clicks on the calendar they will go to the calendar page and if the user clicks on the user profile page, they will go to the user profile page +- Can edit their display name on the user profile + - In the profile page, the user can now edit their name in their profile +- Edited questions on user preferences survey, so time format was more consistent + - Before questions had a mix of AM/PM and military time, but now all of the questions have been converted to all have consistent times of AM/PM time +- Log out button exists + - The user is now able to log out and be directed to the home page +- User’s can now see their preferences entered in frontend + - The personal preferences that a user enters is displayed in the user’s profile in the frontend + +## Customer-invisible Progress + +- Added routes and controllers for managing deadlines + - Created controllers and routes in the backend for deadlines similar to the ones that already exist for user authentication, user routes, and user deadlines +- Set up testing API base and configured CI + - Set up testing environment to run tests for backend +- Wrote tests for the user and calendar routes + - Wrote tests for the user and calendar routes to ensure that the code works for all types of cases +- Protected the routes + - A user can only access their information when they’re logged in and not if they’re logged out +- Implemented put preference controller + - Allows the user to update their preferences \ No newline at end of file diff --git a/frontend/src/app/dashboard/calendar/page.tsx b/frontend/src/app/dashboard/calendar/page.tsx index 44e3fa8c..725f49c1 100644 --- a/frontend/src/app/dashboard/calendar/page.tsx +++ b/frontend/src/app/dashboard/calendar/page.tsx @@ -1,14 +1,17 @@ /** - * followed a youtube tutorial on how to make calendar view with typscript + * followed a YouTube tutorial on how to make calendar view with TypeScript * link: https://youtu.be/VrC5XhjW6W0?si=_ibhdo7doCMXNtB3 * * */ // Monthly default view /** - * TO DO: fix dragable event color in dark mode + * TO DO: fix draggable event color in dark mode (done) * make a help button to link to help page * make events editable in drag event area + * add documentation and comments to each function + * sync event to backend to test out syntax + * send rest of attributes to backend everytime event in changed */ 'use client'; import FullCalendar from '@fullcalendar/react'; @@ -22,17 +25,38 @@ import { Fragment, useEffect, useState } from 'react'; import { Dialog, Transition } from '@headlessui/react'; import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/20/solid'; import { EventSourceInput } from '@fullcalendar/core/index.js'; +import { useAuth } from '@/components/context/auth/AuthContext'; +import axios from 'axios'; +import { backendBaseUrl } from '@/lib/utils'; interface Event { + id: number | string; // your backend sometimes uses uuid string, sometimes number title: string; - start: Date | string; + start_time: Date | string | null; + end_time: Date | string | null; allDay: boolean; - id: number; + break_time: number | null; + created_at: string; + description: string | null; + is_generated: boolean; + is_recurring: boolean; + location_place?: string; + recurrence_end_date?: string | null; + recurrence_pattern?: string | null; + recurrence_start_date?: string | null; + user_id: string; + + // frontend-only props (for FullCalendar) + start?: Date | string; + end?: Date | string; } export default function Home() { + //imported from the backend user preferences + const { user } = useAuth(); const [events] = useState([ //commented out setEvents(unused var) + { title: 'event 1', id: '1' }, { title: 'event 2', id: '2' }, { title: 'event 3', id: '3' }, @@ -43,31 +67,84 @@ export default function Home() { const [showModal, setShowModal] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false); const [idToDelete, setIdToDelete] = useState(null); - const [newEvent, setNewEvent] = useState({ + const example = { title: '', - start: '', + start_time: '', + end_time: null, allDay: false, - id: 0, + id: '', // UUIDs are strings + break_time: null, + created_at: new Date().toISOString(), + description: null, + is_generated: false, + is_recurring: false, + user_id: '', // you'll want to fill this later when the user is logged in + location_place: undefined, + recurrence_end_date: undefined, + recurrence_pattern: undefined, + recurrence_start_date: undefined, + }; + const [newEvent, setNewEvent] = useState({ + ...example, }); + useEffect(() => { + async function fetchEvents() { + try { + if (!user) { + console.log('No user found'); + return; + } + + const response = await axios.get( + `${backendBaseUrl}/api/calendar/events/by-user/${user.uid}` + ); + console.log('Fetched raw events:', response.data); + + const extractedEvents = response.data.map((event: Event) => ({ + id: event.id, + title: event.title, + start: event.start_time ? new Date(event.start_time) : undefined, + end: event.end_time ? new Date(event.end_time) : undefined, + allDay: event.allDay ?? false, // default to false if undefined + // Optional: You could add more fields here if FullCalendar needs + })); + + console.log('Mapped events for calendar:', extractedEvents); + setAllEvents(extractedEvents); + } catch (error) { + console.error('Error fetching events:', error); + } + } + + fetchEvents().then(() => { + console.log('Fetched events for user: ', user?.displayName); + }); + }, [user]); + useEffect(() => { const draggableEl = document.getElementById('draggable-el'); + let draggable: Draggable | null = null; if (draggableEl) { - new Draggable(draggableEl, { + draggable = new Draggable(draggableEl, { itemSelector: '.fc-event', - eventData: function (eventEl) { - const title = eventEl.getAttribute('title'); - const id = eventEl.getAttribute('data'); - const start = eventEl.getAttribute('start'); - return { title, id, start }; - }, + eventData: (eventEl) => ({ + title: eventEl.getAttribute('title') || '', + id: eventEl.getAttribute('data') || '', + start: eventEl.getAttribute('start') || '', + }), }); } - }, []); + return () => { + // Clean up draggable instance + draggable?.destroy(); + }; + }, []); // empty dependency array -> only once on mount function handleDateClick(arg: { date: Date; allDay: boolean }) { setNewEvent({ ...newEvent, + //takes everything in newEvent start: arg.date, allDay: arg.allDay, id: new Date().getTime(), @@ -75,17 +152,55 @@ export default function Home() { setShowModal(true); } + /* +//TO DO: send info on recurring data + //function updates the events into backend + //input: id, user_id, title, start_time, end_time + //output: console log that data was added successfully + function addToBackend(data: { event: { id: string } }){ + const updateEvent = async (eventData) => { + try { + const response = await axios.put( + `http://your-backend-url.com/events/${eventData.id}`, + // eventData + ); + console.log("Event updated:", response.data); + } catch (error) { + console.error("Error updating event:", error); + } + }; + } +*/ function addEvent(data: DropArg) { + console.log('addEvent called'); + + if (!user) { + console.log('no user found'); + return; + } + const event = { ...newEvent, + user_id: user.uid, start: data.date.toISOString(), title: data.draggedEl.innerText, allDay: data.allDay, id: new Date().getTime(), }; setAllEvents([...allEvents, event]); - } + //added to test getting event name to the backend + axios + .post(backendBaseUrl + `/api/calendar/events`, event) + .then((response) => { + console.log('Successfully saved event into backend: ', user!.uid); + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + } + //TO DO: function handleDeleteModal(data: { event: { id: string } }) { setShowDeleteModal(true); setIdToDelete(Number(data.event.id)); @@ -101,16 +216,14 @@ export default function Home() { function handleCloseModal() { setShowModal(false); setNewEvent({ - title: '', - start: '', - allDay: false, - id: 0, + ...example }); setShowDeleteModal(false); setIdToDelete(null); } const handleChange = (e: React.ChangeEvent): void => { + console.log('handleChange called'); setNewEvent({ ...newEvent, title: e.target.value, @@ -119,13 +232,28 @@ export default function Home() { function handleSubmit(e: React.FormEvent) { e.preventDefault(); - setAllEvents([...allEvents, newEvent]); + if (!user) { + console.log('no user found'); + return; + } + const eventWithUser = { + ...newEvent, + user_id: user.uid, + }; + setAllEvents([...allEvents, eventWithUser]); + + axios + .post(backendBaseUrl + `/api/calendar/events`, eventWithUser) + .then((response) => { + console.log('Successfully saved event:', response.data); + }) + .catch((error) => { + console.error('Error saving event:', error); + }); + setShowModal(false); setNewEvent({ - title: '', - start: '', - allDay: false, - id: 0, + ...example }); } @@ -161,7 +289,7 @@ export default function Home() { id="draggable-el" className="ml-8 w-full border-2 p-2 rounded-md mt-16 lg:h-1/2 bg-violet-50" > -

Drag Event

+

Frequent Events

{events.map((event) => (
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx index 07ea45ed..9a6dc15c 100644 --- a/frontend/src/components/Help.tsx +++ b/frontend/src/components/Help.tsx @@ -14,7 +14,7 @@ export const Help = () => { .then((res) => res.text()) .then((text) => setMarkdown(text)); } - }, [showHelp]); + }, [showHelp, markdown]); return (