Giter Club home page Giter Club logo

respa-ui's Introduction

Respa-ui

Circle CI

User interface for the City of Helsinki varaamo.hel.fi resource reservation service. Uses the respa API.

Requirements

Architecture

  • Redux handles the state management of the app. For more info check their awesome docs.
  • React handles the rendering of the 'views'.
  • react-redux is used to connect the Redux Store to React components.
  • react-router handles the routing of the app.
  • reselect is used for getting data from Redux Store and manipulating it to be better usable in React components.
  • redux-api-middleware is used to interact with the API.
  • The application is run on an express server.
  • Uses Passport and Passport-Helsinki for authentication.
  • webpack takes modules with dependencies and generates static assets representing those modules.
  • Babel transforms JavaScript written in ES2015 and JSX syntax to regular JavaScript.

Usage

Starting development server

Follow the instructions below to set up the development environment. By default the running app can be found at localhost:3000.

  1. Install npm dependencies:

    $ npm install
    
  2. Set correct environment variables for passport authentication.

  3. Then, start the development server:

    $ npm start
    

Starting production server

Follow the instructions below to build and start production server. By default the running app uses port 8080.

  1. Install npm dependencies:

    $ npm install
    
  2. Build the production bundle:

    $ npm run build
    
  3. Set correct environment variables for passport authentication.

  4. Then, start the production server:

    $ npm run start:production
    

Running code linter

  • To check the code for linting errors:

    $ npm run lint
    

Code style and linting

The code mostly follows the Airbnb JavaScript Style Guide. All JavaScript should be written in ES2015 syntax. Code is automatically linted with eslint when running unit tests or bundling the app with webpack.

Styles and Stylesheets

Less CSS pre-processor is used to make writing styles nicer. Autoprefixer handles CSS vendor prefixes. Bootstrap is used as the CSS framework for the site and City of Helsinki Bootstrap theme is used as the main theme.

Testing framework

  • Karma is used to run the tests. On local machines tests are run on PhantomJS to make running tests in watch mode as smooth as possible. On CI the tests are run on Chrome.
  • Mocha is used as the test framework.
  • Chai is used for test assertions.
  • simple-mock and MockDate are used for mocking and spies.
  • skin-deep is used to make testing React components with shallow rendering easier.

License

The MIT License

Copyright (c) 2015 City of Helsinki <http://www.hel.fi/>

respa-ui's People

Contributors

lraivio avatar rikuoja avatar

Watchers

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