E49: Mockup development with Meteor

For this experience, you will work individually to create mockup pages of a final project.

First, pick a final project to work on. You can choose one of the existing project ideas in the Readings, or you can choose an approved design-your-own final project. Even if the DYO project was developed in a group, you must work individually on your mockup pages for this experience. You can discuss the mockup ideas with your group partners, but th work must be your own. There should be significant design differences between each group member’s mockups. Think of this week as a chance to explore different approaches to the UI of the system.

The goal of this exercise is to build a Meteor application similar to the results of the Digit 1 and Digits 2 experiences from the prior module: the application illustrates the look and feel of several pages, but does not implement any actual behavior.

Thus, you are focusing for this experience on the “look” of your final project application, without worrying about making forms work or displaying data from the database.

Your goal is to develop approximately 6 - 8 pages for your chosen final project application. One of those pages must be the landing page. Your application must include a menu, and for the purposes of mockup development, all of your mockup pages should have a link to them in the menu.

To create your mockup, follow the standard sequence from the Digits experience:

1. Create a GitHub repository called final-project-mockup and clone it to your local file system.

2. Import the meteor-application-template code into your local final-project-mockup repo following the instructions on its GitHub Page:

   • Download a zip version of meteor-application-template and expand.
   • Copy everything but the readme file into final-project-mockup.
   • cd to final-project-mockup/app, invoke meteor npm install.
   • invoke meteor --settings ../config/settings.development.json
   • Test that system is running on localhost:3000.

3. Create an “Static Web” IntelliJ project called final-project-mockup that points to your repo.

4. Set up your project to use our Javascript coding standards. In a nutshell:

   • Select the ics-se-code-style.xml preferences template (Preferences > Editor > Code Style).
   • Disable IntelliJ Javascript Inspections (Preferences > Editor > Inspections > Javascript).
   • Define the Javascript Language as ECMAScript6 (Preferences > Languages & Frameworks > Javascript)
   • Enable ESLint (Preferences > Languages & Frameworks > Javascript > Code Quality Tools > ESLint). Specify the ESLint package as the one occurring in app/node_modules/eslint.

5. Commit this initial installation to GitHub with message ‘installed meteor-application-template’.

6. Now start creating pages by making copies of the HTML and JS files in the imports/ui/pages directory. Start with the landing page and the menu.

7. As you design and implement additional pages, be sure to create a link to them in the menu. You’ll also need to create a route to them as you did in the Digits application.

When you have completed your mockup, you must take screenshots of your completed pages and commit them to the top-level doc/ directory of your repository.

Then, update the README.md file associated with your repository so that it displays your screenshot images. The meteor-application-template README.md provides examples of how to display images stored in the doc/ directory.

Submission instructions

There are two deadlines for this project:

1. By next Tuesday, have a complete version of your mockup ready for review in class. I will request links to all of your README.md files, and review them with you. The README.md should have screenshots of all the mockup pages you have completed so far. I might also download the code and run the application. Half of your grade for this assignment will be based upon the completeness of your mockup application by Tuesday.

2. By the time and date indicated on the Schedule page, you should make any changes suggested during the review and submit the final version of this assignment via Laulima.

Your submission should contain a link to your repository. We should be able to see screenshots of all your mockup pages by looking at the README.md file. In addition, we should be able to download and execute your Meteor application locally.