Android Pattern Unlock Demo (ReactJS)

The primary goal of this project is to provide a basic implementation of an android pattern lock/unlock system.

Demo available on Heroku.

Requirements

• node ^5.0.0
• yarn ^0.23.0 or npm ^3.0.0

Installation

After confirming that your environment meets the above requirements, you can clone this repository by doing the following:

$ git clone https://github.com/theslyone/android-pattern-unlock.git <preferred-project-name>
$ cd <preferred-project-name>

Install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install also works fine.

$ yarn  # Install project dependencies (or `npm install`)

Running the Project

After completing the installation step, you're ready to start the application!

$ yarn start  # Start the development server (or `npm start`)

Default password on page load/refresh is the capital letter N drawn starting from the bottom left corner. Once successfully unlocked, the password can be changed by clicking the change password icon (last icon at the bottom right corner). The screen can further be locked without changing password by clicking the lock icon at the bottom beside the home icon.

Please note that all other icons on the home screen are dummies and hence do not have any routing on click.

Other run scripts at your disposal:

yarn <script>	Description
start	Serves the app at localhost:3000
build	Builds the application to ./dist
test	Runs unit tests with Karma. See testing
test:watch	Runs test in watch mode to re-run tests when changed
lint	Lints the project for potential errors
lint:fix	Lints the project and fixes all correctable errors

Project Structure

This project leverages the react-redux-starter application structure , it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.

.
├── build                    # All build-related code
├── public                   # Static public assets (not imported anywhere in source code)
├── server                   # Express application that provides webpack middleware
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── index.html           # Main HTML page container for app
│   ├── main.js              # Application bootstrap and rendering
│   ├── normalize.js         # Browser normalization and polyfills
│   ├── components           # Global Reusable Components
│   ├── containers           # Global Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   │   └── PageLayout       # Global application layout in which to render routes
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   ├── Home             # Fractal route
│   │   │   ├── index.js     # Route definitions and async split points
│   │   │   ├── components   # Presentational React Components
│   │   │   └── routes **    # Fractal sub-routes (** optional)
│   │   └── Keypad          # Fractal route
│   │       ├── index.js     # Counter route definition
│   │       ├── container    # Connect components to actions and store
│   │       ├── components   # Presentational React Components
│   │       └── reducer      # Keypad redux reducer
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── styles               # Application-wide styles (generally settings)
└── tests                    # Unit tests