{"id":16105419,"url":"https://github.com/dinbtechit/react-coding-exercise-dinbtechit","last_synced_at":"2025-09-24T01:27:45.704Z","repository":{"id":107167267,"uuid":"457443688","full_name":"dinbtechit/react-coding-exercise-dinbtechit","owner":"dinbtechit","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-09T16:42:26.000Z","size":458,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-26T08:45:43.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/dinbtechit.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":"2022-02-09T16:42:08.000Z","updated_at":"2022-02-09T16:42:30.000Z","dependencies_parsed_at":"2023-03-13T14:38:08.496Z","dependency_job_id":null,"html_url":"https://github.com/dinbtechit/react-coding-exercise-dinbtechit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dinbtechit/react-coding-exercise-dinbtechit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinbtechit%2Freact-coding-exercise-dinbtechit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinbtechit%2Freact-coding-exercise-dinbtechit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinbtechit%2Freact-coding-exercise-dinbtechit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinbtechit%2Freact-coding-exercise-dinbtechit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinbtechit","download_url":"https://codeload.github.com/dinbtechit/react-coding-exercise-dinbtechit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinbtechit%2Freact-coding-exercise-dinbtechit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276678626,"owners_count":25684802,"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","status":"online","status_checked_at":"2025-09-23T02:00:09.130Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-10-09T19:09:31.904Z","updated_at":"2025-09-24T01:27:45.665Z","avatar_url":"https://github.com/dinbtechit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Seequent React Coding Test\n\n## Guidelines\n\nThanks for interviewing with Seequent! This front-end developer exercise involves a simple React/Redux basic Single Page\nApplication.\n\n- Please review the goals and questions below.\n- Create a branch to complete your tasks on.\n- Commit your code to your branch\n- Address the goals and questions directly in this README and commit it back to your branch\n- When you are complete, please open a PR to master for review\n\n## Timing\n\nWe ask that you aim to spend about 4 hours on this exercise. If you finish more quickly, great!\n\nIf you reach the 4 hour point, outline the tasks you have left to complete and the strategy you would use to complete\nthem, and then submit the exercise for review.\n\n## Running the Application\n\n- Install NPM: https://www.npmjs.com/get-npm\n- `cd react-coding-exercise-\u003cyourname\u003e`\n- `npm install`\n- `npm start`\n\n![](./preview.gif)\n\n## Goals\n\n- [X] Why is the app not running?\n    - An initial state for the todo list was not defined.\n    - `class` property was used instead of `className`\n    - `LIST_TODOS` - state was being overwritten\n- [X] Describe your understanding of what the current code base is doing\n    - A todo app that can add and list todos. Its state is managed within a redux store.\n- [X] Implement the missing Add Todo feature using the framework provided\n- [X] Implement unit tests for the `TodoList` component and the `todos` state\n- [X] Add some CSS to make your TODO list look a bit nicer\n\n## Questions\n\n- [X] Are there are bad coding practices being used, are there good coding practices that are missing?\n    - Usage of deprecated lifecycle hook `componentWillMount()`. React's official documentation recommends to\n      use `constructor()` instead for initial state.\n    - Project Structure could have been better organized.\n    - Could use typescript for better type safety.\n    - Using React class for components seems to be an old way. In the newer version, they seem to be using functions.\n    - `LIST_TODO` does not handle \"loading\" state.\n    - TodoList -\u003e `li` element did not have a unique `Key` for each item.\n    - Missing standard linting (different IDEs could lead to different formatting)\n    - [Optional] state(s) and action(s) can be in 2 separate files.\n    - store could be moved outside `App.js` for jest.mock testing\n    - Using own implementation of reducer function instead of the one from `@redux/toolkit`?\n- [X] How would you better organize this code? Are there components that should be split out?\n    - The todo component, css and state could be moved within a `todo` directory as shown below\n      ```bash\n      ├── App.css\n      ├── App.js\n      ├── index.css\n      ├── index.js\n      └── todo   \n          └── state\n              ├── todos.js\n              └── todos.test.js\n          ├── TodoList.css\n          ├── TodoList.js\n          └── TodoList.test.js\n      ``` \n        - The todoInput (input field and the button) can be made its own component.\n- [X] What is missing from this application to allow it to grow with more components and features?\n    - Missing an actual serverside\n    - Missing Router and Http Client setup.\n    - Missing linting standards (different IDEs could lead to different formatting)\n- [X] Design a REST API that this frontend would use. Include the endpoints, HTTP methods, schema for each endpoint, and\n  any other information you feel is relevant. What are some of the non-functional requirements we would need to consider\n  for this system? What could be used to meet those requirements?\n    \n    | HTTP Method | Path              | ContentType | Request Body    | Success Response                                                           |\n    |-------------|-------------------|-------------|-----------------|----------------------------------------------------------------------------|\n    | GET         | /todos            | json        | N/A             | `200`:  [ {id: string, todo: string }, {id: string, todo: string },  ... ] |\n    | POST        | /todo,/todo/{ID} | json        | {todo: string } | `201`: { status: created } \u003c/br\u003e `200`: { status: updated }                |\n    | DELETE      | /todo/{ID}        | json        | N/A             | `200`: { status: deleted }                                                 |\n\n  **Non-Functional Requirement:**\n    - validate input - Accept only valid characters - filter out `XSS` code (follow OWASP security standards)\n    - Log Request and Response for support purposes\n    - Authentication and authorization\n    - Set up a Rate Limit - to limit the number of API calls from the frontend\n    - Implement caching for GET request(s) by using hot/cold database strategy\n    - Make write requests (POST and DELETE) calls atomic or transactional\n    - Response with appropriate error codes\n        - `401` \u0026 `403` - Access denied\n        - `400` - Bad Request\n        - `500` - server error\n        - `429` - Too many requests ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinbtechit%2Freact-coding-exercise-dinbtechit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinbtechit%2Freact-coding-exercise-dinbtechit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinbtechit%2Freact-coding-exercise-dinbtechit/lists"}