Skip to content

Project 1: Design Sketch

Under Construction

This page is mostly complete, but some details might change by Feb 25th.

Over the next 10+ weeks, you will design and implement an interactive application. Your project should have a focused theme and audience of your choosing. We encourage you to be creative and have fun with the project!

For this first project milestone, you will come up with an idea and direction. You will also create an annotated design sketch of your application's layout. In the end, you will submit two pdfs with your proposed project ideas.

Overall Requirements

Your project will…

  1. be a client-side web application.
    • "Client-side" means you will not implement a backend that runs on a server. Your project must be completely self-contained, like the labs we have done so far.
      • Your project should not have social media elements (Ex: likes, status updates). Sharing data with friends requires server-side processing that you cannot access. Any data posted should be for the individual user only.
      • Your project should not depend on authentication/passwords. We will not have your login credentials when grading, and we will not use our own personal credentials (if we even have accounts).
    • "Web application" means a program that runs in the browser and responds to user input.
      • Applications are not static/hard-coded presentations of images and text. They load and work with data to generate the presentation dynamically. That is, applications do something.
      • Most of the code/focus should be JavaScript, with a fair amount of HTML and CSS.
  2. serve someone besides yourself.
    • Thinking empathetically is an important skill for application development. In the future, you need to understand your client's vision to bring new ideas to life.
  3. perform "CRUD" operations (Create, Read, Update, and Delete).
    • Application-relevant data will persist in the browser's local storage. Additional data will be fetched at run-time from third-party APIs (examples below).
  4. be deployed to a publicly accessible URL.
    • That means you can't "hard code" paths that work only on your computer. You also can't install any "server-side" frameworks (like Node.js) or other tools.
  5. meet accessibility and validation standards while demonstrating a pleasant visual design.
    • Use a palette that combines multiple colors for accessible and pleasant aesthetics. See Color-hex, Venngage, or K Design Co. for example palettes.
    • Use CSS layout, borders, spacing, etc., to present information clearly and effectively.
  6. use a CSS framework (Bootstrap or Tailwind).
    • Bootstrap has the advantage of providing many pre-built interactive components that you can control with classes and your own JavaScript. However Tailwind generally has better and more flexible aesthetics, including colors and filters.
  7. use client-side JavaScript libraries (Ex: Chart.js).
  8. include asynchronous programming (in the end).

Frontend Frameworks

Your project must NOT be written using a frontend framework. Ex: React, SolidJS, Svelte, Vue.js, Angular, etc. You may choose to learn these kinds of frameworks in the context of CS 347, or other projects outside of this course. However, the purpose of CS 343 is to learn the fundamentals using "vanilla" JavaScript.

Server-Side Plugins

When developing a project like this, it is common to install and use a local "live server" through VS Code or Node.js. These are nice because you don't have to transfer files back and forth to something like w3stu. However, you must make sure that you can actually deploy your project as required. Prior students learned at the last minute that their live server relied on extra plugins that aren't allowed on w3stu. You should regularly deploy your project as practice and to make sure you haven't accidentally built in server-side dependencies.

Possible Examples

Below are some ideas, and you are encouraged to come up with your own. Your content must be original and not lifted from other websites. Third-party images/media are acceptable provided you adhere to their license; you must also cite their use. You may consider some of the following scenarios and use cases:

  • A calendar for keeping track of due dates, events, birthdays, etc., combining user data with information from standard lists of holidays.
  • A shopping or wish list that allows users to keep track of things they would like to purchase, including tags for sorting based on priority or a comparison shopping cart with pricing data pulled from online stores.
  • A tablet-based ordering system for a local business, with separate screens for selecting and customizing orders, displaying sales information, etc.
  • A personal journal that lets someone track exercise, health, or other personal information, while making progress toward established goals.
  • A personal finance tracker that creates charts illustrating categories of spending habits or an investment portfolio.
  • A note-taking application with a wiki-style interface that lets you update and annotate information.
  • A custom media player interface for building playlists, playing locally stored media, and/or adding annotations (Ex: adding a "bookmark" to a favorite scene or musical passage).

Third-Party APIs

See the collective list of free APIs on GitHub for ideas to support your application. You will need to fetch data from at least one API in your project.

Getting Started

First, exchange contact info with your assigned team members. Set up a group text or other means of communicating outside of class. Then have one student do the following:

  • Go to draw.io and click the blue Start Now button.
  • Click the Google Drive button and authorize the app on Google Drive (if needed).
    • Alternatively, you may use OneDrive. But Google Drive supports more features.
  • Click the Create New Diagram button and select Blank Diagram as the template.
  • Give the file a meaningful name like CS343_Project1.drawio (or similar name).
  • Click the orange Share button (top right) and add the other team members.

Once the diagram is shared, all team members should be able to edit simultaneously.

What to Turn In

Upload the following two pdf files to Canvas. Each pdf should be 2–3 pages. Only one team member needs to submit the files.

  1. Annotated design sketch (exported from draw.io)
  2. Project narrative (from Google Drive or OneDrive)

Your design sketch must…

  • depict at least one page in a larger view (Ex: "desktop").
  • depict at least one page in a smaller view (Ex: "mobile").
  • have annotations to show the font faces, colors, and sizes.
  • have annotations to show the layout and spacing (where not default).
  • depict user interface elements necessary to perform CRUD operations.
  • depict a navigation menu that will be present on all pages.

Example-Sketch.pdf

Your project narrative must include the following sections (about 200 words each):

  • Purpose
    • Clearly state the main idea and intended purpose of your application.
    • Explain a problem your application aims to solve and why it is important.
  • Users
    • Identify the primary users of your application, including their background or needs.
    • Justify how your application will benefit these users and improve their experience.
  • Features
    • Outline the core functionalities of your application and explain how they will work.
    • Provide a concrete example demonstrating how the application fulfills its purpose.
  • Data
    • Describe the types of data that users will create, read, update, and delete (CRUD).
    • Include an example of this data using either real or representative sample values.

At the top of the narrative, include the project title, your team name, and the student names.

Example-Narrative.pdf – coming soon…