Welcome to templates and express generator! In this challenge you will be creating a meme server that renders HTML using Jade templates. In addition, you will be able to add comments to the images and save them so that they’re there next time you open the window!

Use Express Generator to create a new project. Select Jade as the rendering engine.

Pick some memes (safe for work please) and pick some funny or images. If you need some ideas, check out http://knowyourmeme.com/memes/popular

Create a json file named memes.json that will act as a model to store images for your memes in an array. Each object in the array will need the properties url and id. Id is a unique number (but is not necessarily the same as the index of the array) and url is the route (i.e., /public/images/sadkeanu.jpg) it will be served from via express.static.

Hint: Remember to use require to get the data from the JSON files.

Select at least 5 images for your memes and store them in /public/images. Add their urls and some unique ids to the memes.json file.

Create a page named memes.jade that will display your meme images. Create a route named memes.js that renders the page along with the images. You can use response.render along with the data from the json file to render the images on the back end.

Note: You can’t use “partials” like with Handlebars. If you want to move any parts of the html into a new Jade file, use the includes keyword to render it inside of the index.jade file.

Create another json file named comments.json that will act as a model to store comments about the images. You need a message property (a string that will have the comment text) and imageId property, the unique ID of the image to which it pertains.

Create a router named comments.js and a GET route that accepts an ID and serves every comment with an imageId that matches. Send that data as a json array, using the response.send() or response.json() method in your express callback. If there are no matches you should send an empty array.

Create a new POST route for creating messages. Get the message and imageId data using the request.body object and write it to the messages.json. Use the fs library to write these to the messages.json file, but don't overwrite the old data! This can be tricky, but you’ll need to use the required json file, append the message to the array, and then save over the file using fs. Test this using a rest client. If it posts correctly, the messages should show up in the file!

Now, create an Ajax form on the page underneath the image, that will allow users to add a message. Use $.ajax with the method set to post.

Once the comment posts, it should automatically display on the page just as if the page has refreshed, but without actually refreshing. Do not fetch all messages all over again! Simply append the response from the post method. You can append it using jQuery, Handlebars, or any other method/library you like.

Do not append the comment until you find out from the server that it’s posted ok.

##Hard Mode (Optional, good practice) When a post is made, check to see if the required req.body properties are defined. If not, send back a 400 error with an explanation to prevent empty objects from being added to your data, and to help inform developers using your routes what data is required.

##Pro Mode (Optional, really good practice) If the comment fails, you should append an error to the DOM instead. Give a user friendly message explaining what happened. For example, if the user doesn't put in a message, or if the json file is missing. Do this on both the client side and the server side. For example, make the message required, and display a nice message before sending your ajax if they don't fill it out. If the user "hacks" the page and deletes the "required" attribute, handle this by displaying a message based on your data that comes back from the 400 error on the server.

##Extreme Mode (Very optional, going above and beyond the required material) Allow the ability to upload new images in the form using an input of type file or image. This can be a very difficult process in Express. I recommend taking a look at this project which has a route for file uploading using an express library called Multer.