Permalink
Browse files

Renamed project to Marvin, updated readme (#20)

  • Loading branch information...
Stanko committed May 22, 2017
1 parent 94ad099 commit ac354318dc9fc16b8c8166669cba8277dfbf17de
View
@@ -1,4 +1,14 @@
# React and Redux, Webpack 2 boilerplate
# Marvin ★★
React and Redux, Webpack 2 boilerplate.
Marvin is internal project by [Work & Co](https://work.co).
We love React and use it a lot. So Marvin is meant to be a starting point for our React projects.
But as we love open source too, it is publicly available for anyone interested in using it.
![Marvin](/marvin.jpg)
Name comes from a fictional character [Marvin](https://en.wikipedia.org/wiki/Marvin_(character)), android from the [The Hitchhiker's Guide to the Galaxy](https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy) book as a homage to it's author [Douglas Adams](https://en.wikipedia.org/wiki/Douglas_Adams).
## Table of contents
* [What is this?](#user-content-what-is-this)
@@ -14,13 +24,10 @@
## What is this?
Boilerplate I extracted from a small real world project.
~~Webpack 2 is still in beta, but at this point is the only version
that I managed to run everything I wanted, including hot module replacement.~~
Boilerplate for kicking off React/Redux applications.
This boilerplate includes complete, minimal react app.
By complete I mean it has examples for:
It includes complete, minimal react app.
By complete we mean it has examples for:
- components (both container/views and regular ones)
- routes
@@ -31,7 +38,7 @@ By complete I mean it has examples for:
- using assets (in CSS and components)
- imports relative to the app root
![Example dashboard](http://i.imgur.com/z4Cpmdb.png)
![Example dashboard](/marvin-screenshot.png)
<sup>1</sup> Using source maps breaks urls in the CSS loader - https://github.com/webpack/css-loader/issues/232. Try [this](https://github.com/webpack/css-loader/issues/232#issuecomment-240449998) to fix it (but it breaks testing from local network).
@@ -94,7 +101,7 @@ $ npm run dev
**Note for Windows users:** webpack dashboard still have issues with Windows, so use `npm start` until those are resolved.
![Running in the iTerm2](http://i.imgur.com/IxamMBh.png)
![Running in the iTerm2](http://i.imgur.com/3oKTWrv.png)
**OS X Terminal.app users:** Make sure that **View → Allow Mouse Reporting** is enabled, otherwise scrolling through logs and modules won't work. If your version of Terminal.app doesn't have this feature, you may want to check out an alternative such as [iTerm2](https://www.iterm2.com/).
View
Binary file not shown.
View
Binary file not shown.
View
@@ -6,12 +6,12 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --colors",
"dev": "webpack-dashboard -t 'React-Redux Boilerplate' -- webpack-dev-server --colors --no-info",
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
"build": "rm -rf ./build && NODE_ENV=\"production\" webpack",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - React-Redux Boilerplate' -- webpack-dev-server",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove"
},
@@ -49,7 +49,7 @@
"svgo-loader": "^1.2.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.3.0",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.2.1"
},
"dependencies": {
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 50" enable-background="new 0 0 80 50" xml:space="preserve">
<g>
<rect fill="#FF3333" width="80" height="50"/>
<g>
<g>
<path fill="#FFFFFF" d="M11.1,6.4c0.3,1,0.5,1.9,0.8,2.9c0.5,1.7,0.6,2,0.9,3.7c0.3-1.8,0.3-2.1,0.7-3.9c0.2-0.9,0.4-1.8,0.6-2.7 h2.2l-2.3,9h-2.3c-0.3-1-0.5-2-0.8-3c-0.5-1.7-0.5-1.7-0.8-3c-0.2,1.1-0.3,1.2-0.8,2.9l-0.9,3H6.2l-2.3-9h2.2 c1,4.3,1.1,4.7,1.3,6.7c0.3-1.8,0.4-2.1,0.9-3.9l0.7-2.8H11.1z"/>
<path fill="#FFFFFF" d="M20.7,15.6c-2.8,0-4.5-2.2-4.5-4.8c0-2.4,1.5-4.7,4.4-4.7c0.5,0,1.1,0.1,1.6,0.3c2.7,1,2.9,3.9,2.9,4.5 c0,1.6-0.7,2.9-1.7,3.7C22.7,15.4,21.7,15.6,20.7,15.6z M22.3,8.6c-0.4-0.4-1-0.7-1.6-0.7c-1.4,0-2.2,1.2-2.2,2.8 c0,2.1,1.2,2.9,2.2,2.9c1.1,0,2.2-0.8,2.3-2.6C23,10.1,22.8,9.2,22.3,8.6z"/>
<path fill="#FFFFFF" d="M26,6.4h4c0.9,0,2.1,0,2.9,0.9c0.4,0.5,0.7,1.2,0.7,2c0,1.8-1.2,2.2-1.8,2.5l2.1,3.6h-2.5l-1.8-3.2h-1.4 v3.2H26V6.4z M28.2,8.1v2.4h1.9c0.3,0,1.3,0,1.3-1.2c0-1.1-0.8-1.2-1.3-1.2H28.2z"/>
<path fill="#FFFFFF" d="M34.8,6.4H37v3.7l3.4-3.7H43l-3.2,3.3l3.4,5.6h-2.5l-2.4-4.1L37,12.7v2.6h-2.1V6.4z"/>
</g>
<g>
<path fill="#FFFFFF" d="M10.1,23.2c0,0,0.1,0,0.3-0.7l1.6,0c0,0.7-0.3,1.2-0.9,2.1c0.2,0.2,0.4,0.4,1,0.4c0.1,0,0.3,0,0.4,0v1.4 H11c-0.2,0-0.5-0.2-1-0.6c-0.4,0.2-1.2,0.7-2.4,0.7c-2.1,0-3.1-1.4-3.1-2.8c0-0.3,0.1-0.7,0.2-1c0.5-1.1,1.4-1.5,2-1.8 c-0.3-0.6-0.6-1-0.6-1.5c0-1.1,0.8-2,2.3-2c1.4,0,2.2,0.9,2.2,1.9c0,1.1-0.9,1.8-1.7,2.1 M7.5,22.2c-0.4,0.3-1,0.7-1,1.4 c0,0.5,0.4,1.3,1.3,1.3c0.5,0,0.9-0.2,1.2-0.4L7.5,22.2z M9,19.3c0-0.3-0.2-0.5-0.6-0.5c-0.3,0-0.6,0.2-0.6,0.5 c0,0.3,0.1,0.5,0.4,1C8.6,20,9,19.7,9,19.3z"/>
<path fill="#FFFFFF" d="M25,26.6c-2.8,0-4.5-2.2-4.5-4.8c0-2.4,1.5-4.7,4.4-4.7c0.5,0,1.1,0.1,1.6,0.3c2.7,1,2.9,3.9,2.9,4.5 c0,1.6-0.7,2.9-1.7,3.7C27,26.4,26,26.6,25,26.6z M26.6,19.7c-0.4-0.4-1-0.7-1.6-0.7c-1.4,0-2.2,1.2-2.2,2.8 c0,2.1,1.2,2.9,2.2,2.9c1.1,0,2.2-0.8,2.3-2.6C27.3,21.2,27.1,20.2,26.6,19.7z"/>
<path fill="#FFFFFF" d="M17.5,24.7c-1,0-2.2-0.8-2.2-2.9c0-1.6,0.9-2.8,2.2-2.8c0.6,0,1.2,0.3,1.6,0.7c0.1,0.1,0.2,0.3,0.3,0.4 l1.2-1.8c-0.4-0.3-0.8-0.6-1.4-0.9c-0.5-0.2-1.1-0.3-1.6-0.3c-2.9,0-4.4,2.3-4.4,4.7c0,2.6,1.6,4.8,4.4,4.8 c0.9,0,1.9-0.2,2.8-0.9c0.1-0.1,0.1-0.1,0.2-0.2l-1.2-1.8C18.9,24.4,18.2,24.7,17.5,24.7z"/>
</g>
</g>
</g>
</svg>
View
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>React-Redux Boilerplate</title>
<title>Marvin &bull; React/Redux Boilerplate</title>
</head>
<body>
<div id="root"></div>
@@ -1,21 +1,42 @@
import React, { Component } from 'react';
import { IndexLink, Link } from 'react-router';
import { routeCodes } from '../../routes';
import workAndCoLogoImg from '../../../assets/img/workco-logo.svg';
export default class Menu extends Component {
render() {
return (
<div className='Menu'>
<IndexLink to={ routeCodes.DASHBOARD }>
Dashboard
</IndexLink>
<Link to={ routeCodes.ABOUT }>
About
</Link>
<Link to='404'>
404
</Link>
<div className='Menu-logo'>
<img
src={ workAndCoLogoImg }
alt='Work & Co logo'
/>
</div>
<div className='Menu-links'>
<IndexLink
activeClassName='Menu-link--active'
className='Menu-link'
to={ routeCodes.DASHBOARD }
>
Home
</IndexLink>
<Link
activeClassName='Menu-link--active'
className='Menu-link'
to={ routeCodes.ABOUT }
>
About
</Link>
<Link
activeClassName='Menu-link--active'
className='Menu-link'
to='404'
>
404
</Link>
</div>
</div>
);
}
@@ -4,11 +4,18 @@ export default class About extends Component {
render() {
return (
<div className='About'>
<h2>About</h2>
<h1>About Marvin</h1>
<hr />
<h3>React and Redux, Webpack 2 boilerplate</h3>
Visit documentation on <a href='https://github.com/Stanko/react-redux-webpack2-boilerplate'>GitHub</a>
<p>
Marvin is internal project by <a href='https://work.co'>Work & Co</a>.
We love React and use it a lot. So Marvin is meant to be a starting point
for our React projects. But as we love open source too, it is publicly
available for anyone interested in using it.
</p>
<p>
Visit documentation
on <a href='https://github.com/workco/react-redux-webpack2-boilerplate'>GitHub</a>
</p>
</div>
);
}
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import { testAction, testAsync } from 'actions/app';
import Icon from 'components/Global/Icon';
import bookImg from '../../../assets/img/book2.jpg';
import svgImg from '../../../assets/img/svgExample.svg';
@connect(state => ({
asyncData: state.app.get('asyncData'),
@@ -51,19 +50,26 @@ export default class Dashboard extends Component {
return (
<div className='Dashboard'>
<h2>Examples</h2>
<h1>Marvin</h1>
<p>
Boilerplate for kicking off React/Redux applications.
</p>
<hr />
<div>
<h3>Synchronous action</h3>
<p>{ counter }</p>
<h2>Examples</h2>
<h3>Synchronous action</h3>
<div className='Example'>
<p>Counter: { counter }</p>
<button onClick={ this.handleTestButtonClick }>
Increase counter
Increase
</button>
</div>
<hr />
<div>
<h3>Async action example</h3>
<p>{ asyncData }</p>
<h3>Async action example</h3>
<div className='Example'>
{ asyncData && <p>{ asyncData }</p> }
{ asyncLoading && <p>Loading...</p> }
{ asyncError && <p>Error: { asyncError }</p> }
<button
@@ -73,21 +79,22 @@ export default class Dashboard extends Component {
Get async data
</button>
</div>
<hr />
<div>
<h3>Background image</h3>
<h3>Background image</h3>
<div className='Example'>
<div className='BackgroundImgExample' />
</div>
<h3>Image imported to the component</h3>
<h3>Image imported to the component</h3>
<div className='Example'>
<img src={ bookImg } alt='' className='ImgExample' />
</div>
<h3>Import icon set</h3>
<Icon glyph='square' style={ { marginRight: '10px' } } />
<Icon glyph='circle' style={ { marginRight: '10px' } } />
<h3>SVG sprite icon set</h3>
<div className='Example'>
<Icon glyph='square' />
<Icon glyph='circle' />
<Icon glyph='triangle' />
<h3>Import regular svg</h3>
<img src={ svgImg } alt='' className='SvgExample' width='200' />
</div>
</div>
);
@@ -4,7 +4,7 @@ export default class NotFound extends Component {
render() {
return (
<div className='NotFound'>
<h2>Not Found</h2>
<h1>Not Found</h1>
</div>
);
}
View
@@ -1,2 +1,3 @@
@import "base/normalize";
@import "base/breakpoints";
@import "base/app";
Oops, something went wrong.

0 comments on commit ac35431

Please sign in to comment.