{"id":15378476,"url":"https://github.com/tarebyte/github-prototyping-app","last_synced_at":"2025-07-31T23:04:00.443Z","repository":{"id":147745310,"uuid":"47050867","full_name":"tarebyte/github-prototyping-app","owner":"tarebyte","description":null,"archived":false,"fork":false,"pushed_at":"2015-11-29T05:10:51.000Z","size":673,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-30T21:37:35.205Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tarebyte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-29T05:10:40.000Z","updated_at":"2016-02-16T17:41:30.000Z","dependencies_parsed_at":"2023-04-14T11:45:46.171Z","dependency_job_id":null,"html_url":"https://github.com/tarebyte/github-prototyping-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tarebyte/github-prototyping-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarebyte%2Fgithub-prototyping-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarebyte%2Fgithub-prototyping-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarebyte%2Fgithub-prototyping-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarebyte%2Fgithub-prototyping-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tarebyte","download_url":"https://codeload.github.com/tarebyte/github-prototyping-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarebyte%2Fgithub-prototyping-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268133644,"owners_count":24201374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T14:15:36.785Z","updated_at":"2025-07-31T23:04:00.414Z","avatar_url":"https://github.com/tarebyte.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub prototyping app\r\n\r\nA prototyping app for designers to make quick html prototypes, it's main aim is to:\r\n- Make varations of designs quickly\r\n- To avoid the time and code overhead of making production prototypes\r\n- To allow us to easily publish Heroku prototypes to get our designs in front of users quicker\r\n- For research and usability testing\r\n\r\n\r\n**Some caveats:**\r\n- You need Rails 4 installed\r\n- The emphasis is on speed of prototype creation for designers rather than perfect code for developers\r\n- It's about making quick, throw away layouts and interactions that would need to be rebuilt for production\r\n- It uses Rails so requires that locally to be used\r\n- If the header and footer change we'll have to copy it over\r\n\r\n\r\n### Installing\r\n\r\nThis prototyping tool is essentially not much more than a Rails app with some additional SCSS [(primer)](http://primercss.io/) and markup made available to make making pages easier.\r\n\r\n### Install Rails\r\n\r\nThe first prerequisite is to have Rails 4 installed.\r\n\r\nRails can be installed using RubyGems, which requires ruby to be installed on your machine.\r\n\r\nWith ruby installed (and ideally managed using [rbenv](https://github.com/rbenv/rbenv) you can then install Rails with RubyGems with the command:\r\n\r\n`gem install rails`\r\n\r\n### Clone this repo\r\n\r\nWith Rails successfully installed, you should then clone this repository to a location of your choice on your machine:\r\n\r\n`git clone https://github.com/amosie/github-prototyping-app.git`\r\n\r\n### Run the server\r\n\r\nIn the command line, cd in to the repo you just cloned. To start the rails server, run:\r\n\r\n`rails server`\r\n\r\nYou should now be able to view the default example view of this prototyping app by going to `http://localhost:3000` in your browser. It should look something like this:\r\n\r\n![alt tag](https://raw.githubusercontent.com/amosie/github-prototyping-app/master/public/example.png)\r\n\r\n### How to use\r\n\r\nThe idea is to have separate branches for separate prototypes, which can then optionally be deployed to their own respective heroku apps.\r\n\r\nSet up a local branch for your prototype\r\n\r\nThis should be the first thing you do. Do not make commits/push to master when making a prototype. To set up your local branch, first create it and then check it out:\r\n\r\n`git checkout -b your_prototype_name`\r\n\r\n### Set up your default index page\r\n\r\nBy default, when you go to `http://localhost:3000` the prototyping app will serve up an example page showing some dummy content between the GitHub header and footer.\r\n\r\nThis is for two reasons. Firstly, because it's a 'hello world' that shows everything has worked to this point. Secondly, because it gives you some example HTML and CSS to refer to when making layouts.\r\n\r\n### Create a controller and a view\r\n\r\nA controller in an MVC framework like Rails tells the app what to do when a user visits a certain url. When making a prototype it is what we'll use to separate out different parts or pages of the prototype.\r\n\r\nTo create a controller for your new default index page, run:\r\n\r\n`rails generate controller home index`\r\n\r\nThis will create the controller (and associated files) for a new page.\r\n\r\n### Edit the view\r\n\r\nIf you want to edit the html for the page you just created, you'll need to edit it's view.\r\n\r\nA view is where code that is presented in the browser is kept.\r\n\r\nTo edit the code for the example above, `open app/views/home/index.html.erb`\r\n\r\nAn .erb file can contain HTML and Ruby.\r\n\r\n### Set your prototype root\r\n\r\nRoutes allow you to map urls to controllers.\r\n\r\nIn the case of the new page we made above, we might want to make a cleaner, tidier url so that our default index page sits at the root url `(http://localhost:3000)`.\r\n\r\nTo do this you need to edit `config/routes.rb`.\r\n\r\nOpen this file and change the site root by replacing:\r\n\r\n`root 'github#index'`\r\n\r\nwith:\r\n\r\n`root 'home#index'`\r\n\r\nSave your changes and your newly created view should now be viewable at `http://localhost:3000`\r\n\r\n### Create custom route/s\r\n\r\nYou can add more controllers and routes to create the urls you need for your prototype.\r\n\r\nLet's say we want to make a page that lives at `http://localhost:3000/contact`\r\n\r\nTo do this, you would first generate a controller for it. In your command line:\r\n\r\n`rails generate controller contact index`\r\nThen you would configure your page as described above.\r\n\r\nThen open up `config/routes.rb` and add the following to this file (ideally beneath where the root is specified)\r\n\r\nget `'contact' =\u003e 'contact#index'`\r\nThis tells Rails that any request for `http://localhost:3000/contact` should use the contact controller and specifically, it's index action.\r\n\r\nThis will then automatically look for a file in `app/views/contact/index`.html.erb and display it in the browser.\r\n\r\nTry it. Save your changes and go to `http://localhost:3000/contact`.\r\n\r\nYou can do this as many times as you need for different pages and then link them together.\r\n\r\n### Deploying\r\n\r\nAt some point you'll probably need to share your prototype on a public url.\r\n\r\nTo do this, it's probably best to use Heroku. For two reasons: it's free (albeit the page may take time to initally be served to the browser) and it plays nicely with Rails and git.\r\n\r\nThis prototyping app was made with the following in mind:\r\n\r\nOne branch per prototype\r\nOne Heroku app per prototype\r\nThis means each prototype is isolated and not affected by others and can also be permanently available on a given Heroku url.\r\n\r\nSo a branch needs to map to a Heroku app. Follow these steps:\r\n\r\n**1. Heroku account and toolbelt**\r\n\r\nIf you haven't already, create an account on Heroku and install the toolbelt.\r\n\r\n**2. Create an Heroku app.**\r\n\r\nIn your command line (replacing 'prototype-name' with the name of your prototype):\r\n\r\n`heroku apps:create prototype-name`\r\nThis will create an app at `http://prototype-name.herokuapp.com`\r\n\r\n**3. Confirm creation and that remote set up.**\r\n\r\n`git remote`\r\nShould show a remote called heroku. We need to rename this to match our prototype:\r\n\r\n**4. Rename remote**\r\n\r\n`git remote rename \u003cold\u003e \u003cnew\u003e`\r\n\r\n(eg.  `git remote rename heroku prototype-name-heroku`)\r\n\r\n**5. Deploy**\r\n\r\n`git push prototype-name-heroku your-local-branch-name:master`\r\nThis will push your app to the heroku address you set in step 2.\r\n\r\nAnd you're done...\r\n\r\n...hopefully.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarebyte%2Fgithub-prototyping-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarebyte%2Fgithub-prototyping-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarebyte%2Fgithub-prototyping-app/lists"}