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. Be sure to include the .gitignore file!
   • cd to final-project-mockup/app, invoke meteor npm install.
   • invoke meteor npm run start
   • 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 at 8am, have a complete version of your mockup code committed to GitHub, have the README.md file updated with screenshots, and post the link to your repo to the #final-project channel. I will download all your repos between 8 and 9am, run as many as possible in class, and provide review comments to everyone based upon what I discover. Regardless of whether or not your repo is selected, you will learn valuable things about the requirements for your submission on Tuesday.

2. By the time and date indicated on the Schedule page, you should make any changes suggested during the review and submit the link to your repo via Laulima. We should be able to see up-to-date 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 to reproduce those pages.