Gitsearch

Basic Github search app

Getting Started

After confirming that your development environment meets the specified requirements, you can follow these steps to get the project up and running:

$ git clone https://github.com/prescottprue/gitsearch.git
$ cd gitsearch
$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

If everything works, you should see the following:

Other NPM Scripts

`npm run <script>`	Description
`start`	Serves your app at `localhost:3000`. HMR will be enabled in development.
`dev`	Same as `npm start`, but enables nodemon for the server as well.
`test`	Runs unit tests with Karma and generates a coverage report.
`test:dev`	Runs Karma and watches for changes to re-run tests; does not generate coverage reports.
`deploy`	Runs linter, tests, and then, on success, compiles your application to disk.
`lint`	Lint all `.js` files.
`lint:fix`	Lint and fix all `.js` files.

Application Structure

The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type.

.
├── bin                      # Build/Start scripts
├── blueprints               # Blueprint files for redux-cli
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── server                   # Koa application (uses webpack middleware)
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── main.js              # Application bootstrap and rendering
│   ├── components           # Reusable Presentational Components
│   ├── containers           # Redux connected "smart" components
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
└── tests                    # Unit tests

Development

Developer Tools

Root Resolve

Webpack is configured to make use of resolve.root, which lets you import local packages as if you were traversing from the root of your ~/src directory. Here's an example:

// current file: ~/src/views/some/nested/View.js
// What used to be this:
import SomeComponent from '../../../components/SomeComponent'

// Can now be this:
import SomeComponent from 'components/SomeComponent' // Hooray!

Styles

Both .scss and .css file extensions are supported out of the box and are configured to use CSS Modules. After being imported, styles will be processed with PostCSS for minification and autoprefixing, and will be extracted to a .css file during production builds.

prescottprue / gitsearch