{"id":16983448,"url":"https://github.com/neelxie/ferpection","last_synced_at":"2026-04-29T21:31:27.324Z","repository":{"id":101417413,"uuid":"478046534","full_name":"neelxie/ferpection","owner":"neelxie","description":"This is a typescript project to showcase items and inner workings of those product derivatives.","archived":false,"fork":false,"pushed_at":"2022-05-05T01:46:34.000Z","size":673,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-02T14:57:54.511Z","etag":null,"topics":["cssmodules","nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"","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/neelxie.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-04-05T08:52:01.000Z","updated_at":"2022-05-31T12:46:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"3fae6859-f45a-495d-9f21-2ca9253b867f","html_url":"https://github.com/neelxie/ferpection","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/neelxie/ferpection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neelxie%2Fferpection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neelxie%2Fferpection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neelxie%2Fferpection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neelxie%2Fferpection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neelxie","download_url":"https://codeload.github.com/neelxie/ferpection/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neelxie%2Fferpection/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32444937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T20:22:27.477Z","status":"ssl_error","status_checked_at":"2026-04-29T20:22:26.507Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["cssmodules","nextjs","react","typescript"],"created_at":"2024-10-14T02:28:38.572Z","updated_at":"2026-04-29T21:31:27.305Z","avatar_url":"https://github.com/neelxie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Developer\n\nUsing this project as a base, an application to manage an inventory. There are products, filters, an iten checklist, and interactions between all three.\n\n\nGood luck!\n\n### Step 1: Show products\n\nOne page should display the products. Show them in a collection of product cards, a.k.a.: a grid. Each card should have the **picture** and the **name** of the product.\n\nData are provided by an API: `/api/products`\n\n![Product Grid Step 1](public/wireframes/step-one.jpg)\n\n### Step 2: Interact with products\n\nWhen the user selects a product, he should be able to access  a **form** to indicate how many copies of this product he has. \n\nThe product card will display the **quantity** of the product currently **in stock**.\n\n*This project does not handle database; the API only provides hardcoded data and doesn’t support mutations. This is a Frontend Developer test, we don’t ask you to use databases or improve the API. However, the user should be able to **recover his information** when coming back.*\n\n![Product Details Step 2](public/wireframes/step-two.jpg)\n\n![Product Grid Step 2](public/wireframes/step-two-grid.jpg)\n\n### Step 3: Filter products\n\nAdd an option to **filter** the product collection. The user should be able to filter by:\n\n- only the products he currently has\n- only the products he doesn’t have\n- only the products he can craft\n\n*Some products can be crafted from other products. The API provides, for each product, a list of materials needed to craft it. When the material list is empty, the product is a basic product that can be bought directly. (see also the following steps for more context)*\n\n![Product Grid Step 3](public/wireframes/step-three.jpg)\n\n### Step 4: Craft products\n\nSome products can be crafted from other products. When the user selects “craftable” products, he should be able to click on a button to craft them:\n\n- the quantity of selected products should be increased\n- the quantity of materials should be decreased\n\nThe product should be automatically deselected after crafting.\n\n![Product Grid Step 4](public/wireframes/step-four-grid.jpg)\n\n![Product Details Step 4](public/wireframes/step-four.jpg)\n\n### Step 5: Shop/Loot for materials\n\nCreate an item checklist showing:\n\n- the name of the product\n- the quantity needed\n- a checkbox to let the user indicates he bought the product\n\nWhen the user selects “uncraftable” products, he should be able to click on a button to add their materials to the item checklist:\n\n- items should be merged in the list; if it is needed in several products, the total quantity should be summed from its parts\n- only basic products (products without materials) can be added to the item checklist\n\nWhen a product is checked, the quantity should be automatically added to the stock and the product should disappear from the list\n\n![Product Grid Step 5](public/wireframes/step-five-grid.jpg)\n\n![Product Details Step 5](public/wireframes/step-five.jpg)\n\n## Getting started with the project\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). \n\nIt’s also a GitHub template project. Click on “Use this template” button to create your own project. Then clone it locally to start working.\n\n1. Install the deps `yarn install`.\n2. Start the development server `yarn dev`.\n3. Open [http://localhost:3000](http://localhost:3000/) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/products](http://localhost:3000/api/products). This endpoint can be edited in `pages/api/products.ts`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneelxie%2Fferpection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneelxie%2Fferpection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneelxie%2Fferpection/lists"}