Codecrystal

A tool to create a visualisation of the file structure of your Javscript GitHub repo and display it as an image in your READme

##Why

• Provide a visual representation of the links between files in your repo
• Enable members of your team and users of your project/module to understand how it works more easily
• Help with code reviewing

##What

• Log in with GitHub
• Retrieve user's repos
• Select repos for code crystal map
• Retrieve contents of files in selected repos
• Parse files
• Map internal and external dependencies for
  • JavaScript files
  • HTML files
• Display file structure on a map with arrows show the direction of dependency
  • Back end map
  • Front end map
• Allow users to link to the image on their READme

####Stretch goals

• Dynamically update the file structure every time a commit is made to master (using Webhooks)
• Colour code nodes in the file map to show the different types of files

##How

• Hapi.js

  • Server

• GitHub Api:

  • enable users to log in and find their repos
  • read all the files from the latest commit to the master branch
  • extract the contents of the file and decode from base64

• D3.js

  • visualization of file links

• Heroku

  • hosting website

How to run the project

You'll need to have NodeJs installed on your computer before you start.

• Clone the repo

  git clone xxxxxxxxxxxx

• Install the dependancies

  npm install

• Create a Github Application with the entry point set to http://localhost:8000 and the redirectUri to http://localhost:8000/login. Add the client_ID and client_SECRET to your environment variables using

  exports client_ID="...your..clientID..." exports client_SECRET="...your..clientsecret..."

• Run the server

  node server.js

• Point your browser to http://localhost:8000