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 tohttp://localhost:8000/login
. Add the client_ID and client_SECRET to your environment variables usingexports client_ID="...your..clientID..."
exports client_SECRET="...your..clientsecret..."
-
Run the server
node server.js
-
Point your browser to
http://localhost:8000