tuokai / ohsiha-demo

Demo for #ohsiha

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

#ohsiha 2018 - guestbook CR(U)D demo

This project is created with create-react-app.

To get started, you need npm or yarn installed on your machine.

Backend

To get very simple CRUD API up and running, we use json-server:

$ npm install -g json-server

or with yarn:

$ yarn global add json-server

In this example we used following db.json:

{
  "messages": [
    { "id": 1, "message": "Nice questbook!", "author": "Donald Duck" },
    { "id": 2, "message": "Greetings from Mickey!", "author": "Mickey Mouse" },
    { "id": 3, "message": "I'm just leaving this here...", "author": "Scrooge McDuck" }
  ]
}

Just create it wherever you want, install json-server and run the following command:

$ json-server --watch db.json --port 8080

Please note: json-server does not use real database and is meant mainly for quick prototyping. Not recommended to be used in a real-life projects.

Frontend

Run

npm start

to get client up and running in dev mode at http://localhost:3000/.

To set up similar project by yourself:

Run

$ npx create-react-app ohsiha-demo

(npx comes with npm 5.2+ and higher)

See more (e.g.):

React documentation

Official create-react-app documentation

Presentational and Container Components

Ideas about future development

  • Proper state management: redux, mobx or something similar
  • Show spinner or some other indicator when API calls are ongoing
  • Proper error handling
  • Etc...

About

Demo for #ohsiha


Languages

Language:JavaScript 80.2%Language:HTML 15.5%Language:CSS 4.3%