Meme-gen-tutorial

This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)
• Bower
• Ember CLI
• PhantomJS

Installation

• npm install -g ember-cli
• npm install -g phantomjs
• git clone https://github.com/ramybenaroya/meme-gen-tutorial.git
• cd meme-gen-tutorial
• npm install
• bower install
• in /config/environment.js change: whoami: <your-name-in-lowercase>

Running / Development

• ember server
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• ember build (development)
• ember build --environment production (production)

Firebase

• https://flickering-fire-9959.firebaseio.com/memeGen
• username: duda.ember.tutorial@gmail.com
• password: duda1234

Recommended Steps

• Make the following routes available: /memes, /memes/create, 'memes/meme_id'
• /memes :
  • Make a feed of all memes images only
  • Write a component for meme-list-item and transform the feed to a list of these components. meme-list-item should contain a meme-item, but you can defer its implementation at this step.
  • Enable the buttons like/delete/edit
  • Write the meme-item component
  • Insert your meme-item to meme-list-item
  • Activate the memes feed free text filter
  • Write the user-filter-toggler component
  • Make a list of all users in the memes sidebar
  • Activate filtering the memes by users
• /memes/create :
  • Connect the form inputs to the meme-item
  • Activate Saving
  • Handle Cancel by rollbacking the fresh model and transition back to /memes
• /memes/:meme_id/edit :
  • Connect the form inputs to the meme-item
  • Activate Saving
  • Handle Cancel by rollbacking changes model and transition back to /memes

Solution

• git checkout solution
• http://ramybenaroya.github.io/meme-gen-tutorial

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox