Quick Links:
- MKS Git workflow (Contributing.md)
- MKS Waffle.io board for issues
- Format:
[feat]: <Subject> + <description>- for example
[fix]: Edit package.json for heroku deploy
- for example
- Add any applicable labels
- Format:
Node ^4.0.0 or ^5.0.0 (npm3 recommended).
Rezable.io is a simple, intuitive, drag-and-drop resume builder to easily create and export documents. Users can save their resume for later, and quickly export to PDF.
Some technologies we used:
- React for unidirectional data flow and performant UI
- Redux architecture for predictable app state, with react-redux bindings
- react-router and redux-router for routing
- redux-devtools for time travel debugging
- react-dnd for stateful drag-and-drop UI
- Babel to transpile ES6/7 syntax
- Immutable for immutable persistent data structures
- PhantomJS for PDF export
- Webpack for builds/automation, with eslint linting and karma/mocha/chai testing
- react-medium-editor for WYSIWYG text editing
- Material-UI React components implementing Google's Material Design
- PostgreSQL database with Sequelize ORM
- bcrypt for user authentication
- Node/Express server with redux-thunk middleware
We built our app off the wonderful React Redux Starter Kit by David Zukowski. Many of the explanatory docs below are directly from his starter kit. Special thanks to Dan Abramov for his creating Redux, and his extensive contributions to the community. Also thanks to Erik Rasmussen for the kitten!
Check out Rezable.io. Look for the kitten!
Clone the repo and install the necessary node modules:
$ git clone https://github.com/dont-fear-the-repo/fear-the-repo.git
$ cd fear-the-repo
$ npm install # Install Node modules listed in ./package.json (go get a beer, this will be a while)Runs the webpack build system with webpack-dev-server (by default found at localhost:3000).
Same as npm run start but opens the debug tools in a new window.
Note: you'll need to allow popups in Chrome, or you'll see an error: issue 110
Same as npm run start but disables devtools.
Runs the webpack build system with your current NODE_ENV and compiles the application to disk (~/dist).
Runs unit tests with Karma and generates coverage reports.
Similar to npm run test, but will watch for changes and re-run tests; does not generate coverage reports.
Runs ESLint against all .js files in ~/src. This used to be a webpack preloader, but the browser console output could get fairly ugly. If you want development-time linting, consider using an eslint plugin for your text editor.
Lints all .spec.js files in of ~/tests.
Helper script to run linter, tests, and then, on success, compile your application to disk.
Basic project configuration can be found in ~/config/index.js.
The folder structure provided is only meant to serve as a guide, it is by no means prescriptive. It is something that has worked very well for me and my team, but use only what makes sense to you.
.
├── bin # Build/Start scripts
├── build # All build-related configuration
│ └── webpack # Environment-specific configuration files for webpack
├── config # Project configuration settings
├── src # Application source code
│ ├── actions # Redux action creators
│ ├── components # Generic React Components
│ ├── containers # Components that provide context
│ ├── layouts # Components that dictate major page structure
│ ├── reducers # Redux reducers
│ ├── routes # Application route definitions
│ ├── store # Redux store configuration
│ ├── utils # Generic utilities
│ ├── views # Components that live at a route
│ └── app.js # Application bootstrap and rendering
└── tests # Unit tests
In development, Redux Devtools are enabled by default. You can toggle visibility and move the dock around using the following keyboard shortcuts:
- Ctrl+H Toggle DevTools Dock
- Ctrl+Q Move Dock Position
- see redux-devtools-dock-monitor for more detail information.
The webpack compiler configuration is located in ~/build/webpack. Here you'll find configurations for each environment; development, production, and development_hot. These configurations are selected based on your current NODE_ENV, with the exception of development_hot which will always be used by webpack dev server.
Note: There has been a conscious decision to keep development-specific configuration (such as hot-reloading) out of .babelrc. By doing this, it's possible to create cleaner development builds (such as for teams that have a dev -> stage -> production workflow) that don't, for example, constantly poll for HMR updates.
So why not just disable HMR? Well, as a further explanation, enabling react-transform-hmr in .babelrc but building the project without HMR enabled (think of running tests with NODE_ENV=development but without a dev server) causes errors to be thrown, so this decision also alleviates that issue.
We used CSS-less inline styling for our JSX files, which lives in src/styling.
Unit tests can be found in ~/tests. Karma picks up on these files automatically, and Mocha and Chai are available within tests without the need to import them. Coverage reports will be compiled to ~/coverage by default.
Having an issue? Please let us know! Report it and we'll get to it as soon as possible.
If you would like to submit a pull request, please make an effort to follow the guide in CONTRIBUTING.md.
Thanks for checking this out.
– Don't Fear the Repo (Andrew, Melody, Michael, Ryan, Sujay)