Voting Redux

A polling app where a user can create and vote on polls. It contains a client app built in React using Redux-Saga for state management. The server app is built with the Express framework using a NoSQL database with MongoDB and Passport.js for authentication.

User stories

• As an unauthenticated or authenticated user, I can see and vote on everyone's polls.
• As an unauthenticated or authenticated user, I can see the results of polls in chart form.
• As an unauthenticated user, I can create an account or sign in.
• As an unauthenticated user, I can create an account or sign in through social media.
• As an authenticated user, I can create a poll with any number of possible choices.
• As an authenticated user, I can keep my polls and come back later to access them.
• As an authenticated user, I can see the aggregate results of my polls.
• As an authenticated user, I can delete polls that I decide I don't want anymore.

Tech Stack and Key Packages

CRA aka create-react-app

The MERN stack:

• Mongoose.js (MongoDB): Document database – used by back-end applications to store data as JSON
• Express.js: Back-end web application framework running on top of Node.js
• React.js: JavaScript library developed by Facebook to build interactive/reactive user interfaces
• Node.js: JavaScript runtime environment – lets one implement application back-end in JavaScript

Server Side

• NodeJS: Open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side
• Express: Fast, unopinionated, minimalist web framework for node
• MongoDB: NoSQL document database which stores data in flexible, JSON-like documents
• Mongoose: MongoDB object modeling tool designed to work in an asynchronous environment
• mLab: Cloud database service
• secure-password: Argon2id Password Hashing
• Passport.js: Simple, unobtrusive authentication for Node.js

Client Side

• React: JavaScript library for building user interfaces
• React Router: Declarative routing for React
• Redux: Predictable state container for JavaScript apps
• Redux-Saga: Saga middleware for Redux to handle Side Effects
• Redux-Form: Higher order component decorator for forms using Redux and React
• Material-UI: React components that implement Google's Material Design
• D3: JavaScript library for visualizing data using web standards
• Jest: Javascript testing
• Enzyme: React testing utility
• Coveralls.io: Provide updates and statistics on projects' code coverage

App Map

├──server/
│   ├──index.js            Server root
│   ├──server.js           Server configuration
│   ├──config/
│   │   ├──express.js            Set express host/port, headers, bodyparser
│   │   ├──passport.js           Config passport uses, user serialization, etc
│   │   ├──routes.js             Server-side routing from API calls to mongo/passport
│   │   └──passport-strategies/  Authentication files for passports (local, facebook, etc)
│   ├──controllers/        Poll and User controllers
│   └──models/             Poll and User models
└──client/
    ├──public/
    └──src/
        ├──index.js              Client root
        ├──utils/                __test__ setup files
        ├──core/
        │   ├──constants.js          Constants used by reducers/sagas/actions
        │   ├──history.js            History for routing
        │   ├──reducers.js           App reducers (users, polls, forms, router)
        │   ├──sagas.js              App sagas (user and polls)
        │   ├──store.js              App redux store with saga middleware
        │   ├──helpers/              Helper functions used by api/reducers in users/polls
        │   ├──polls/
        │   │    ├──index.js
        │   │    ├──actions.js           Poll actions
        │   │    ├──sagas.js             Poll sagas
        │   │    ├──reducer.js           Poll reducer
        │   │    ├──api.js               API calls made by polls
        │   │    ├──selectors.js         Poll state selectors
        │   │    └──__test__/            Test files to test poll actions/sagas/reducer
        │   └──users/                User actions/reducer/sagas/api/selectors and test files
        └──views/
            ├──app.js                App root
            ├──components/           Components called by pages with their test files
            ├──pages/                App pages with test files
            ├──static/               Assets like logo and background images
            └──styles/               CSS files

Getting Started

Create your own server. I used mLab.com. Create a user on that server.

Create a .env file in the root directory:

# .env
NODE_ENV=development
PUBLIC_URL=localhost:8080
HOST=localhost
PORT=8080
SECRET=my-super-secret
MONGODB_URI=mongodb://<dbuser>:<dbpassword>@<mongodatabase>

Local startup:

## Install all NPM dependencies
$ npm run setup

# Launch app locally
$ npm run start:dev

App will be live locally @ localhost:3000.

(optional):

If you want to call coveralls coverage locally (aka npm run coveralls), create a .coveralls.yml file in the root dir with the following:

# .coveralls.yml
repo_token: <TOKENFROMCOVERALLSIO>
service_name: travis-ci

One can also define the variables in the repo on travi.ci.org so coveralls is run in the travis scripts:

# 'Environment Variables' section in travis-ci.org's repo settings page
COVERALLS_REPO_TOKEN=<TOKENFROMCOVERALLSIO>
COVERALLS_SERVICE_NAME=travis-ci

App Screenshots

NPM Commands

Command	Description
npm run setup	Install NPM dependencies
npm run clean	Remove dependency folders
npm run build	Build production bundles to ./build directory
npm test	Run tests and view coverage on all .test. files
npm run server:dev	Start server locally @ localhost:8080
npm run client:dev	Start client locally @ localhost:3000
npm run start:dev	Launch client w/server locally @ localhost:3000