Res tful work

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,49 +1,155 @@
-# [your app name here]
+# ArcForge
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: Jingyi He, Bingying Li, Adeline Greene, Abdelrahman Mohamed, Allen Ramirez, and Salman Khan
 
 🔗 Link to deployed app:
 
 ## About
 
 ### Description and Purpose
 
-[text goes here]
+**ArcForge** is a full-stack story planning web app that helps writers, game designers, and creative teams organize their story ideas in one place. Users can create story projects, add scenes, build character profiles, define locations, and connect characters to specific scenes. Instead of keeping ideas scattered across documents, notes, and spreadsheets, ArcForge gives users a structured workspace for planning story timelines, tracking scene progress, and managing relationships between characters, locations, and story events.
+
+The purpose of ArcForge is to make story development easier and more organized. It helps creators see how each scene fits into the larger story, which characters appear in each scene, where events take place, and what still needs to be completed. This is especially useful for people working on novels, short films, comics, visual novels, or story-driven games.
 
 ### Inspiration
 
-[text goes here]
+ArcForge was inspired by the challenge of planning creative projects with many connected pieces. When building a story, it can be difficult to remember which characters appear in each scene, what role they play, where events happen, and whether each scene is still a draft or finished. Many creators use separate notes, documents, or spreadsheets, but those tools are not always designed for visualizing story structure.
+
+We wanted to build an app that feels both creative and practical: something that gives storytellers a clean way to organize their ideas while also helping them track progress. ArcForge combines the structure of a project management tool with the creativity of a storyboarding workspace, making it useful for writers, student creators, game designers, and small creative teams.
 
 ## Tech Stack
 
-Frontend:
+Frontend: React, React Router, JavaScript, HTML, CSS
+
+Backend: Node.js, Express.js, PostgreSQL, RESTful API, pg, dotenv
 
-Backend:
+Deployment: Render
+
+Version Control: Git and GitHub
 
 ## Features
 
-### [Name of Feature 1]
+### Story Project Dashboard
 
-[short description goes here]
+Users can view all story projects from a main dashboard. Each project card shows basic information such as the project title, description, number of scenes, and overall progress.
 
 [gif goes here]
 
-### [Name of Feature 2]
+### Create and Edit Story Projects
 
-[short description goes here]
+Users can create a new story project and update project details such as title, description, genre, and project status. This gives creators a starting point for organizing each story separately.
 
 [gif goes here]
 
-### [Name of Feature 3]
+### Scene Manager
 
-[short description goes here]
+Users can add, view, edit, and delete scenes within a story project. Each scene can include details such as title, summary, timeline order, mood, status, purpose, and conflict.
+
+[gif goes here]
+
+### Character Profiles
+
+Users can create and manage character profiles with details such as name, role, description, motivation, and notes. This helps creators keep character information organized instead of scattered across separate documents.
+
+[gif goes here]
+
+### Location Library
+
+Users can create reusable story locations and connect scenes to those locations. This helps creators track where events happen and reuse important settings across multiple scenes.
+
+[gif goes here]
+
+### Scene Character Assignments
+
+Users can assign multiple characters to a scene and describe each character's role in that scene. This feature demonstrates a many-to-many relationship between scenes and characters using a join table.
+
+[gif goes here]
+
+### Scene Filtering and Sorting
+
+Users can filter or sort scenes by character, location, mood, status, or timeline order. This makes it easier to find specific story moments and review the structure of a project.
+
+[gif goes here]
+
+### Story Progress Overview
+
+Users can view calculated story progress, such as how many scenes are completed compared to the total number of scenes. This gives creators a quick summary of how much planning work is finished.
+
+[gif goes here]
+
+### Dynamic Detail Pages
+
+Users can navigate to individual story, scene, character, and location pages. These pages use dynamic React Router routes based on the selected item's ID.
+
+Example routes include:
+
+- `/projects/:projectId`
+
+- `/projects/:projectId/scenes/:sceneId`
+
+- `/characters/:characterId`
+
+- `/locations/:locationId`
+
+[gif goes here]
+
+### Form Validation
+
+The app checks required form fields before creating or updating database records. Invalid or incomplete information is not submitted, and the user receives a clear error message.
+
+[gif goes here]
+
+### Confirmation Modal
+
+Before deleting a story project, scene, character, or location, the app displays a confirmation modal to prevent accidental deletion.
+
+[gif goes here]
+
+### Notifications
+
+The app displays temporary success or error messages after important actions, such as creating, updating, or deleting content.
+
+Examples include:
+
+- “Scene created successfully.”
+
+- “Character updated successfully.”
+
+- “Unable to delete location.”
+
+[gif goes here]
+
+### Loading and Submission States
+
+The app displays a loading spinner while retrieving data. Form inputs and submission buttons are temporarily disabled while a request is being processed to prevent duplicate submissions.
+
+For example, a submit button may change from Save Scene to Saving... until the request is completed.
+
+[gif goes here]
+
+### User Authentication and Login
+
+Users must login using an authentication mechanism before saving their projects
+
+[gif goes here]
+
+### Automatically Generated Project Templates
+
+A project template, containing placholder scenes and characters, is automatically generated from on user inputs (eg. the type of project)
 
 [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]
 
+### [Name of Feature]
+
+[short description goes here]
+
+[gif goes here]
+
 ## Installation Instructions
 
 [instructions go here]

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 thre questions in the **Reflection** section below
 
 ## Reflection
 
 ### 1. What went well during this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+Our group was able to choose a project idea that feels creative, useful, and realistic for the final project timeline. We decided to build ArcForge, a story planning app for organizing projects, scenes, characters, locations, and story progress. The idea works well for this course because it naturally supports full-stack CRUD features, dynamic pages, and relational database relationships such as one-to-many and many-to-many connections. We were also able to write the app description, purpose, inspiration, initial feature list, and user stories to help guide future development.
 
 ### 2. What were some challenges your group faced in this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+One challenge was narrowing the idea into a version that is creative but still manageable for the project timeline. ArcForge could include many possible story planning features, so we had to focus on the core features first, such as projects, scenes, characters, locations, and scene-character relationships. Another challenge was making sure the project idea clearly matched the required technical features, especially database relationships, RESTful API routes, and custom features. Since this is a group project, we also need to make sure everyone understands the app idea and has space to contribute. A third challenge was including four new members halfway through the first week, as Codepath merged three teams of two members.
 
 ### 3. What additional support will you need in upcoming units as you continue to work on your final project?
 
-[👉🏾👉🏾👉🏾 your answer here]
+In upcoming units, our group will need support with planning the PostgreSQL database schema, especially the relationships between projects, scenes, characters, locations, and the join table that connects characters to scenes. We may also need support with organizing Express API routes, designing React Router pages, and deciding how to divide the work across group members. Feedback on our feature scope and database structure would also help us make sure the project stays realistic while still meeting the final project requirements.

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]
+Creating the entity diagrams and wireframes by the deadline went well. I think connecting during the breakout rooms is helpful to get to know each other.
 
 ### 2. What were some challenges your group faced in this unit?
 
-[👉🏾👉🏾👉🏾 your answer here]
+We are still working on communication. Though we have a Discord server set up, more frequent communication would help group members understand deliverables and their part in helping the group complete the milestone. Right now, not all group members are participating equally.
 
 ### 3. What additional support will you need in upcoming units as you continue to work on your final project?
 
-[👉🏾👉🏾👉🏾 your answer here]
+It would be great to have time in class to work on the project and maybe some more guidance on how to define group members' roles and responsibilities.

planning/entity_relationship_diagram.md

@@ -1,17 +1,110 @@
 # Entity Relationship Diagram
 
-Reference the Creating an Entity Relationship Diagram final project guide in the course portal for more information about how to complete this deliverable.
+This database supports ArcForge's story-planning workspace. A story project contains its own scenes, characters, locations, and story items. Scenes can include multiple characters and items through join tables.
 
 ## Create the List of Tables
 
-[👉🏾👉🏾👉🏾 List each table in your diagram]
+- **story_projects** — stores the main information for each story project.
+- **scenes** — stores scenes that belong to a story project and may take place at a location.
+- **characters** — stores character profiles for a story project.
+- **locations** — stores reusable story locations for a story project.
+- **items** — stores important props or story items for a story project.
+- **scene_characters** — join table connecting scenes and characters, including each character's role in a scene.
+- **scene_items** — join table connecting scenes and items, including an item's purpose in a scene.
 
 ## 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.]
+![ArcForge entity relationship diagram](./entity_relationship_diagram.png)
 
-| Column Name | Type | Description |
-|-------------|------|-------------|
-| id | integer | primary key |
-| name | text | name of the shoe model |
-| ... | ... | ... |
+### Editable Mermaid Version
+
+```mermaid
+erDiagram
+    STORY_PROJECTS ||--o{ SCENES : contains
+    STORY_PROJECTS ||--o{ CHARACTERS : includes
+    STORY_PROJECTS ||--o{ LOCATIONS : includes
+    STORY_PROJECTS ||--o{ ITEMS : includes
+    LOCATIONS o|--o{ SCENES : hosts
+    SCENES ||--o{ SCENE_CHARACTERS : has
+    CHARACTERS ||--o{ SCENE_CHARACTERS : appears_in
+    SCENES ||--o{ SCENE_ITEMS : uses
+    ITEMS ||--o{ SCENE_ITEMS : appears_in
+
+    STORY_PROJECTS {
+        integer id PK
+        varchar title
+        text description
+        varchar genre
+        varchar status
+        timestamp created_at
+        timestamp updated_at
+    }
+
+    SCENES {
+        integer id PK
+        integer project_id FK
+        integer location_id FK
+        varchar title
+        text summary
+        integer scene_order
+        integer timeline_order
+        varchar status
+        varchar mood
+        text notes
+        timestamp created_at
+        timestamp updated_at
+    }
+
+    CHARACTERS {
+        integer id PK
+        integer project_id FK
+        varchar name
+        varchar story_role
+        text description
+        text goal
+        text knowledge_notes
+        timestamp created_at
+        timestamp updated_at
+    }
+
+    LOCATIONS {
+        integer id PK
+        integer project_id FK
+        varchar name
+        text description
+        varchar atmosphere
+        timestamp created_at
+        timestamp updated_at
+    }
+
+    ITEMS {
+        integer id PK
+        integer project_id FK
+        varchar name
+        text description
+        text significance
+        timestamp created_at
+        timestamp updated_at
+    }
+
+    SCENE_CHARACTERS {
+        integer scene_id PK, FK
+        integer character_id PK, FK
+        varchar role_in_scene
+        text knowledge_gained
+    }
+
+    SCENE_ITEMS {
+        integer scene_id PK, FK
+        integer item_id PK, FK
+        text purpose_in_scene
+    }
+```
+
+## Relationship Summary
+
+- One **story project** can have many scenes, characters, locations, and items.
+- One **location** can be used by many scenes, while a scene can have zero or one location.
+- **Scenes** and **characters** have a many-to-many relationship through `scene_characters`.
+- **Scenes** and **items** have a many-to-many relationship through `scene_items`.
+- The composite primary keys in the join tables prevent the same character or item from being assigned to the same scene more than once.

planning/user_stories.md

@@ -4,10 +4,22 @@ Reference the Writing User Stories final project guide in the course portal for
 
 ## Outline User Roles
 
-[👉🏾👉🏾👉🏾 Include at least at least 1, but no more than 3, user roles.]
+1. **Story Creator** - A writer, game designer, filmmaker, student, or creator who uses ArcForge to plan and organize a story project.
+2. **Team Member** - A collaborator who helps review, add, or update story details in a shared creative project.
+3. **Instructor / Reviewer** - A person who reviews the project structure, progress, and story organization for feedback or evaluation.
 
 ## Draft User Stories
 
-[👉🏾👉🏾👉🏾 Include at least at least 10 user stories in this format:]
-
 1. As a [user role], I want to [what], so that [why].
+2. As a Story Creator, I want to create a new story project, so that I can organize all of my story ideas in one place.
+3. As a Story Creator, I want to add scenes to a story project, so that I can plan the major events in my story.
+4. As a Story Creator, I want to create character profiles, so that I can keep track of each character's role, background, and purpose.
+5. As a Story Creator, I want to add locations, so that I can remember where each scene takes place.
+6. As a Story Creator, I want to assign characters to scenes, so that I can see which characters appear in each part of the story.
+7. As a Story Creator, I want to describe each character's role in a scene, so that I can track whether they are the main character, helper, antagonist, observer, or another role.
+8. As a Story Creator, I want to mark a scene's status as draft, in progress, or completed, so that I can track my story planning progress.
+9. As a Story Creator, I want to filter scenes by character, location, mood, or status, so that I can quickly find the story details I need.
+10. As a Story Creator, I want to view scenes in timeline order, so that I can check whether the story events make sense chronologically.
+11. As a Team Member, I want to view the story overview page, so that I can understand the project's characters, scenes, locations, and progress before contributing.
+12. As a Team Member, I want to edit existing scene details, so that I can help update the story as the project changes.
+13. As an Instructor / Reviewer, I want to see a clear list of planned features and story data, so that I can understand how the app supports full-stack functionality and relational database design.