Table of Contents
^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!
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)
npm start (alias for
npm run dev)
Runs the webpack build system with webpack-dev-server (by default found at
npm run dev:nw
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
npm run dev:no-debug
npm run start but disables devtools.
npm run compile
Runs the webpack build system with your current NODE_ENV and compiles the application to disk (
npm run test
Runs unit tests with Karma and generates coverage reports.
npm run test:dev
npm run test, but will watch for changes and re-run tests; does not generate coverage reports.
npm run lint
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.
npm run lint:tests
.spec.js files in of
npm run deploy
Helper script to run linter, tests, and then, on success, compile your application to disk.
Basic project configuration can be found in
. ├── 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
Using Redux DevTools
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_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
production workflow) that don't, for example, constantly poll for HMR updates.
So why not just disable HMR? Well, as a further explanation, enabling
.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 inline styling for our JSX files, which lives in
src/styling. Our color palette and typeface library live in
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 / Carly Rae JSON (Andrew, Melody, Michael, Ryan, Sujay)