12Roads Production Starter
- 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.
- Uses NodeJS for everything
- Extremely fast and Search Engine friendly
- 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).
- 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.
Under the Hood
- 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
- 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
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.