diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..7d2db8445 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +node_modules/ +.env +package-lock.json +.vite/ +uploads/ +dist/ +*.log diff --git a/README.md b/README.md index 0e1211217..b056d8a8f 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# [your app name here] +# StickerStory CodePath WEB103 Final Project -Designed and developed by: [your names here] +Designed and developed by: Kelly Chan, Arsheen Taj Syed πŸ”— Link to deployed app: @@ -10,39 +10,55 @@ Designed and developed by: [your names here] ### Description and Purpose -[text goes here] +StickerStory is a digital memory journal that lets users creatively capture and preserve their favorite moments. Users can create multiple journals and fill each journal with scrapbook-style pages. On each page, users can upload photos, add decorative stickers, doodles, and text, and attach labels, descriptions, locations, and dates. To make pages more personal, users have the option of responding to random prompts and even attach a Spotify song to capture the mood of the moment. -### Inspiration +The purpose of StickerStory is to give users a fun, creative, and interactive way to document memories and reflect on their experiences. It combines journaling, scrapbooking, and music in one app, making it both personal and shareable for users who want to save and revisit their favorite moments over time. -[text goes here] +### Inspiration +Our inspiration stems from the nostalgia of physical scrapbooking combined with the modern convenience of digital journaling apps. We aimed to create an experience that transcends simple text-based logs, providing a rich, visual, and highly personal way to document life. The inclusion of stickers and doodling mimics the tactile joy of paper scrapbooks, while features like Spotify integration and prompt generation add a unique digital twist to the memory-capturing experience. ## Tech Stack -Frontend: - -Backend: +Frontend: HTML, CSS, JavaScript +Backend: Express, Node.js, PostgreSQL ## Features -### [Name of Feature 1] +### βœ… Journal & Page Creation (Baseline) +Users can create, name, and manage multiple distinct journals and add new blank pages to any journal. -[short description goes here] +![demo](https://i.imgur.com/PgJRgdl.gif) -[gif goes here] +https://imgur.com/a/jx9wb8L -### [Name of Feature 2] +### βœ… Multimedia Page Editor (Baseline) +Allows users to upload a photo, add a text description, and attach a date/location to a page. -[short description goes here] +![demo](https://i.imgur.com/FPAKhak.gif) +https://imgur.com/a/nWyYdsu -[gif goes here] +### βœ… Sticker & Doodle Toolkit (Custom) +Users can select from a library of digital stickers and use a doodling tool to personalize their page design. + +![demo](https://i.imgur.com/LqaPYqy.gif) +https://imgur.com/a/FHzCOxQ + +### βœ… Spotify Song Link (Custom) +Users can link a Spotify song URL to a page to capture the mood, storing the song data in a one-to-one relationship. + +![demo](https://i.imgur.com/OQQkUfs.gif) +https://imgur.com/a/IzWDR47 -### [Name of Feature 3] +### βœ… Memory Prompt Generator +Users can opt to respond to a random, inspiring prompt (e.g., "What was the most surprising thing that happened today?") to help spark a memory. -[short description goes here] +![demo](https://i.imgur.com/KxUJecE.gif) +https://imgur.com/a/UmzoKx1 +### Tagging and Filtering +Users can tag pages with labels (e.g., β€œvacation,” β€œfamily”) and filter pages by these tags. [gif goes here] -### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them] ## Installation Instructions diff --git a/milestones/milestone1.md b/milestones/milestone1.md index 52b9b0038..6e4d26157 100644 --- a/milestones/milestone1.md +++ b/milestones/milestone1.md @@ -6,27 +6,27 @@ This document should be completed and submitted during **Unit 5** of this course This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets. -- [ ] Read and understand all required features - - [ ] Understand you **must** implement **all** baseline features and **two** custom features -- [ ] In `readme.md`: update app name to your app's name -- [ ] In `readme.md`: add all group members' names -- [ ] In `readme.md`: complete the **Description and Purpose** section -- [ ] In `readme.md`: complete the **Inspiration** section -- [ ] In `readme.md`: list a name and description for all features (minimum 6 for full points) you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features) -- [ ] In `planning/user_stories.md`: add all user stories (minimum 10 for full points) -- [ ] In `planning/user_stories.md`: use 1-3 unique user roles in your user stories -- [ ] In this document, complete all thre questions in the **Reflection** section below +- [X] Read and understand all required features + - [X] Understand you **must** implement **all** baseline features and **two** custom features +- [X] In `readme.md`: update app name to your app's name +- [X] In `readme.md`: add all group members' names +- [X] In `readme.md`: complete the **Description and Purpose** section +- [X] In `readme.md`: complete the **Inspiration** section +- [X] In `readme.md`: list a name and description for all features (minimum 6 for full points) you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features) +- [X] In `planning/user_stories.md`: add all user stories (minimum 10 for full points) +- [X] In `planning/user_stories.md`: use 1-3 unique user roles in your user stories +- [X] In this document, complete all three questions in the **Reflection** section below ## Reflection ### 1. What went well during this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Planning and thinking about the capstone project. ### 2. What were some challenges your group faced in this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Coordinating the timings and distributing the work among all. ### 3. What additional support will you need in upcoming units as you continue to work on your final project? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Guiding with resources and feedback on the idea and implementation plan. diff --git a/milestones/milestone2.md b/milestones/milestone2.md index e3178cd81..5d51d44df 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] +Designing the low-fidelity wireframes for our project went really well. Our group had similar ideas about how we wanted StickerStory to look and function, so the process felt smooth and collaborative. It was fun seeing our ideas come to life visually and realizing we were all on the same page about the app’s layout and features. ### 2. What were some challenges your group faced in this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +One challenge we faced was narrowing down all of our ideas into something that’s realistic for our timeline. We had a lot of creative concepts, like music integration and sticker customization, but had to decide which ones were essential for the first version of our app. It was also a bit tricky coordinating what parts we should do, so communication took some extra effort. ### 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’ll need more support with the technical side of implementation, especially setting up the database relationships (like many-to-many tables) and integrating external APIs such as Spotify. We’d also appreciate guidance on front-end design tools or techniques to help us make the sticker and collage features both functional and visually appealing. diff --git a/milestones/milestone3.md b/milestones/milestone3.md index 571ce7651..5a589054b 100644 --- a/milestones/milestone3.md +++ b/milestones/milestone3.md @@ -8,34 +8,35 @@ 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] +We were able to organize and divide the work effectively and complete the implementations easily, and there have been no merge issues so far. ### 2. What were some challenges your group faced in this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +The initial setup and how to set up the file structures were something we had to think about. ### 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 were able to implement the features we wanted and have the journal pages and setup we wanted for this milestone. ### 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 Auto-Generated Starter Pages feature, I think it's "at risk" because this feature was introduced as a stretch goal rather than a core requirement. Our current focus is on delivering a solid journaling and scrapbooking experience. Auto-generating starter pages involves additional complexity, such as template creation and logic for personalization, which may divert resources from the primary goal. + ### 5. What additional support will you need in upcoming units as you continue to work on your final project? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Perhaps show how to pull from the main branch without conflicts and test the code written by others more efficiently; that would be helpful. diff --git a/milestones/milestone5.md b/milestones/milestone5.md index 139284283..401e678e7 100644 --- a/milestones/milestone5.md +++ b/milestones/milestone5.md @@ -6,13 +6,13 @@ This document should be completed and submitted during **Unit 9** of this course This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets. -- [ ] Deploy your project on Render - - [ ] In `readme.md`, add the link to your deployed project -- [ ] Update the status of issues in your project board as you complete them -- [ ] In `readme.md`, check off the features you have completed in this unit by adding a βœ… emoji in front of their title - - [ ] Under each feature you have completed, **include a GIF** showing feature functionality -- [ ] In this document, complete the **Reflection** section below -- [ ] 🚩🚩🚩**Complete the Final Project Feature Checklist section below**, detailing each feature you completed in the project (ONLY include features you implemented, not features you planned) +- [x] Deploy your project on Render + - [x] In `readme.md`, add the link to your deployed project +- [x] Update the status of issues in your project board as you complete them +- [x] In `readme.md`, check off the features you have completed in this unit by adding a βœ… emoji in front of their title + - [x] Under each feature you have completed, **include a GIF** showing feature functionality +- [x] In this document, complete the **Reflection** section below +- [x] 🚩🚩🚩**Complete the Final Project Feature Checklist section below**, detailing each feature you completed in the project (ONLY include features you implemented, not features you planned) - [ ] 🚩🚩🚩**Record a GIF showing a complete run-through of your app** that displays all the components included in the **Final Project Feature Checklist** below - [ ] Include this GIF in the **Final Demo GIF** section below @@ -24,39 +24,39 @@ Complete the checklist below detailing each baseline, custom, and stretch featur πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Check off each completed feature below. -- [ ] The project includes an Express backend app and a React frontend app -- [ ] The project includes these backend-specific features: - - [ ] At least one of each of the following database relationships in Postgres - - [ ] one-to-many +- [X] The project includes an Express backend app and a React frontend app +- [X] The project includes these backend-specific features: + - [X] At least one of each of the following database relationships in Postgres + - [X] one-to-many - [ ] many-to-many with a join table - - [ ] A well-designed RESTful API that: - - [ ] supports all four main request types for a single entity (ex. tasks in a to-do list app): GET, POST, PATCH, and DELETE - - [ ] the user can **view** items, such as tasks - - [ ] the user can **create** a new item, such as a task - - [ ] the user can **update** an existing item by changing some or all of its values, such as changing the title of task - - [ ] the user can **delete** an existing item, such as a task - - [ ] Routes follow proper naming conventions - - [ ] The web app includes the ability to reset the database to its default state -- [ ] The project includes these frontend-specific features: - - [ ] At least one redirection, where users are able to navigate to a new page with a new URL within the app - - [ ] At least one interaction that the user can initiate and complete on the same page without navigating to a new page - - [ ] Dynamic frontend routes created with React Router - - [ ] Hierarchically designed React components - - [ ] Components broken down into categories, including Page and Component types - - [ ] Corresponding container components and presenter components as appropriate -- [ ] The project includes dynamic routes for both frontend and backend apps -- [ ] The project is deployed on Render with all pages and features that are visible to the user are working as intended + - [X] A well-designed RESTful API that: + - [X] supports all four main request types for a single entity (ex. tasks in a to-do list app): GET, POST, PATCH, and DELETE + - [X] the user can **view** items, such as tasks + - [X] the user can **create** a new item, such as a task + - [X] the user can **update** an existing item by changing some or all of its values, such as changing the title of task + - [X] the user can **delete** an existing item, such as a task + - [X] Routes follow proper naming conventions + - [X] The web app includes the ability to reset the database to its default state +- [X] The project includes these frontend-specific features: + - [X] At least one redirection, where users are able to navigate to a new page with a new URL within the app + - [X] At least one interaction that the user can initiate and complete on the same page without navigating to a new page + - [X] Dynamic frontend routes created with React Router + - [X] Hierarchically designed React components + - [X] Components broken down into categories, including Page and Component types + - [X] Corresponding container components and presenter components as appropriate +- [X] The project includes dynamic routes for both frontend and backend apps +- [X] The project is deployed on Render with all pages and features that are visible to the user are working as intended ### Custom Features πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Check off each completed feature below. -- [ ] The project gracefully handles errors -- [ ] The project includes a one-to-one database relationship +- [X] The project gracefully handles errors +- [X] The project includes a one-to-one database relationship - [ ] The project includes a slide-out pane or modal as appropriate for your use case that pops up and covers the page content without navigating away from the current page - [ ] The project includes a unique field within the join table - [ ] The project includes a custom non-RESTful route with corresponding controller actions -- [ ] The user can filter or sort items based on particular criteria as appropriate for your use case +- [X] The user can filter or sort items based on particular criteria as appropriate for your use case - [ ] Data is automatically generated in response to a certain event or user action. Examples include generating a default inventory for a new user starting a game or creating a starter set of tasks for a user creating a new task app account - [ ] Data submitted via a POST or PATCH request is validated before the database is updated (e.g. validating that an event is in the future before allowing a new event to be created) - [ ] *To receive full credit, please be sure to demonstrate in your walkthrough that for certain inputs, the item will NOT be successfully created or updated.* @@ -65,14 +65,14 @@ Complete the checklist below detailing each baseline, custom, and stretch featur πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Check off each completed feature below. -- [ ] A subset of pages require the user to log in before accessing the content +- [X] A subset of pages require the user to log in before accessing the content - [ ] Users can log in and log out via GitHub OAuth with Passport.js - [ ] Restrict available user options dynamically, such as restricting available purchases based on a user's currency - [ ] Show a spinner while a page or page element is loading - [ ] Disable buttons and inputs during the form submission process - [ ] Disable buttons after they have been clicked - *At least 75% of buttons in your app must exhibit this behavior to receive full credit* -- [ ] Users can upload images to the app and have them be stored on a cloud service +- [X] Users can upload images to the app and have them be stored on a cloud service - *A user profile picture does **NOT** count for this rubric item **only if** the app also includes "Login via GitHub" functionality.* - *Adding a photo via a URL does **NOT** count for this rubric item (for example, if the user provides a URL with an image to attach it to the post).* - *Selecting a photo from a list of provided photos does **NOT** count for this rubric item.* @@ -86,20 +86,20 @@ Complete the checklist below detailing each baseline, custom, and stretch featur ### 1. What went well during this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +We were able to plan and execute the website as envisioned and incorporate everything we learned in class. ### 2. What were some challenges your group faced in this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Merging and pulling code from each other. ### 3. What were some of the highlights or achievements that you are most proud of in this project? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +The website is aesthetically pleasing and functionally incorporates authentication, a database, a user interface, and all other necessary elements into the project. ### 4. Reflecting on your web development journey so far, how have you grown since the beginning of the course? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +We made something as we wanted! We were able to plan something we were passionate about and bring it to life. ### 5. Looking ahead, what are your goals related to web development, and what steps do you plan to take to achieve them? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Learn more advanced web development concepts and keep growing by learning, reflecting, and practising. diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..a34e0680f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "web103_finalproject", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/planning/entity_relationship_diagram.md b/planning/entity_relationship_diagram.md index 12c25f62c..438612ab5 100644 --- a/planning/entity_relationship_diagram.md +++ b/planning/entity_relationship_diagram.md @@ -4,14 +4,15 @@ Reference the Creating an Entity Relationship Diagram final project guide in the ## Create the List of Tables -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ List each table in your diagram] +1. **users**: Stores user authentication and profile information. +2. **journals**: Stores collections of pages (e.g., "My Travels Journal"). This has a **one-to-many** relationship with users. +3. **pages**: Stores the individual memory entries or scrapbook pages, including text, photo URLs, dates, and locations. This has a **one-to-many** relationship with journals. +4. **stickers**: Stores the reference library of digital stickers available for use on pages. +5. **pagestickers**: This is the **join table** handling the **many-to-many** relationship between pages and stickers. It also includes custom fields for sticker position and rotation. +6. **moodsongs**: Stores the Spotify song metadata linked to a page. This is the **one-to-one** relationship with pages. ## 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.] +image + -| 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..0c7831785 100644 --- a/planning/user_stories.md +++ b/planning/user_stories.md @@ -3,11 +3,22 @@ Reference the Writing User Stories final project guide in the course portal for more information about how to complete each of the sections below. ## Outline User Roles +- Journaler (primary user) +- Designer (user-focused on visual customization) +- Music Lover (user who wants to attach music to memories) -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Include at least at least 1, but no more than 3, user roles.] ## Draft User Stories -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Include at least at least 10 user stories in this format:] +1. As a Journaler, I want to create multiple journals so I can organize my memories by theme. +2. As a Journaler, I want to add pages to a journal so I can document specific events. +3. As a Designer, I want to add stickers and doodles to a page so I can personalize it visually. +4. As a Journaler, I want to write text and captions on each page to describe my memories. +5. As a Music Lover, I want to attach a Spotify song to a page so I can capture the mood. +6. As a Journaler, I want to receive random prompts so I can get inspiration when I’m stuck. +7. As a Journaler, I want to tag pages with labels so I can filter and find them later. +8. As a Designer, I want to preview a page in a modal so I don’t lose my place in the journal. +9. As a Journaler, I want the app to validate my inputs so I don’t lose data or make mistakes. +10. As a Journaler, I want a starter page to be created when I make a new journal so I can get started quickly. + -1. As a [user role], I want to [what], so that [why]. diff --git a/planning/wireframe-images/Add-Page.png b/planning/wireframe-images/Add-Page.png new file mode 100644 index 000000000..4e4d97183 Binary files /dev/null and b/planning/wireframe-images/Add-Page.png differ diff --git a/planning/wireframe-images/All-Journals.png b/planning/wireframe-images/All-Journals.png new file mode 100644 index 000000000..4a3003e0e Binary files /dev/null and b/planning/wireframe-images/All-Journals.png differ diff --git a/planning/wireframe-images/Create-Journal.png b/planning/wireframe-images/Create-Journal.png new file mode 100644 index 000000000..109c52e19 Binary files /dev/null and b/planning/wireframe-images/Create-Journal.png differ diff --git a/planning/wireframe-images/Journal-Details.png b/planning/wireframe-images/Journal-Details.png new file mode 100644 index 000000000..80632fbfd Binary files /dev/null and b/planning/wireframe-images/Journal-Details.png differ diff --git a/planning/wireframe-images/Journal-Page-View.png b/planning/wireframe-images/Journal-Page-View.png new file mode 100644 index 000000000..2b36387ed Binary files /dev/null and b/planning/wireframe-images/Journal-Page-View.png differ diff --git a/planning/wireframe-images/Landing.png b/planning/wireframe-images/Landing.png new file mode 100644 index 000000000..1f3f0ec28 Binary files /dev/null and b/planning/wireframe-images/Landing.png differ diff --git a/planning/wireframe-images/Login.png b/planning/wireframe-images/Login.png new file mode 100644 index 000000000..dabfae1f2 Binary files /dev/null and b/planning/wireframe-images/Login.png differ diff --git a/planning/wireframe-images/Page-Details.png b/planning/wireframe-images/Page-Details.png new file mode 100644 index 000000000..8b0b762fc Binary files /dev/null and b/planning/wireframe-images/Page-Details.png differ diff --git a/planning/wireframe-images/Page-Preview.png b/planning/wireframe-images/Page-Preview.png new file mode 100644 index 000000000..7d323bdda Binary files /dev/null and b/planning/wireframe-images/Page-Preview.png differ diff --git a/planning/wireframes.md b/planning/wireframes.md index fbcd15a0c..f987ec47f 100644 --- a/planning/wireframes.md +++ b/planning/wireframes.md @@ -3,19 +3,51 @@ Reference the Creating an Entity Relationship Diagram final project guide in the course portal for more information about how to complete this deliverable. ## List of Pages +- Landing Page ⭐ +- Login Page ⭐ +- Sign Up Page +- View All Journals ⭐ +- Create New Journal ⭐ +- Journal All Page Views ⭐ +- Journal Single Page Views ⭐ +- Add New Page to Journal ⭐ +- Add Page Details ⭐ +- Add Page Preview ⭐ [πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ List the pages you expect to have in your app, with a ⭐ next to pages you have wireframed] -## Wireframe 1: [page title] +## Wireframe 1: Landing Page -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ include wireframe 1] +![Landing Page Wireframe](wireframe-images/Landing.png) -## Wireframe 2: [page title] +## Wireframe 2: Login Page -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ include wireframe 2] +![Login Page Wireframe](wireframe-images/Login.png) -## Wireframe 3: [page title] +## Wireframe 3: View All Journals -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ include wireframe 3] +![View All Journals Page Wireframe](wireframe-images/All-Journals.png) -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ include more wireframes as desired] +## Wireframe 4: Create Journal + +![Create Journal Page Wireframe](wireframe-images/Create-Journal.png) + +## Wireframe 5: Journal All Page View + +![Journal All Page Wireframe](wireframe-images/Journal-Details.png) + +## Wireframe 6: Journal Single Page View + +![Journals Single Page View Wireframe](wireframe-images/Journal-Page-View.png) + +## Wireframe 7: Add Page View + +![Add Page Wireframe](wireframe-images/Add-Page.png) + +## Wireframe 8: Add Page Details View + +![Add Page Details Wireframe](wireframe-images/Page-Details.png) + +## Wireframe 9: Add Page Preview View + +![Add Page Preview Wireframe](wireframe-images/Page-Preview.png) diff --git a/project/client/.DS_Store b/project/client/.DS_Store new file mode 100644 index 000000000..0fb3caa99 Binary files /dev/null and b/project/client/.DS_Store differ diff --git a/project/client/index.html b/project/client/index.html new file mode 100644 index 000000000..8014d693a --- /dev/null +++ b/project/client/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + StickerStory + + +
+ + + diff --git a/project/client/public/covers/bluecover.jpg b/project/client/public/covers/bluecover.jpg new file mode 100644 index 000000000..fbfed54f5 Binary files /dev/null and b/project/client/public/covers/bluecover.jpg differ diff --git a/project/client/public/covers/graycover.jpg b/project/client/public/covers/graycover.jpg new file mode 100644 index 000000000..855faa475 Binary files /dev/null and b/project/client/public/covers/graycover.jpg differ diff --git a/project/client/public/covers/greencover.jpg b/project/client/public/covers/greencover.jpg new file mode 100644 index 000000000..2592a3c84 Binary files /dev/null and b/project/client/public/covers/greencover.jpg differ diff --git a/project/client/public/covers/pinkcover.jpg b/project/client/public/covers/pinkcover.jpg new file mode 100644 index 000000000..b84d50a5c Binary files /dev/null and b/project/client/public/covers/pinkcover.jpg differ diff --git a/project/client/public/covers/yellowcover.jpg b/project/client/public/covers/yellowcover.jpg new file mode 100644 index 000000000..d70bbaa84 Binary files /dev/null and b/project/client/public/covers/yellowcover.jpg differ diff --git a/project/client/public/logo.png b/project/client/public/logo.png new file mode 100644 index 000000000..f913ac476 Binary files /dev/null and b/project/client/public/logo.png differ diff --git a/project/client/public/pages/black.jpg b/project/client/public/pages/black.jpg new file mode 100644 index 000000000..aed5939f1 Binary files /dev/null and b/project/client/public/pages/black.jpg differ diff --git a/project/client/public/pages/dotted.jpg b/project/client/public/pages/dotted.jpg new file mode 100644 index 000000000..329d5d7f8 Binary files /dev/null and b/project/client/public/pages/dotted.jpg differ diff --git a/project/client/public/pages/lines_white.jpg b/project/client/public/pages/lines_white.jpg new file mode 100644 index 000000000..05f764ddc Binary files /dev/null and b/project/client/public/pages/lines_white.jpg differ diff --git a/project/client/public/pages/note.jpg b/project/client/public/pages/note.jpg new file mode 100644 index 000000000..50644a304 Binary files /dev/null and b/project/client/public/pages/note.jpg differ diff --git a/project/client/public/pages/notebook_lines.jpg b/project/client/public/pages/notebook_lines.jpg new file mode 100644 index 000000000..996950319 Binary files /dev/null and b/project/client/public/pages/notebook_lines.jpg differ diff --git a/project/client/public/pages/pink.jpg b/project/client/public/pages/pink.jpg new file mode 100644 index 000000000..430ec6234 Binary files /dev/null and b/project/client/public/pages/pink.jpg differ diff --git a/project/client/public/pages/square.jpg b/project/client/public/pages/square.jpg new file mode 100644 index 000000000..ab27589a8 Binary files /dev/null and b/project/client/public/pages/square.jpg differ diff --git a/project/client/public/pages/white.jpg b/project/client/public/pages/white.jpg new file mode 100644 index 000000000..ff181c4cd Binary files /dev/null and b/project/client/public/pages/white.jpg differ diff --git a/project/client/public/stickers/Meow.jpg b/project/client/public/stickers/Meow.jpg new file mode 100644 index 000000000..031825528 Binary files /dev/null and b/project/client/public/stickers/Meow.jpg differ diff --git a/project/client/public/stickers/circle.jpg b/project/client/public/stickers/circle.jpg new file mode 100644 index 000000000..78eabea6d Binary files /dev/null and b/project/client/public/stickers/circle.jpg differ diff --git a/project/client/public/stickers/collage.jpg b/project/client/public/stickers/collage.jpg new file mode 100644 index 000000000..81645fe9d Binary files /dev/null and b/project/client/public/stickers/collage.jpg differ diff --git a/project/client/public/stickers/flowers.jpg b/project/client/public/stickers/flowers.jpg new file mode 100644 index 000000000..08a0fab70 Binary files /dev/null and b/project/client/public/stickers/flowers.jpg differ diff --git a/project/client/public/stickers/hearts.jpg b/project/client/public/stickers/hearts.jpg new file mode 100644 index 000000000..a68756841 Binary files /dev/null and b/project/client/public/stickers/hearts.jpg differ diff --git a/project/client/public/stickers/moon.jpg b/project/client/public/stickers/moon.jpg new file mode 100644 index 000000000..30b202b34 Binary files /dev/null and b/project/client/public/stickers/moon.jpg differ diff --git a/project/client/public/stickers/stars.jpg b/project/client/public/stickers/stars.jpg new file mode 100644 index 000000000..fd4789ede Binary files /dev/null and b/project/client/public/stickers/stars.jpg differ diff --git a/project/client/src/App.css b/project/client/src/App.css new file mode 100644 index 000000000..6d74d09fd --- /dev/null +++ b/project/client/src/App.css @@ -0,0 +1,4 @@ +.app { + min-height: 100vh; + background-color: transparent; +} diff --git a/project/client/src/App.jsx b/project/client/src/App.jsx new file mode 100644 index 000000000..ad352f042 --- /dev/null +++ b/project/client/src/App.jsx @@ -0,0 +1,58 @@ +import React, { useState, useEffect } from 'react'; +import { BrowserRouter as Router, useLocation, useRoutes } from "react-router-dom"; +import Navigation from './components/Navigation'; + +import Home from './pages/Home'; +import AllJournals from './pages/AllJournals'; +import CreateJournal from './pages/CreateJournal'; +import EditJournal from './pages/EditJournal'; +import AllPages from './pages/AllPages'; +import PageDetails from './pages/PageDetails'; +import AddPage from './pages/AddPage'; +import PreviewPage from './pages/PreviewPage'; + +import './App.css'; + +const App = () => { + const location = useLocation(); + const [user, setUser] = useState(null); + + useEffect(() => { + fetch('http://localhost:3000/auth/me', { credentials: 'include' }) // Change this + .then(res => res.json()) + .then(data => { + console.log('πŸ‘€ User data received:', data); // Add this debug log + setUser(data); + }) + .catch(err => console.log('Error fetching user:', err)); + }, []); + + const handleLogout = () => { + window.location.href = 'http://localhost:3000/auth/logout'; + }; + + const element = useRoutes([ + { path: '/', element: }, + { path: '/journals', element: }, + { path: '/journals/create', element: }, + { path: '/journals/:journalId/edit', element: }, + { path: '/journals/:journalId', element: }, + { path: '/journals/:journalId/pages/add', element: }, + { path: '/journals/:journalId/pages/:pageId', element: }, + { path: '/journals/:journalId/pages/:pageId/preview', element: }, + ]); + + return ( +
+ {location.pathname !== '/' && ( + + )} + {element} +
+ ); +}; + +export default App; diff --git a/project/client/src/components/EditorSidebar.jsx b/project/client/src/components/EditorSidebar.jsx new file mode 100644 index 000000000..97ae49695 --- /dev/null +++ b/project/client/src/components/EditorSidebar.jsx @@ -0,0 +1,275 @@ +import React, { useState, useRef } from 'react'; +import '../css/AddPage.css'; + +const EditorSidebar = ({ + pageData, + updatePageBackground, + pageBackgrounds, + stickerLibrary, + handleStickerClick, + expandedSections, + toggleSection, + isDoodling, + startDoodling, + stopDoodling, + clearDoodle, + brushColor, + setBrushColor, + brushSize, + setBrushSize, + doodleCanvasRef, + textInput, + setTextInput, + textSize, + setTextSize, + textColor, + setTextColor, + handleAddText, + handleImageUpload +}) => { + return ( +