Chutte.com

Chutte.com is a reverse auction style web application. Our aim is to create a marketplace optimized for sellers to sell rare and unique items, and buyers to aquire those products at prices that appeal to them. We understand that pricing can make or break a product, our Chutte pricing algorithm removes the stressful burden of having to get pricing perfect. The price algorithm changes over the course of an items' listing, decreasing when there is no demand and holding when demand exists at a price point.

Demo
Getting Started
Usage
Structure
Tech Stack
Webpack
Troubleshooting
Contributing

Demo

Check out chutte.com. Also check out our quick demo video.

Getting Started

Clone the repo and install the necessary node modules:

$ git clone https://github.com/KGB-JS/chutte.git
$ cd chutte
$ npm install                   # Install Node modules listed in ./package.json (this will be a while)

Usage

`npm run build`

Runs the webpack build system

`npm run webserver`

(by default found at localhost:3000).

Structure


   |-client
   |---public
   |-----dist
   |---src                   # Application source code
   |-----actions             # Redux action creators
   |-----Components          # Generic React Components
   |-----containers          # Components that provide context
   |-----reducers            # Redux reducers
   |-----socket              # Client side socket connections
   |-----store               # Redux store configuration
   |-server
   |---config
   |---items
   |-----itemHelpers
   |---priceSchedule
   |---socket
   |---user
   |-test

Tech Stack

Some technologies we used:

React for unidirectional data flow and performant UI
Redux architecture for predictable app state, with react-redux bindings
redux-thunk middleware
react-router and redux-router for routing
redux-devtools for time travel debugging
Babel to transpile ES6/7 syntax
Webpack for builds/automation, with eslint linting and mocha/chai testing
MongoDB database with Mongoose ODM
bcrypt for user authentication
Node/Express server

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.

Webpack

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.

Troubleshooting

Having an issue? Please let us know! Report it and we'll get to it as soon as possible.

Contributing

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.

– KGB-JS / chutte (Peter, Sean, Mick and Tim)

beresford211 / chutte