Giter VIP home page Giter VIP logo

codecrystal's Introduction

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

codecrystal's People

Contributors

gitter-badger avatar jrans avatar nikhilaravi avatar rjmk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

codecrystal's Issues

Commenting

Commenting is hard to read on routes.js file, putting the comments on multiple short lines will help readability.

codecrystal/routes.js

Lines 5 to 8 in 06e7473

method: ['GET', 'POST'],
path: "/login",
handler: handlers.login
//after login need to redirect the user to the /repo endpoint to get the repos and then reply.view with the repo.html page using repoList helper

Things to fix in graph.html

  • on doubleclick no zoom (as node highlighting occurs on dbclick)
  • slider zoom bar
  • for node highlighting add a thick border around the selected nodes and links

restructure nodes and links objects

nodes now an object with properties as unique file paths
and links objects which have properties source and target with value those node properties(file path)

Clearer presentation of the data

Now, Code Crystal looks awesome! But I don't think it gives a lot of information (particularly for highly modularised code). One idea for making it work better is setting the strength of links based on the number of links between nodes. Any others?

Modify front end (home.html)

  • User should type in user/repo/branch and we generate the crystal and save to the database and create a web-hook.
  • User can copy the link and paste in READme
  • remove user authentication and retrieval of all repos

env not imported

Instead of node server.js use foreman to import your env variables

No response from gitter

Just a note about customer service, guys - if you have an email address, you need someone to respond to email queries. Gitter is no different - if you set up a gitter channel, you need to make sure someone monitors it or you'll be giving your users a poor service experience from the outset.

restrict file content stored

exclude pics, maybe unnecessary files (i.e. unconnected)?

after 100 lines links to file on github (or comment saying download our nom module and clone repo and view in crystal ball folder!!!!!!!!!!!!)

Graph page css

  • legend size
  • background colours
  • graph size based on repo size

Code crystal markdown looks like a non user friendly error

When I click to generate the code crystal, my immediate reaction upon seeing the blue square with the markdown that appears is to think that it has generated a not very user friendly error!
I'm pretty sure it's because the markdown starts with an exclamation mark !. It might be worth reviewing the UI for how this is displayed ๐Ÿ˜Š

โค๏ธ code crystal, it's so great, thanks for making it!

code-crystal-ui-looks-like-error

Visual example

It would help if you had an image of what it looks like once your app has executed and created a visual representation. It would really help me to understand what this app does.

es6

Ignores es6 files

env name wrong

in your readme the name of your env variables must be in capital letters

False Connections

Refreshing the page leads to extra connections being created between the files. Restarting the server resets the connections.

formatting

some of your lines are very long and require much scrolling - you might want to consider splitting them up.

Comments too

Mobile responsive

Love the new site! Freaking awesome guys. I know this is ultimately more of a desktop thing, but it would be cool if it worked on mobile. I actually opened it first on mobile. The graph might be harder to make responsive, but at the very least a couple of media queries on padding etc. would make the landing page viewable on mobile.

Add description of the files

It would be awsome to have a short line under the name of the file to describe what is the purpose of the file

To many nodes

Test with the canary app. Create folders of nodes to reorganize your nodes or don't load the files from the other packages (don't parse the node_module folder)

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.