Skip to content
React/Redux Task Management application
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
actions
assets/img
components
constants
containers
e2e-tests
reducers
routes
store
stylesheets
test
wireframes
.babelrc
.eslintignore
.gitignore
Procfile
README.md
circle.yml
index.html
index.js
karma.conf.js
package.json
server.js
state.txt
truncate_db.sql
webpack.config.js

README.md

taskrly

Basic

Simplified task management.

  • Create a project and add your team members
  • Create and assign tasks
  • Keeping track of status and provide feedback

Stack

React, Redux, Babel, webpack, Express

Back-end

This front-end application was built alongside the API at taskrly_api.

Folder Structure

actions/              Redux action creators
assets/               Static files
components/           React components
constants/            String constants (action types)
containers/           Top-Level components which contain presentational components
e2e-tests/            Protractor tests and configuration
reducers/             Redux reducers
routes/               React Router configuration
store/                Redux store configuration
stylesheets/          SASS/CSS files
  components/         Component styles
  utils/              Responsive adjustment styles
  vendor/             Third-party css library
  views/              SASS files which include relevant component styles
  app.scss            Main application SASS file
wireframes/           Basic HTML/CSS mockups from design stage
index.html            Main application page
index.js              Redux root file
karma.conf.js         Karma test runner configuration (in progress)
package.json          Package info and NPM dependencies
server.js             Express server setup
state.txt             JSON mockup of Redux state tree
truncate_db.sql       Executed by Protractor to clean database while testing
webpack.config.js     Webpack configuration

Starting

npm start

Builds project with webpack, and serves the bundled file with Express at http://localhost:8000.

Testing

// Unit tests
npm test

// End-to-End tests
npm run protractor

The unit tests are comprised of action creator, reducer, and component rendering tests. Currently the component tests are using shallow rendering.

Protractor provides the webdriver API to test user scenarios of the application. Since Protractor was created to test Angular applications, it looks for Angular on start up. In order to prevent Protractor from hanging when used with React, a small configuration change is required. In protractor.conf.js, add:

  // don't wait for Angular since we're using React
  onPrepare: function() {
    browser.ignoreSynchronization = true;
  }

License

MIT

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.