Front End Development

The following are tools that I have learned for Front End development.

Mirage JS lets you mock back end server APIs.

Static requests serve up hardcoded bits of data.

Here is a static GET request:

this.get("/api/reminders", () => ({
  reminders: [
    { id: 1, text: "Walk the dog" },
    { id: 2, text: "Take out the trash" },
    { id: 3, text: "Work out" },
  ],
}))

In Mirage JS there is a backend database that can be defined by Models and accessed using the Schema methods.

import { createServer, Model } from 'miragejs'
 
export default function () {
  createServer({
 
    models: {
      reminder: Model,
    },
 
    routes() {
      this.get("/api/reminders", schema=> schema.reminders.all());
 
      this.post("api/reminders", (schema, request) => {
        let attrs = JSON.parse(request.requestBody);
 
        return schema.reminders.create(attrs);
      })
    },
  })
}