Skip to content

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

Notifications You must be signed in to change notification settings

koalabears/codecrystal

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Codecrystal

Join the chat at https://gitter.im/Crystal-Clear/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

Codecrystal

##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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.5%
  • HTML 20.9%
  • CSS 13.6%