Technology Radar

 Technology Radar

Kata Team GitHub package version Build Status Codacy Badge

Technology Radar is a tool that helps organizations to monitor their own discoveries. Keep track of your technologies according to your previous successes and failures.

This project is freely based on technology-radar by ThoughtWorks.

 In short

  • ES6 and React
  • Hosted by GitHub Pages
  • Automatic deploy with git push origin master
  • Google Spreadsheets as database

 Live demo

Here you can find our live demo so you can explore all features.

https://kata-team.github.io/technology-radar

To-Do List

 Getting Started

To get started, fork the project and clone your new repository.

GitHub forks

cd technology-radar/

npm install
npm start

# http://localhost:3000/

 Available tasks

  • npm test A linter tool for identifying and reporting on patterns in JavaScript.
  • npm start Run HTTP Server on http://127.0.0.1:3000/ and watch for changes.
  • npm run build Compile "javascripts" and "stylesheets".
  • npm run deploy Alias for "build". After that, will push changes of the build folder to gh-pages branch.

 Google Spreadsheets integration

Technology Radar provides a Google Spreadsheets integration, so you can use spreadsheets to storage your data.

Here you can find the example used for our live demo. Feel free to duplicate the document and make your own.

https://docs.google.com/spreadsheets/d/112MlfyXSlIQ8nae85Te_xWDBP136GRaYeHlDdKgYyPo

 Create your own

  1. Open the document using the provided link.
  2. Click on File → Make a copy... and choose a filename.
  3. Modify the document adding or removing items.
  4. Select File → Publish to the web... and click on Publish.
  5. Now you just need to copy the worksheetId from the url (e.g. 112MlfyXSlIQ8nae85Te_xWDBP136GRaYeHlDdKgYyPo)
  6. Open the file src/app/stores/ItemsStore.js and paste to the const WORKSHEET_ID.
  7. Save the file e compile the project with npm run build.

 GitHub Pages

The project is a set of html, css and javascript so it can be executed using GitHub Pages.

We use GitHub Pages to provide you our live demo.

 Setup GitHub Pages

 on Code
  1. Open the configuration file at package.json.
  2. Change repository.url link with your repository link.
  3. After that you can deploy to gh-pages with npm run deploy.
  4. You can also deploy to gh-pages using TravisCI.
 on GitHub
  1. Go to your repository page and click on settings.
  2. Scroll down to the GitHub Pages section.
  3. Set the source to gh-pages branch and click on Save.
  4. That's it! Now your site is published.

 Travis CI

We use Travis CI for Continuous Delivery.

  • When you push your code to remote, Travis will automatically test you code and warn you if something goes wrong.
  • If you push to master branch, Travis will compile and push your code to gh-pages branch (if all tests pass).

 Setup Travis CI

 Obtaining a Github token
  1. Log into Github and go to user Settings page.
  2. Click on Personal access tokens.
  3. Click on Generate new token.
  4. Add a Token description (e.g. TravisCI).
  5. Select public_repo under scope section.
  6. Click on Generate token button.
  7. Copy the provided token (after a page refresh you will never be able to get that token again)
 Add token to TravisCI
  1. Log into TravisCI and go to repository Settings page.
  2. Add new Environment Variables.
    • Name: GH_TOKEN
    • Value: paste here the token value
  3. Click on Add button.