fe-interview-backend

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.

Getting started

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

Data models

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;
}

Supported routes

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.

Search

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

Full-text search

Paginate

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

Nice to haves

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

crlc/brightwheel