{"id":19672601,"url":"https://github.com/ihorsylakov/assignment-1","last_synced_at":"2026-04-19T05:37:44.492Z","repository":{"id":231121556,"uuid":"508334647","full_name":"IhorSylakov/assignment-1","owner":"IhorSylakov","description":"This is an assignment that I completed a few years ago as part of a job application process. Its purpose was to help the company evaluate my skills in React and frontend development. The company used this assignment to assess my coding abilities and determine a suitable position for me within the company.","archived":false,"fork":false,"pushed_at":"2024-05-21T08:48:43.000Z","size":1705,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T17:47:35.460Z","etag":null,"topics":["api-rest","assignments","async","fetch","light-dark-theme","react","react-redux","react-router-dom","typescript"],"latest_commit_sha":null,"homepage":"https://ihorsylakov.github.io/assignment-1/","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/IhorSylakov.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":"2022-06-28T14:31:53.000Z","updated_at":"2025-03-03T18:35:25.000Z","dependencies_parsed_at":"2024-04-02T15:31:31.691Z","dependency_job_id":"e3cb111b-0ee3-4ac5-975e-a1a37002cde4","html_url":"https://github.com/IhorSylakov/assignment-1","commit_stats":null,"previous_names":["ihorsylakov/assignment-1"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/IhorSylakov/assignment-1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IhorSylakov%2Fassignment-1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IhorSylakov%2Fassignment-1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IhorSylakov%2Fassignment-1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IhorSylakov%2Fassignment-1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IhorSylakov","download_url":"https://codeload.github.com/IhorSylakov/assignment-1/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IhorSylakov%2Fassignment-1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31996445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"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":["api-rest","assignments","async","fetch","light-dark-theme","react","react-redux","react-router-dom","typescript"],"created_at":"2024-11-11T17:12:45.034Z","updated_at":"2026-04-19T05:37:44.426Z","avatar_url":"https://github.com/IhorSylakov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-end Assignment\n\n## Task\n\n- Create a simple post reader as a React SPA.\n- Implement above using React components and CSS3.\n- Retrieve the data shown in the app from the API described below.\n- Concentrate on functionality, code quality (CSS and JS/TS) and testability, not design.\n- Any common state management, routing and/or testing library can be used.\n- Using CSS toolkits and UI frameworks (bootstrap etc) is not ok. The purpose is to evaluate your coding skills, not npm skills.\n\nMust haves:\n- Login Screen with email and name inputs.\n- Sender list with sender name and post count ordered by name alphabetically. \n- Clicking on a sender opens that sender's posts in the post list view.\n- Post list where posts are ordered by creation time.\n- Post order buttons to allow choosing most recent first and most recent last ordering for posts list\n\nNice to haves:\n- Search box for senders. Any senders whose name do not contain the text entered are hidden\n- Search box for posts. Any posts that do not contain the text entered are hidden\n- Deep-linkable post list. This means that it is possible to enter a URL that directly selects the sender whose posts are shown.\n\n## Rough Design\n![Login Screen](https://raw.githubusercontent.com/IhorSylakov/IhorSylakov/main/repo-previews/assignment-1-login.png)\n![Posts Screen](https://raw.githubusercontent.com/IhorSylakov/IhorSylakov/main/repo-previews/assignment-1-posts.png)\n\n## API\n\n0. Unfortunately the original API has not survived. To keep my test application working I had to familiarize myself with a short course on the backend. I also had to read the instructions on how to create a backend using nodejs and express to emulate the behavior of the original backend. I'm afraid I didn't get it all right, but the main points are working - receiving requests from the frontend to the specified endpoints and responding to these requests.\n\n1. Use the following endpoint to register a token:\n\n    **POST:** `https://assignment-1-backend-1.vercel.app/register`\n\n    **PARAMS:**\n   \n    ```\n    *client_id:* ju16a6m81mhid5ue1z3v2g0uh\n \n    *email:* User's email from login screen\n \n    *name:* User's name from login screen\n    ```\n\n    **RETURNS**\n    \n    ```\n    *token:* This token string should be used in the subsequent query. Please note that this token will only last \n                1 hour from when the REGISTER call happens. You will need to register and fetch a new token as you need it.\n \n    *client_id:* Returned for informational purposes only\n \n    *email:* Returned for informational purposes only\n    ```\n\n2. Use the following endpoint to fetch posts:\n\n    **GET:** `https://assignment-1-backend-1.vercel.app/posts`\n\n    **PARAMS:**\n    \n    ```\n    *sl_token:* Token from the register call\n \n    *page:* Integer page number of posts (1-10)\n    ```\n\n    **RETURNS:**\n    \n    ```\n    *page:* What page was requested or retrieved\n \n    *posts:* 100 posts per page\n    ```\n\n## How it works\n\n[Check how it works on page](https://ihorsylakov.github.io/assignment-1/)\n\n### Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run start\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n\u003c!-- ### Tests\n```\nnpm run test\n``` --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihorsylakov%2Fassignment-1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fihorsylakov%2Fassignment-1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihorsylakov%2Fassignment-1/lists"}