guide-app 0

A generic guide app for shop guides

3 years after

guide-app

A generic guide app for shop guides

A newer version of this app is available here. The new version makes use of newer React.js features which make it much easier to understand, so we'd recommend you look at that instead.

A React.js based app, using Contentful as a data storage. Renders from the server on initial load and it renders on the client on subsequent loads, making use of react-router-component.

Vaguely based on react quickstart.

That means it will still (mostly) work if your JS is deactivated.

Uses browserify to serve client side JS.

See the Contentful Developer Documentation to learn more about the API.

When time allows, this app will also have an offline mode and demonstrate use of the Contentful sync API.

This is a project created on an internal hackathon as an example of how to use Contentful and React.js. It's not officially supported, so if you find issues or have questions you can let us know via issues but don't expect a quick and prompt response.

Usage

Install with

npm install

Afterwards, copy config.json.default to config.json.

Run with

node server.js

or

nodemon server.js

and visit http://localhost:3010

Using it with your own data

The credentials provided above in config.json are read only and they allow you to access data from a demo Space. If you want to create your own data, you should get a Contentful account and then get a Content Delivery API key from the API section.

Some (less obvious) things

The content structure

This app uses only one content type. It looks like this:

{
  "sys": {
    ...
  },
  "name": "Location",
  "displayField": "name"
  "fields": [
    {
      "name": "Name",
      "id": "name",
      "type": "Text"
    },
    {
      "name": "Type",
      "id": "type",
      "type": "Text"
    },
    {
      "name": "Address",
      "id": "address",
      "type": "Location"
    },
    {
      "name": "Phone number",
      "id": "phoneNumber",
      "type": "Symbol"
    },
    {
      "name": "Email",
      "id": "email",
      "type": "Symbol"
    },
    {
      "name": "URL",
      "id": "url",
      "type": "Symbol"
    },
    {
      "name": "Opening times",
      "id": "openingTimes",
      "type": "Text"
    },
    {
      "name": "Description",
      "id": "description",
      "type": "Text"
    },
    {
      "name": "Rating",
      "id": "rating",
      "type": "Integer"
    },
    {
      "name": "Pictures",
      "id": "pictures",
      "type": "Array",
      "items": {
        "type": "Link",
        "linkType": "Asset",
        "validations": [
          {
            "linkMimetypeGroup": "image"
          }
        ]
      }
    }
  ]
}

Related Repositories

macOS-Security-and-Privacy-Guide

macOS-Security-and-Privacy-Guide

A practical guide to securing macOS. ...

macOS-Security-and-Privacy-Guide

macOS-Security-and-Privacy-Guide

A practical guide to securing macOS. ...

rails-style-guide

rails-style-guide

A community-driven Ruby on Rails 4 style guide ...

app-launch-guide

app-launch-guide

This aims to be an indie dev's definitive guide to building and launching your a ...

RGCardViewLayout

RGCardViewLayout

This is a layout that clones the interaction of going through city "cards" in th ...


Top Contributors

trodrigues paulvi tomxor