When the user adds a new twit using the "create twit" button in the current site, the client-side code in index.js calls a function insertNewTwit(), which uses native JS methods to construct a DOM element representing a new twit based on data passed as arguments to the function and inserts that new twit element into the DOM at the appropriate location.

Your first task in this assignment is to write a Handlebars template to represent a single twit and then to use that template in insertNewTwit() instead of the native JS methods currently used to create a new twit and insert it into the DOM. Here are some specific things you'll have to do to make this happen:

Implement your twit template in its own .handlebars file. You'll use this template in later steps, too.

Add to your package.json file a new build script that uses handlebars to pre-compile your twit template into a JS file. Note that you'll need to install handlebars as a dependency of your package in order to do this pre-compilation. Make sure your server process in server.js serves this generated JS file, and make sure to hook your build script up so it's run every time you use npm start to start the server, just in case you change your template.

Make sure your client-side HTML code includes your generated JS script for the twit template. Also make sure your client-side HTML code includes the Handlebars runtime library, so it can actually use your template.

Replace the native JS functions currently used in insertNewTwit() to build and insert a new twit element with a call to your twit template function, making sure to pass the appropriate arguments into the twit template function. Note that your twit template function will generate an HTML string, not a DOM element, so you'll have to use a slightly different approach to insert the new twit into the DOM.