{"id":26645907,"url":"https://github.com/fishglitch/schrodingers-backpack-fullstack","last_synced_at":"2025-03-24T22:46:41.412Z","repository":{"id":281964539,"uuid":"940322959","full_name":"fishglitch/schrodingers-backpack-fullstack","owner":"fishglitch","description":"A full-stack app for authenticated users to perform CRUD operations on memories of a deceased loved one, including physical items and significant life events.","archived":false,"fork":false,"pushed_at":"2025-03-24T18:56:37.000Z","size":2495,"stargazers_count":1,"open_issues_count":33,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T19:41:58.715Z","etag":null,"topics":["archives","crowdsourcing","expressjs","postgresql-database","reactjs","user-authentication","vitejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fishglitch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-28T01:25:02.000Z","updated_at":"2025-03-24T18:56:40.000Z","dependencies_parsed_at":"2025-03-16T22:46:09.050Z","dependency_job_id":null,"html_url":"https://github.com/fishglitch/schrodingers-backpack-fullstack","commit_stats":null,"previous_names":["fishglitch/digitalarchive","fishglitch/schrodingers-backpack-fullstack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fschrodingers-backpack-fullstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fschrodingers-backpack-fullstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fschrodingers-backpack-fullstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fschrodingers-backpack-fullstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fishglitch","download_url":"https://codeload.github.com/fishglitch/schrodingers-backpack-fullstack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245366200,"owners_count":20603439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["archives","crowdsourcing","expressjs","postgresql-database","reactjs","user-authentication","vitejs"],"created_at":"2025-03-24T22:46:40.872Z","updated_at":"2025-03-24T22:46:41.385Z","avatar_url":"https://github.com/fishglitch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Schrodinger's Backpack: A Memory Archive\n\n## Overview\n\nSchrodinger's Backpack is a full-stack application designed to allow users to submit, store, and reflect upon memories of a deceased loved one through items they might carry in this ancestor's backpack. Inspired by the concept of \"what's in my backpack,\" and the thought experiment \"Schrodinger's Cat\", this app provides a sentimental space for users to reflect on how those memories exist in a state of uncertainty until actively acknowledged and celebrated.\n\n## Table of Contents\n\n- [Technologies](#technologies)\n- [Features](#features)\n- [Purpose](#purpose)\n- [Project Directory Structure](#project-directory-structure)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Git Commit Message Guidelines](#git-commit-message-guidelines)\n- [Branches](#branches)\n- [How to Switch Branches](#switch-branches#)\n- [Roadmap of Features](#roadmap-of-features)\n- [Accessibility Considerations](#accessibility-considerations)\n- [Contributing and Contact Info](#contributing-and-contact-info)\n- [Acknowledgements](#acknowledgements)\n- [Debugging](#debugging)\n\n## Technologies\n\n- **Frontend**: Vite, React\n- **Backend**: Express.js, PostgreSQL\n\n## Features\n\n- User authentication with hashed passwords\n- Submit memories with titles, descriptions, images, and context\n- CRUD operations for managing users and memories\n- Intuitive interface for memory browsing\n\n## Purpose\n\n**As of March 2025: a Minimum Viable Product** This app serves as a digital memory box to collectively celebrate the life of a loved one. Inspired by the concept of Schrodinger's Cat, the app prompts users to consider, \"What would [this person] carry in their backpack?\". In physicist Erwin Schrodinger's famous 1935 thought experiment, a hypothetical cat in a sealed box exists in a mysterious state of being both alive and dead living and death until the box is opened and examined. Just like the cat, or, tiny particles in quantum physics that can be in two states at once until observed, our memories of this late ancestor can feel uncertain until we bring them to light. By sharing and reflecting on these memories through the app, users transform this uncertainty into meaningful, lasting memories that celebrate this transitioned loved one's well-lived life.\n\n## Project Directory Structure\n\n_Separation of concerns is observed through this structure_\n\n```plaintext\nschrodingers_backpack_fullstack/\nnpm run start:dev --prefix server\nnpm run dev --prefix client\n├── client/         # Frontend code (React, Vite, etc.)\n|                   # npm run dev\n│   ├── public/     # Static files for the client\n│   ├── src/        # Source code for the client\n│   │   ├── assets/        # Images and other assets\n│   │   ├── components/    # Child components\n│   │   ├── css/          # Styling for the child components\n│   │   └── App.jsx       # Main/parent application file\n│   └── package.json      # Client-side dependencies and scripts\n│\n└── server/         # Backend code (Express, Node.js, etc.)\n |                # npm run start:dev\n ├── api/        # Define your API routes and handlers\n ├── config/     # Configuration files like DB connections\n ├── controllers/ # Logic for handling requests\n ├── models/     # Database models (if using a DB)\n ├── middleware/  # Any middleware functions\n ├── routes/      # Route definitions\n ├── server.js    # Main server file to start the application\n └── package.json  # Server-side dependencies and scripts\n```\n\n## Installation\n\nTo set up the project, follow these steps:\n\n1. Clone repo\n2. Navigate to project directory\n3. Set up backend / server\n\n```bash\n# initializes node application\nnpm init -y # for general install,\nnpm init # for customizable install\n\n# Install Express and other dependencies\nnpm install --save-dev nodemon \u0026\u0026 # nodemon as a development dependency; to allow Node.js app to automatically restart for detected directory file change instances\n# \u0026\u0026 a shell operator that allows run of multiple commands in sequence. The next command will only run if the previous one is successful\nnpm install --save express # Node.js web framework handling API routing, middleware, HTTP requests\nnpm install --save pg # PostgreSQL client for Node.js to interact with psql database\nnpm install --save bcrypt # secure password hashing library for user authentication\nnpm install jsonwebtoken # creation and verification of JWTs for authentication and session management; Library for creating and verifying JSON Web Tokens (JWT)\nnpm install --save uuid # Library for generating unique identifiers (UUIDs) for database record\nnpm install morgan # middleware for HTTP requests logging in Express apps; for tracking server activity\nnpm install dotenv # module that loads environment variables from a .env file into process.env; to configure  application without hardcoding sensitive data (like API keys, database passwords, etc.) directly into  source code; separation makes it easier to manage configuration settings for different environments (development, testing, production) by changing the .env file instead of modifying code\nnpm install cors # security feature for web applications to facilitate safe API sharing\n\n# Or, this shortcut:\nnpm install --save express pg bcrypt jsonwebtoken uuid morgan dotenv cors\n```\n4. Confirm start scripts in package.json\n\n```javascript\n{\n    \"scripts\": {\n        \"start\": \"node server.js\",\n        \"start:dev\": \"nodemon server.js\"\n    }\n}\n```\n5. Set up frontend / client with dependencies:\n\n```bash\nnpm install vite@latest\nnpm install # Install all dependencies listed in package.json\nnpm run dev # starts Vite development server, which should detail running the server in terminal\n\n# install dependencies\nnpm install react-router-dom\n```\n\n## Usage\n\n1. After installing, run the server in a terminal:\n\n```bash\nnpm run start:dev \n# at http://localhost:3000 (or other specified port in your environment variables)\n# CTRL + C to quit\n\n```\n2. To run client and access app through browser \n```bash\n# open a second terminal\ncd client\nnpm run dev \n# at http://localhost:5173\n# CTRL + C to quit\n```\n## Git Commit Message Guidelines\n\n1. **Add/Update/Delete/Remove**:\n\n   - `git commit -m \"Add user authentication\"`\n   - `git commit -m \"Update README with installation instructions\"`\n   - `git commit -m \"Remove unused images\"`\n\n2. **Fix**:\n\n   - `git commit -m \"Fix bug in user login logic\"`\n   - `git commit -m \"Fix typo in the homepage header\"`\n\n3. **Improve**:\n\n   - `git commit -m \"Improve performance of data fetching function\"`\n\n4. **Refactor**:\n\n   - `git commit -m \"Refactor user profile component for better readability\"`\n\n5. **Feature/Enhancement**:\n\n   - `git commit -m \"Add search functionality to user profiles\"`\n\n6. **Documentation**:\n\n   - `git commit -m \"Document API endpoints in README\"`\n\n7. **Chore**:\n\n   - `git commit -m \"Chore: update dependencies\"`\n\n8. **Initial Commit**:\n   - `git commit -m \"Initial commit\"`\n\n# Best Practices for Commit Messages\n\n- **Use Imperative Mood**: Write messages in the imperative (e.g., \"Fix bug\", \"Add feature\").\n- **Be Descriptive**: Provide clarity; add more context if needed:\n  ```bash\n  git commit -m \"Add image upload feature\" -m \"This feature allows users to upload images to their profiles.\"\n  ```\n\n## Branches\n\nThis repository contains two primary branches:\n\n### `main`\n\n- **Purpose**: This branch represents the stable production-ready version of the application. Changes that have been thoroughly tested and are ready for deployment are merged into this branch.\n- **Usage**: Use this branch if you want to run or deploy the application in a production environment.\n\n### `feature`\n\n- **Purpose**: This branch serves as the development branch where new features, bug fixes, and other changes are integrated and tested before they are merged into the `main` branch.\n- **Usage**: You can check out this branch to explore the latest features, contribute code, or help with testing.\n\n## How to Switch Branches\n\nTo switch between branches, use the following Git commands:\n\n```bash\n# To switch to the feature branch\ngit checkout feature\n\n# To switch back to the main branch\ngit checkout main\n1. Main branch has clean code\n2. console.log branch has console.logs and other notes.\n```\n\n## Roadmap of Features\n\n1. Minimum Viable Product (March 2025)\n2. Tier 2 (TBD)\n3. Tier 3 (TBD) including accessbility considerations\n\n## Accessibility Considerations (Tier 3)\n\nKey practices to follow for designing for accessibility to ensure as many users can effectively interact with the app:\n\nTo ensure our application is accessible to all users, implement the following directives:\n\n1. **Use Semantic HTML**:\n\n   - Utilize HTML5 elements like `\u003cheader\u003e`, `\u003cnav\u003e`, `\u003cmain\u003e`, `\u003carticle\u003e`, and `\u003cfooter\u003e` to give structure and meaning to your content.\n\n2. **Implement ARIA Roles**:\n\n   - Use ARIA attributes where necessary:\n     - Assign `role` attributes such as `role=\"button\"` for non-button elements that act like buttons.\n     - Use `aria-label` to provide descriptions where the visual presentation does not convey meaning.\n\n3. **Ensure High Text Contrast**:\n\n   - Check color contrast ratios to ensure text is readable. Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.\n\n4. **Keyboard Navigation**:\n\n   - Ensure all interactive elements (buttons, links, form inputs) are focusable and usable via keyboard actions (`Tab`, `Enter`, `Space`).\n   - Use `tabindex` to control the tab order of elements when necessary.\n\n5. **Forms and Labels**:\n\n   - Ensure each form input has a corresponding `\u003clabel\u003e` element.\n   - Implement accessible error handling: Use `aria-live` to announce validation messages to assistive technologies.\n\n6. **Add Alt Text to Images**:\n\n   - Provide meaningful alternative text (`alt` attribute) that describes the image’s content or function.\n   - Avoid using phrases like \"image of\" or \"picture of\"; just describe what it is.\n\n7. **Responsive and Accessible Design**:\n\n   - Use media queries in your CSS to ensure layouts work well on various screen sizes.\n   - Make sure modal dialogs can be navigated with the keyboard and can be closed using the `Esc` key.\n\n8. **Use Accessibility Testing Tools**:\n\n   - Run accessibility checks using tools like [Axe](https://www.deque.com/axe/) or [Wave](https://wave.webaim.org/) to identify issues.\n   - Test your application with screen readers (like NVDA for Windows or VoiceOver for macOS) to ensure content is read correctly.\n\n9. **Get User Feedback**:\n   - Involve users with disabilities in testing to gather feedback on usability and accessibility issues.\n\nImplementing these features will help create a more inclusive user experience and ensure that everyone can access and enjoy our application.\n\n## Contributing and Contact Info\n\nIf you have any questions or suggestions, or have submitted pull requests, feel free to reach out to me:\n\n- GitHub: [fishglitch](https://github.com/fishglitch)\n\n## Acknowledgements\n\nThank you Grace Hopper Program!\n\n## Debugging:\n\n# Ask at OSH\n1. user_id and userId Mismatch in API Payload Structure\n\nseeded data is successfully matched to model functions using \"userId\", however frontend functions respond to \"user_id\" for memories submitted on the front end. To be resolved!\n\n# Summary\nIssue Type: Mismatch in API Payload Structure\n**Description:**\nThe user_id is being stored as null in the database when creating a new memory record because the data sent from the front end uses the key userId instead of the expected user_id.\n\n**Keywords**\nAPI Mismatch: The frontend and backend are using different naming conventions for the same data field.\nPayload Structure: The structure of the JSON object being sent in the API request does not align with what the server expects.\nCamel Case vs. Snake Case: The frontend uses a camel case (userId) while the backend expects snake case (user_id).\n\n**Database Insertion:**\nThe API fails to insert the data correctly due to the naming mismatch, leading to null values.\n\n**Error Handling:**\nEnsure that proper checks and error handling are in place to identify such issues.\nConsole Logging: Utilize logging to debug values being sent in API requests.\nKey Mapping: Correctly map or transform the keys in your JSON request to match the backend requirements.\n# API testing\n\n# Notes\n- Features for TAGS and FAVORITES are disabled for further development and testing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffishglitch%2Fschrodingers-backpack-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffishglitch%2Fschrodingers-backpack-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffishglitch%2Fschrodingers-backpack-fullstack/lists"}