Skip to content

dcasia/frontend-test

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 

Repository files navigation

Front-end Test - Building a Search Box Component

Versions in other languages: 中文

We want you to develop a search box component that has the function of searching for the programming tools we are using at DC. Let's get started!

Materials

  • The completed pages should strictly follow the design templates offered by us, which can be found here: design templates on Figma. You may need to create a free account to be able to inspect the elements precisely.

  • The data should be retrieved from the following API: GET -> https://frontend-test-api.digitalcreative.cn/?no-throttling=true&search=flutter

  • A total of 4 different searching states of the search box should be included:

    • Successful request without any result: When the API responses, no result was found.

      Successful request without any result

    • Successful request with results: When the API responses, the results are successfully found.

      Successful request with results

    • Pending request: When the request hasn't yet gotten a response.

      Pending request

    • Error while requesting: When the API is responding, an error or a timeout occurred.

      Please note that you have to change the no-throttling parameter in the query string to false to make the API simulate this kind of situation.

      Error while requesting

Rules

  • The application has to be developed using Vue or React.

  • Split your code into logical reusable components. We want to see how you isolate your components.

  • You have to create at least 3 universal components, which are

    • Search bar component

      Search bar

    • Tag component

      Tag

    • Result item component

      Result item

  • For styling, you can go for anything of your choice. We use Tailwind CSS and Sass at DC, but you can feel free to use any CSS frameworks or preprocessors that you're more comfortable with.

  • Write a README.md file that documents your thinking process when working on this task - you can also add any additional information that you'd like to share with us, such as suggestions or questions. Last, don't forget to include an installation instruction for us.

  • When you get all those things done please send us a zip file that includes the project.

What we will be looking for

  • A nice architecture. Code should be written in a way that's easy to read and follow - a clear folder structure is very crucial as well.
  • A good UI composition. We'll evaluate your work based on how you connected the components, how the data flows, how the states are managed within the application.
  • Consistent and clean code.

Bonus points

  • Used Typescript
  • Implemented pixel-perfect UI
  • Adopted up-to-date building frameworks/tools
  • Incorporated CSS animations/transitions
  • Added keyboard controls (Tab key)
  • Improved functions or UI/UX according to your own thoughts
  • ...

Final effects

  • Normal usage

    Normal usage

  • Dealing with error

    Error case

  • Dealing with timing out

    Timing out

  • Dealing with keyboard controls (nice to have)

    Keyboard control


If you have any doubt, don't hesitate and send us an email ([email protected]).

We can't wait to see what you come up with! Thanks for your time!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published