# Frontend-first development

It is often useful to work on the frontend of an application first. This allows you to validate an idea and focus on solving user-problems, rather than getting bogged down setting up databases and servers. An MVP doesn't need a "real" backend in order to be user-tested.

The easiest way to do this is to "mock" your data-layer (model) using static JSON files. You can quickly create a bunch of fake data that your application will use.

The app code won't know the data is fake: as far as it is concerned it is just calling model functions and receiving data.

Here's a simplified example:

// routes/dog.js
const model = require("../model.js");

function get(request, response) {
  const id = request.params.id;
  model.getDog(id).then(dog => {
    response.send(`<h1>Hello ${dog.name}</h1>`);
  })
}

// model.js
const fakeDog = require("./mocks/dog.json");

function getDog(id) {
  return fakeDogData;
}

// mocks/dog.json
{
  "id": 1,
  "name": "Fido",
  "breed": "Dalmation"
}

You can build out your whole user-facing application without having a real DB. Then when you're ready you can replace the model with your actual database calls. Since all data access is isolated to one place the rest of the app shouldn't have to change. `getDog` will still return an object of dog-data, it'll just be coming from a real DB instead of a static JSON file.