Code Monkey home page Code Monkey logo

clickr's Introduction

clickr

repo for shared development of clickr

Dependencies

The Clickr app uses:

  • Gulp - this is the build system we use to compile up our SCSS and JavaScript, along with providing auto-refresh when we make changes in development.
  • Node - we run a pretty simple Node server to facilitate the auto-refresh. Really, we won't need the server to be Node in production as we're generating static HTML/CSS/JS files in the end.
  • npm - npm (Node Package Manager) is used to manage all of our dependencies for the front end and development backend. All clickr's required plugins and such are listed within package.json, so the project can be worked on by various developers who'll all have the relevant dependencies easily and quickly :) Yay npm!
  • Browserify - All JavaScript is set up within Browserify, which allows for fornt-end JavaScript to be structured as npm-style Node modules with require() statements for dependencies. This allows us to manage all of Clickr's front end dependencies using npm and keeps things modular.
  • React - our front end app is built with the React framework to keep track of application states. We don't do anything too wild or complicated at the moment, so it's largely keeping things simple and well structured for a single page web app.

How to build and run Clickr

  1. Ensure you have Node installed on your development environment! At the time of writing, you will need Node version 0.10.26 for the Spark npm module to work. If you have a later version of Node installed, you can set up multiple versions of Node to run using the Node manager "n":
    1. Run npm install -g n to install the Node manager (this only works on Mac)
    2. Run sudo n 0.10.26 in the folder with Clickr to install that version of Node.
  2. Clone this git repo into your preferred folder for projects.
  3. Open up your Terminal/Command Prompt and navigate into the folder you clones the project (super simple if you cloned via the command line, you're almost there already!).
  4. Type in npm install (or if you are on Mac, I'd recommend sudo npm install as some of the dependencies may require admin priveleges). This command reads package.json and installs all of the required dependencies Clickr needs to run.
  5. Type in gulp serve in the same folder to compile everything nicely and have it served to you in a web browser at localhost:3000.

Target your own device!

At the moment, to target your own device you'll need to open up src/js/app.js and replace DEVICE_ID and ACCESS_TOKEN with your own ones.

Issues with building the files but want to test?

Just run the files within the /public folder. Do a search for DEVICE_ID and ACCESS_TOKEN and update those two variables.

Go on. Run it. Click things. You know you want to.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.