https://github.com/neelxie/ferpection
This is a typescript project to showcase items and inner workings of those product derivatives.
https://github.com/neelxie/ferpection
cssmodules nextjs react typescript
Last synced: about 1 month ago
JSON representation
This is a typescript project to showcase items and inner workings of those product derivatives.
- Host: GitHub
- URL: https://github.com/neelxie/ferpection
- Owner: neelxie
- Created: 2022-04-05T08:52:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-05T01:46:34.000Z (about 4 years ago)
- Last Synced: 2025-06-02T14:57:54.511Z (about 1 year ago)
- Topics: cssmodules, nextjs, react, typescript
- Language: TypeScript
- Homepage:
- Size: 657 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Developer
Using this project as a base, an application to manage an inventory. There are products, filters, an iten checklist, and interactions between all three.
Good luck!
### Step 1: Show products
One 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.
Data are provided by an API: `/api/products`
### Step 2: Interact with products
When the user selects a product, he should be able to access a **form** to indicate how many copies of this product he has.
The product card will display the **quantity** of the product currently **in stock**.
*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.*
### Step 3: Filter products
Add an option to **filter** the product collection. The user should be able to filter by:
- only the products he currently has
- only the products he doesn’t have
- only the products he can craft
*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)*
### Step 4: Craft products
Some 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:
- the quantity of selected products should be increased
- the quantity of materials should be decreased
The product should be automatically deselected after crafting.
### Step 5: Shop/Loot for materials
Create an item checklist showing:
- the name of the product
- the quantity needed
- a checkbox to let the user indicates he bought the product
When the user selects “uncraftable” products, he should be able to click on a button to add their materials to the item checklist:
- items should be merged in the list; if it is needed in several products, the total quantity should be summed from its parts
- only basic products (products without materials) can be added to the item checklist
When a product is checked, the quantity should be automatically added to the stock and the product should disappear from the list
## Getting started with the project
This 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).
It’s also a GitHub template project. Click on “Use this template” button to create your own project. Then clone it locally to start working.
1. Install the deps `yarn install`.
2. Start the development server `yarn dev`.
3. Open [http://localhost:3000](http://localhost:3000/) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[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`.
The `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.