webapp

Webapp is the main public-facing web application to allow users to contribute metadata about content that has been crawled & archived from Data Together. A beta version of the code runs on archivers.co and production code on datatogether.org. This repository has a React front end that includes the user interface of the web application. New features of the Data Together platform are coordinated and developed in one or more of the other repositories listed in our Roadmap.

License & Copyright

Copyright (C) 2017 Data Together

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, version 3.0.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

See the LICENSE file for details.

Getting Involved

We would love involvement from more people! If you notice any errors or would like to submit changes, please see our Contributing Guidelines.

We use GitHub issues for tracking bugs and feature requests and Pull Requests (PRs) for submitting changes.

Installation

To start developing, first make sure you have Docker and docker Compose. Then, run:

$ git clone [email protected]:datatogether/webapp.git
$ cd webapp
$ docker-compose up

This will spin up a whole bunch of servers (most of the repositories in this organization are dependencies) and make lots of noise. Once you see webpack built you can go to http://localhost:3000 to see the app running locally.

Development

Once Docker has spun up, webpack will watch .js, .scss, amd .css files and attempt to automatically recompile & refresh your browser window on changes. It's a good idea to have the browser's console open to make sure nothing's exploding.

We use the following established toolkits for this project:

• React.js components for all UI. If you are familiar with React, then all of the src/js/components files should look familiar
• Redux Framework for state control
• React Router for navigation
• Webpack 2 is our module bundler, and we also use yarn for dependency management

Project Organization

• src/js/actions/ - everything the app can "do"
• src/js/components/ - react.js components
• src/js/containers/ - "smart" react.js components that read data from the redux state object
• src/js/middleware/ - middleware intercepts fired-off actions, performing tasks like API calls & logging
• src/js/propTypes/ - react.js propType definitions for reuse around the app
• src/js/reducers/ - redux reducers that map actions to
• src/js/selectors/ - functions that pull computed logic out of state
• src/js/store/ - redux store configuration
• src/js/validators/ - validation logic that checks models, returning error message validation objects