rasata/12roads

:camera: 12Roads Photo Sharing React Production Starter

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

• Update TripList and Trip page for mobile responsive display using react-flexbox-grid
• Add Roboto font for existing Material UI theme
• Bleak CSS3 page transitions for engagement
• Add react-photoswipe for image viewing
• Add LQIP for Medium-style image placeholders, or at least some placeholder to start (important for slow connections)

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.

Motivation

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

• Node.js
• Express
• React
• Redux
• React Router 2.0
• Aphrodite for CSS by Khan Academy
• React Helmet for meta tags by the NFL
• Redial for data fetching by @markdalgleish
• Babel 6
• Webpack with vanilla Hot Module Replacement

Inspiration

• example-react-router-server-rendering-lazy-routes by @ryanflorence
• Cake's approach to React Router server rendering w/code splitting and Redux by @rgrove
• How to dynamically load reducers for code splitting in a Redux application? by @dan_abramov

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.