Code Monkey home page Code Monkey logo

ohsiha-demo's Introduction

#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...

ohsiha-demo's People

Watchers

Tuomas Kaittola avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.