wiredcraft/test-frontend

Frontend

Context

We need to build a simple webpage following a design like the following screenshot, which features the "Masonry Layout". See the Figma link for the design.

Requirements

1. It should load a list of picture URLs from a JSON API. Please use the JSON file below as a sample, and build a simple API to serve it.
2. It should apply Masonry Layout. See the link for the definition and feature list.
3. It should provide a search input, and allow the users to search images with the "name" attribute. The search input should work as a filter and automatically filters with the user input.

{% file src="../.gitbook/assets/data.json.zip" caption="Data Source JSON file" %}

or download the data.json directly from this repo.

Tech stack

• Use React, and optionally React-router.
• Use a state management tool. We often use Redux or MobX.
• Use SASS or Less for CSS.
• We are open to other 3rd-party tools but please limit the use - it's a test for you to demonstrate your skill after all.

Advanced requirements

Here are some further challenges for you to demonstrate your skills. You can safely skip them if you are not applying as a senior.

• Make it responsive.
• Feature "Lazy-loading".

test-frontend's Issues

Freelancers

Hello guys, are you open to work with freelancers?

Need some clarifications on UI design

1. In the mock picture, the right icons of each cell under Region column are a bit confusing:
   I assume for the collapsed row the right icon should be + sign, for expanded row, the right icon should be - sign.
   Also on each District level, if it has township, the right label text should be <num> Township, am I right?
2. For the Filter and search box on the top, what is the Filter dropdown list?
   I'm assuming these filter list are to represent all three Region level State, District, Township, right?
3. Since there are no separate asset files for icons, can I just crop these icon directly from the mock picture? The image quality would be low, I want to make sure that's acceptable.

Thank you.

Should totally follow mockup?

Hi
Recently I'm building this project in this repo.
The style I implemented look like this, does it permitted?

github page

Can I use some other frontend frameworks(such as angular、vue)？

Hi，To be honest. I didn't use react related technology stack. Can I use some other frontend frameworks(such as angular、vue)？

Can i use typescript?

The question is above.

How to understand icon letter for the row?

Shan state has S
Aunglan is D

Question on test completion

Hello, I was just wondering about whether or not I should submit a PR once I have finished with the core requirements, while I continue to work on the bonus/advanced requirements, or if I should just do it once I have completed all things planned?

About the css writing in react

I consider using CSS-in-JS library like styled-component to implement this test.

about the unit test

Hi,
Here is the preview of my working , yet it still got some problems ,and i am fixing it . the repo and i will finished in one day.

And my question is about the unit test , i am not sure about what kind of test it should be, can you explain in more detail ? thx~

Considering icons

Can I use third-party icon packs like font-awesome for icons?
Does those icons have actual functionality or just decorations

Initial Questions

1. Can I use vanilla CSS instead of SASS?

2. I wanted to ask you your advice in best practices when creating the collapsible row component. What are aspects of this component that I need to be careful with?

3. When collapsing back to the state level row, does the row go back to its default state?
   See image below for full explanation of edge case scenario.

4. What kind of testing framework would you prefer? This is the first time I have been asked for unit testing on React. I have read Jest is a common framework for unit testing on React.