{"id":28237005,"url":"https://github.com/bytebodger/suggestion-box","last_synced_at":"2025-06-10T15:30:57.615Z","repository":{"id":249886817,"uuid":"832814157","full_name":"bytebodger/suggestion-box","owner":"bytebodger","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-24T22:32:58.000Z","size":485,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-08T01:07:04.206Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/bytebodger.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":"2024-07-23T19:21:22.000Z","updated_at":"2024-07-24T22:33:00.000Z","dependencies_parsed_at":"2024-07-24T00:46:59.123Z","dependency_job_id":"4f79b2b7-2ff6-4633-b9d8-5f0a2298d546","html_url":"https://github.com/bytebodger/suggestion-box","commit_stats":null,"previous_names":["bytebodger/suggestion-box"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fsuggestion-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fsuggestion-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fsuggestion-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fsuggestion-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytebodger","download_url":"https://codeload.github.com/bytebodger/suggestion-box/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytebodger%2Fsuggestion-box/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259101140,"owners_count":22805213,"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":[],"created_at":"2025-05-19T00:17:14.864Z","updated_at":"2025-06-10T15:30:57.603Z","avatar_url":"https://github.com/bytebodger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![screenshot](https://github.com/bytebodger/suggestion-box/blob/main/public/screenshot.png?raw=true)\n\n# suggestion-box\n\n### Objective\n\nTo demonstrate my proficiency in architecture, state management, and data presentation.\n\n### Overview\n\nThis codebase simulates an online \"suggestion box\" that allows the user to:\n\n- Submit new suggestions\n- View suggestion comment threads\n- Contribute to existing threads\n\n### Requirements\n\n1. **In-memory data provider:**  The app uses Zustand for in-memory data (i.e., state management).  The three main data objects are Comment, Suggestion, and User.  User represents any person who has submitted a suggestion or a comment.  Suggestion represents a single suggestion.  Comment represents a single comment.  The Suggestion interface contains an array of all associated comments.\n2. **Mock data:** When the app loads, it automatically generates 10 random users and 10 random suggestions.  This uses the Lorem Ipsum functionality available in the `faker` NPM package.  The first randomly-generated user is assumed to be the currently-logged-in user.  Each randomly-generated suggestion is assigned randomly to one of the users.  Each suggestion also has a random number of comments that have been generated under it.\n3. **UI:** The system uses Material UI to provide a \"clean\" look-and-feel for all display elements.  While the given display does not exactly mirror that which was provided in the PDF instructions, it adheres closely to that paradigm.\n4. **Random suggestions:** I wasn't sure from the instructions whether you wanted to have some new button/feature that would allow you to create _additional_ randomly-generated suggestions on-the-fly?  I didn't add such a feature because I'm already randomly generating the initial load of 10 users and 10 suggestions when the app loads and you can add more suggestions/comments manually within the app.  However, the functionality in `useDataGenerator` would make it trivial to add such a button.\n5. **User suggestions:** The functionality provided allows users to create new suggestions and add comments to existing suggestions.\n\n### Submission\n\nThis repository should be self-contained, meaning that you shouldn't need any additional dependencies other than that which are included in the `package.json`.  (Assuming, of course, that you already have the ability to run a React project locally on your own system.)\n\nTo run this project, first clone the repository with\n\n`git clone https://github.com/bytebodger/suggestion-box.git`\n\nThen, once you've moved into the directory, run:\n\n`npm install`\n\nFollowed by:\n\n`npm start`\n\nThis should allow you to review all functionality in your browser at:\n\n`http://localhost:3000`\n\n### Notes\n\nThe following are some features that I'd like to highlight:\n\n- The currently-viewed suggestion thread is highlighted in grey in the left nav.\n- Every user is given an automatically-generated avatar with their initials and an algorithmically-assigned color.  This makes it easier to see which suggestions/comments came from which user.\n- Timestamps are displayed both for suggestions and comments.\n- In suggestion threads, comments from the original poster are displayed as right-aligned and highlighted in blue.  All other comments are displayed as left-aligned and highlighted in grey.\n- New suggestions are accomplished with a sliding dialog box.\n- The titles for each suggestion are truncated with an ellipsis if they are too long to be comfortably displayed in the left nav.\n- Tooltips are provided where appropriate to give the user additional context.\n- Suggestions are shown in the left nav in descending chronological order (most recent at the top).\n- Comments are shown in chronological order (oldest at the top) so the discussion can be read in the order in which it was created.\n- Datetimes are displayed as MM/DD/YYYY with the time shown on a 24-hour clock.  All datetimes are tracked with UTC timestamps, which are then displayed in the user's local time.\n- The `\u003cShowIf/\u003e` component is a helper component that allows for the display of conditional information in the JSX while maintaining a purely-declarative syntax.\n- All code utilizes modern React syntax with Hooks and a strong adherence to TypeScript conventions.  There are no class-based components.\n\n### Next Steps\n\nThe following were beyond the scope of the requested features, but would be logical to add in future iterations:\n\n- Login functionality\n- A top nav bar that confirms the currently-logged-in user\n- Search\n- The ability to click on any given user and see a new screen that shows all of their suggestions and/or all comments that they've added to existing suggestions\n- The ability to mark a suggestion as being \"Resolved\" or \"Closed\"\n- The ability to mark a suggestion as being a \"Duplicate\" - presumably referencing another suggestion in which the main discussion may be ongoing\n\n### Evaluation Criteria\n\n1. **Functionality:** I believe that this application meets all specified requirements.\n2. **Code quality:** The code is carefully organized.  It uses a model where each file contains a single `export`.  Files are organized according to function (e.g., `\\components`, `\\enums`, `\\functions`, etc.).  All shared functionality is organized under the `\\common` directory.  I believe in an approach dictating that all components, objects, functions, etc. should be named as clearly as possible - thus sidestepping the need to exhaustively comment on what each part of the code _does_.\n3. **Architecture:** The code should be easily extensible if new features were to be added.  Although there is only a single route, React Router was used to ensure that additional pages/modules could easily be added. \n4. **State management:** I have chosen Zustand for state management.  This approach is highly performant without all of the boilerplate which is common in Redux projects.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebodger%2Fsuggestion-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytebodger%2Fsuggestion-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytebodger%2Fsuggestion-box/lists"}