Pitch & Sketch

Deadline

This milestone is due Tuesday, October 27, at the start of class. Pitches will take place in class that day. A complete Pitch & Sketch is required for a C or higher. If you miss the deadline, you can still pitch in office hours and submit your sketch late (before making any claims). It still counts as complete, but with a 5% penalty on your project grade.

For this short, one-week milestone, your team will come up with an idea and direction for your application, choose a third-party API, and design the layout of your application. You will pitch your idea to your instructor in class and turn in an annotated design sketch.

Choosing an Idea

Your project should have a focused theme and audience of your choosing. We encourage you to be creative and have fun with the project!

Your application must…

be a client-side web application.
- You will not implement a backend that runs on a server.
- It should not have social media elements (Ex: likes, status updates). Sharing data with other users requires server-side processing. Any data created is for the individual user only.
- It should not depend on authentication/passwords. We will not have your login credentials when grading.
be an application, not a static website.
- It loads and works with data to generate the presentation dynamically. That is, it does something.
- Most of the code/focus should be JavaScript, with a fair amount of HTML and CSS.
serve someone besides yourself.
- Thinking empathetically about your users is an important skill for application development.
- Try to make something that could actually be a useful application for someone else!
let the user create, read, update, and delete (CRUD) their own data, which persists in localStorage.
- User preferences do not count as part of the CRUD requirement; they are optional settings that enhance the user experience.
- Think about “records”: each item of user data should be a distinct entity that can be created, read, updated, and deleted independently.
- Examples:
  - A calendar event
  - A wish list item
  - A journal entry
  - A financial transaction
  - A recipe
  - A trip itinerary
fetch data from a third-party API at run time. See the collective list of free APIs for ideas. Prefer APIs that do not require a key (or that allow a key to be used from the browser), and that support CORS.

Possible Ideas

A calendar for keeping track of due dates, events, birthdays, etc., combining user data with standard lists of holidays.
A wish list that tracks things you would like to purchase, with tags and priorities.
A personal journal that tracks exercise, health, or other personal goals.
A personal finance tracker with charts of spending habits.
A recipe box that lets you save, rate, and annotate recipes found through a recipe API.
A trip planner that combines your itinerary with weather forecasts for each destination.

Test your API early

Before you commit to an API, make sure you can actually call it from the browser. Paste a request URL into your browser, or try fetch() in the DevTools console. Many teams have discovered too late that their API requires a server, a paid plan, or blocks requests from other websites (CORS). If you are unsure, please discuss with your instructor for advice!

Annotated Design Sketch

Your design sketch is a medium-low fidelity mockup of your app.

It doesn’t have to be polished or pixel-perfect, but someone looking at it should think, “I can see how this would work as a real app!”

Not accepted

Hand-drawn sketches (on paper, a whiteboard, or a tablet)
Black-and-white or grayscale wireframes—use your actual color palette
AI-generated sketches (just don’t – this is YOUR chance to create something yourself)
High-fidelity mockups (yes, if it’s too polished, we’ll reject it too)

A sketch like this will not earn credit for any of the sketch items below.

To get there, your mockup should use:

your actual colors and fonts (the ones you plan to use in CSS).
realistic labels—real headings, navigation, button text, and form labels (no “Button 1”). Placeholder body text like “lorem ipsum” is fine.
real-looking UI elements: form fields, buttons, cards, icons, and images where your app will have them.

Your design sketch must:

be a medium-low fidelity, full-color digital mockup (see above).
depict at least three pages/views in a larger view (Ex: “desktop”).
depict the same three pages/views in a smaller view (Ex: “mobile”).
depict a navigation menu that will be present on all pages/views.
depict the user interface elements needed for each Basic claim: creating, editing, and deleting data, and requesting data from the API.
have annotations to show the font faces, sizes, and colors.
have annotations to show the layout and spacing (where not default).

Example Annotations

Check out Dawgstagram, which includes an Annotated Design Sketch (opens in the diagrams.net viewer) showing how to annotate fonts, colors, and spacing.

Tools

Use a digital design tool. We recommend either:

Figma — free for students with the Education plan; great for realistic mockups and real-time collaboration.
draw.io — free, in the browser or inside VS Code. You can start from this nearly-scratch example, which has one “page” for desktop and one for mobile.

Other digital tools are fine too, as long as the result meets the requirements.

Pitch Card

You must also submit a pitch card with:

the app’s name, your team name, and the names of all three team members.
one or two sentences describing the app’s purpose and its target users.
the third-party API you will use and a brief description of how it will be used in your app.

the data the user will create, read, update, and delete, with example values (Ex: a “recipe” has a title, list of ingredients, rating 1–5, and notes).

Give an example as JSON:

{
    "title": "Chocolate Chip Cookies",
    "ingredients": ["flour", "sugar", "chocolate chips", "butter", "eggs"],
    "rating": 5,
    "notes": "Family favorite!"
}

The Pitch

In class on the due date, your team will pitch your idea to your instructor in about 2 minutes, using your mockup as a visual aid. Every team member must speak. Be ready to answer questions like:

What problem does this solve, and for whom?
Walk me through how a user would create, edit, and delete their data.
What does the API give you that your app couldn’t do on its own?
Which Advanced claims are you thinking about?

Your instructor may approve the idea as-is, or ask for changes before you start building.

What to Turn In

Only one team member needs to submit.

Upload your pitch card and sketch as PDFs to Canvas.

Grading

Each item below is marked met or not yet. This milestone is complete (required for a C or higher) when all 10 items are met. If any items are not yet met, you may submit one revision within 48 hours of receiving feedback.

#	Item
1	Pitch card: name, team members, purpose, and target users
2	Pitch card: third-party API identified with a brief description
3	Pitch card: CRUD data described with example values
4	Sketch: three pages/views at a large size
5	Sketch: the same three pages/views at a small size
6	Sketch: navigation menu present on every page/view
7	Sketch: UI elements for every Basic claim (CRUD and API request)
8	Medium-low fidelity: digital, full color, realistic labels
9	Annotations: font faces, sizes, colors, layout, and spacing
10	Pitch: delivered in class, every team member speaks