📷 12Roads Photo Sharing React Production Starter
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Josh Habdas cf9ba47bf8
chore(compile): add shrinkwrap
2 years ago
client Spike on Photo Sharing app 4 years ago
common Spike on Photo Sharing app 4 years ago
public Improved DX (#98) 5 years ago
server Spike on Photo Sharing app 4 years ago
test Spike on Photo Sharing app 4 years ago
tools Throng (#126) 4 years ago
.babelrc Add nyc, react-optimize, instabul. Go back to babel-polyfill (#124) 5 years ago
.gitignore Add nyc, react-optimize, instabul. Go back to babel-polyfill (#124) 5 years ago
.travis.yml Update travis to use node 6.2.2 5 years ago
Dockerfile v0.2.0 (#73) 5 years ago
LICENSE Initial commit 5 years ago
Procfile update npm scripts 5 years ago
README.md Update README.md 4 years ago
app.json heroku 5 years ago
npm-shrinkwrap.json chore(compile): add shrinkwrap 2 years ago
package.json Spike on Photo Sharing app 4 years ago


12Roads Production Starter

Prototype features

  • Built rapidly with emphasis on just photo browsing
    Note: Clicking individual photos not yet implemented but I was planning a mobile-friendly PhotoSwipe effect.
  • Made using a "desktop-first" approach
    Going desktop-first essentially means planning for mobile but going MVP faster and adding mobile support as a fast-follower once traffic types for the app are determined (usually mobile is low for Web Apps until traction is gained).
  • Includes Unit Tests
    Unit Testing is something clients sometimes overlook and engineers may not bring up early enough in the development process - which can lead to a cascade of bugs later in projects.
  • Uses mock data
    Mock data is useful for proving out design concepts before actually implementing the back-end, which can be costly/untimely to change if the design isn't nailed down first.

Technical/UX Design

  • Uses NodeJS for everything
    Node is a JavaScript ecosystem and set of tools used for building today's rich internet applications. It enjoys wide support from the open source community and is easier and faster to write for and attract development talent to than Java.
  • Extremely fast and Search Engine friendly
    Most JavaScript apps built today are not SEO-friendly due to misguided architectural approaches. The prototype provided is not only incredibly fast, it also can be crawled by all Web spiders.
  • Uses Google's Material Design
    Material Design provides a set of design constraints to help ensure the UI look-and-feel remains consistent across the application without having to hire a designer to build a style guide and provide Sketch mock-ups (though Sketch designs are advised for MVP).

Next steps

React Production Starter

Build Status Dependency Status devDependency Status js-standard-style Join the chat at https://gitter.im/jaredpalmer/react-production-starter

An example react application (master-detail feed) with isomorphic rendering, async react-router routes, async redux reducers, async data fetching, and code-splitting.


The file size of isomorphic React apps can quickly get out of hand. Many isomorphic starter kits look awesome to begin with but yield a several megabyte javascript file for the client to download. This project aims to demonstrate some possible solutions.

Under the Hood


Getting started

git clone https://github.com/jaredpalmer/react-production-starter MyApp
cd MyApp
npm install
npm start

# Open localhost:5000

See Awesome React Boilerplates for more information.