Welcome to the Search UI coding challenge. You will be asked to build a small application demonstrating your abilities in React and TypeScript. This challenge is targeted towards mid to senior level engineers.
- Clone this repository to your local machine
- Create a new private repository on GitHub so others can't copy your work
- Push your local clone up to your private repository while preserving history
- Create a simple UI that meets the requirements below
- Use any libraries you like, keeping performance and bundle size in mind
- Use any UI framework you like, but don't spend too much time here
- This challenge should only take an hour or two
Install dependencies using npm install.
Run npm start to concurrently start the server and UI in development mode.
Open http://localhost:3000 to view the UI in the browser. The page will reload if you make edits.
- The API server is run on port
3001while the React UI is run on port3000 - Your UI can call
/api/data?search=[some-query]directly since the request will be proxied tohttp://localhost/api/data?... - You will to need access the API on port
3001if you're testing it directly from outside your application (e.g. http://localhost:3001/api/data?search=credit)
As a consumer I want to research financial topics so I can make informed decisions.
Scenario: The application shall provide a search form
Given the user visits the application
Then a search field is displayed
And a button is displayed with the text "Search"
Scenario: The search shall be triggerable by clicking the "Search" button
Given the user has entered a search query
When the user clicks the "Search" button
Then matching search results are displayed
Scenario: The search shall be triggerable by pressing the Enter key
Given the user has entered a search query
And the input field is currently focused
When the user clicks presses the Enter key on their keyboard
Then matching search results are displayed
Scenario: A loading state shall be shown while search results are loading
Given the user has entered a search query
When the user submits their search
Then a loading state is shown until the search results are available
Scenario: Search results shall show result title and description
Given a user has performed a search
When search results are displayed
Then the title and description of each search result are displayed
Scenario: Clicking a search result shall open its URLs in a new tab
Given search results are displayed
When search result is clicked
Then the URL of the search result is opened in a new tab
Scenario: Search results shall be marked as their content type
Given search results are displayed
Then each result is clearly marked for the end user as a video, a playlist, or a blog post in a readable way
Scenario: The user shall be informed if no search results match their query
Given the user has performed a search
When there are no results matching their search query
Then the message "There are no results matching your query." is displayed
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent