This repository contains a local mock backend server for the brightwheel frontend coding challenge as well as an empty React app using create-react-app
, which you may use as a starting point. Feel free to use a different frontend framework (Angular/Vue/Svelte/etc..) or vanilla JS if you prefer.
Install project dependencies
yarn install
Start the frontend and the mock backend together
yarn start:mock
Or start the backend by itself
yarn start:api
This will create a locally hosted backend that you can access at http://localhost:3001
This database will create a random collection of fake Companies for you to connect your app to. The data is re-generated each time you start the server.
interface Address {
address1: string;
address2?: string;
city: string;
state: string;
postalCode: string;
}
interface Company {
id: string;
starred: boolean;
name: string;
description: string;
address: Address;
image?: string;
}
GET /search
GET /search/:id
POST /search
PUT /search/:id
PATCH /search/:id
DELETE /search/:id
When doing requests, it's good to know that:
- If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to
db.json
using lowdb. - Changes will persist so long as the server is running and will be overwritten next time the server is started
- Your request body JSON should be object enclosed, just like the GET output. (for example
{"name": "Foobar"}
) - Id values are not mutable. Any
id
value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken. - A POST, PUT or PATCH request should include a
Content-Type: application/json
header to use the JSON in the request body. Otherwise it will return a 2XX status code, but no changes will be made to the data.
Add q
to search ALL the fields for a string
GET /search?q=fish
Search individual fields by field name. Use .
to access deep properties
GET /search?id=company.5
GET /search?name=snake
GET /search?taxonomy.family=dog
Add _like
to filter (RegExp supported)
GET /search?name_like=cat
Use _page
and optionally _limit
to paginate returned data.
In the Link
header you'll get first
, prev
, next
and last
links.
GET /search?_page=7
GET /search?_page=7&_limit=20
By default ALL matching results are returned
- Implement a component library such as Semantic UI to stylize the cards.
- Implement field and _like search in the UI
- Add unit and integration tests
- Show more than 10 results with pagination