E49b: 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 must choose one of the project ideas listed in the Final Project, including any of the class-generated projects.

One goal of this exercise is to build a Meteor application that illustrates the look and feel of several pages, but does not implement any actual behavior. Thus, you do not need to worry about making forms work or displaying data from the database. Another goal is to ensure that everyone in the class starts to feel comfortable adapting the BowFolios code base to the needs of a different application.

Your task is to develop approximately 3-6 pages for your chosen final project application. One of those pages must be the landing page. Your application must include a menu to make it easy to get to each of the pages.

To create your mockup, do the following:

1. Decide which final project idea you want to mockup. Note that this may or may not be the final project you are assigned, so don’t worry too much about this decision. The real value of this exercise is in the coding, not the specific project details.

2. Use paper and pencil to outline the structure and content of the 3-6 pages you will later implement. See BowFolio issues 1, 2, and 3 for examples of paper-and-pencil designs. Sometimes colored pencils are fun to use during this part. You could get together with friends from 314 for a “paper mockup party” and a local establishment of your choice, and trade ideas.

3. Now start working on your implementation. Create a GitHub repository called final-project-mockup and clone it to your local file system.

4. Import the Bowfolios code into your local final-project-mockup repo as follows:

   • Download a zip version of the bowfolios repo and expand the directory
   • 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.
5. Make sure the system is installed correctly from the command line:
   • Invoke meteor npm run start and see that the bowfolios landing page comes upon at http://localhost:3000.
   • Invoke meteor npm run lint and see that ESLint runs successfully and does not find any errors.

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

7. Set up your project to use our Javascript coding standards. Ensure that ESLint is running correctly within your IntelliJ project by introducing an error and seeing the ESLint flags it.

8. Commit this initial installation to GitHub with message ‘installed bowfolios template code’.

9. Finally, implement your paper-and-pencil ideas in code. Use the BowFolios UI directory as a source of code and structural ideas.

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 bowfolios.github.io index.md file provides examples of how to display images stored in its images/ directory.

Submission instructions

By the time and date indicated on the Schedule page, you should 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 your pages.