{"id":26851228,"url":"https://github.com/fishglitch/smfs-backpack-fullstack","last_synced_at":"2026-04-06T21:33:30.758Z","repository":{"id":281964539,"uuid":"940322959","full_name":"fishglitch/smfs-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-04-29T22:35:23.000Z","size":9918,"stargazers_count":1,"open_issues_count":34,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-25T17:35:18.042Z","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,"zenodo":null}},"created_at":"2025-02-28T01:25:02.000Z","updated_at":"2025-04-29T22:35:27.000Z","dependencies_parsed_at":"2025-03-28T23:22:46.522Z","dependency_job_id":"5bfdc7fa-5735-475d-bc6f-278588a91f76","html_url":"https://github.com/fishglitch/smfs-backpack-fullstack","commit_stats":null,"previous_names":["fishglitch/digitalarchive","fishglitch/schrodingers-backpack-fullstack","fishglitch/smfs-backpack-fullstack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fishglitch/smfs-backpack-fullstack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fsmfs-backpack-fullstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fsmfs-backpack-fullstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fsmfs-backpack-fullstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fsmfs-backpack-fullstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fishglitch","download_url":"https://codeload.github.com/fishglitch/smfs-backpack-fullstack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fishglitch%2Fsmfs-backpack-fullstack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31491097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T17:22:55.647Z","status":"ssl_error","status_checked_at":"2026-04-06T17:22:54.741Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-30T22:19:06.889Z","updated_at":"2026-04-06T21:33:30.726Z","avatar_url":"https://github.com/fishglitch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SMF's Backpack: A Memory Archive\n\n## Overview\n\nSMF's Backpack is 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. 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- [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## Project Directory Structure\n\n* _uses ES6 module syntax for modular code organization_\n* _organized to facilitate clear separation of concerns_\n\n\n```plaintext\nschrodingers_backpack_fullstack/\n\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        # Parent application file\n│   └── package.json       # Client-side dependencies and scripts\n│\n└── server/         # Backend code (Express, Node.js, etc.)\n |                  # npm run seed:dev, npm run start:dev\n ├── api/                  # Defined API route functions and handlers per table\n |    └── utils.js         # Utility functions, incl. auth middleware\n ├── db/                  \n |    └── index.js         # Database model functions using CRUD operations\n |    └── seed.js          # Database connection management and \n                              seeding script to populate initial data\n ├── .env                  # Environment variables for configuration\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# 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%2Fsmfs-backpack-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffishglitch%2Fsmfs-backpack-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffishglitch%2Fsmfs-backpack-fullstack/lists"}