Final Project Overview

During the last 3 weeks of the course, you will be designing and implementing a short project of your choosing. Think of this project as one step towards a larger goal you might work towards — dedicated to a web-related topic or idea that you’re excited about, and a step beyond what you currently know how to do. You don’t have to complete your whole vision…just a slice of it. The most important thing is for you to pick something you’re interested in and excited about.

Don’t be afraid to take a risk and explore something you do not yet know how to do. We’re here to help, and we’re not going to penalize you for making a good faith effort to learn something new…even if everything doesn’t work out perfectly. Also, while many of you are seniors and may have a well-defined sense of what you like / what you gravitate towards, We also want to encourage you to not box yourself into either “front-end” or “back-end” without first giving yourself an opportunity to explore each. You may have an affinity for one, the other, or both that you may not yet be aware of…so keep an open mind!

1. Scoping Criteria / Ground Rules

Aim to scope your project so that you can arrive at a coherent stopping point by the end of the quarter. We are hesitant to provide too many scoping criteria/restrictions a priori. We would rather work with you to scope something that is doable after first seeing what you’re interested in. That said, here are a few guidelines:

• You may work on your own or in groups of up to 4 people. Your work plan should be commensurate with the number of people in your group.
• You may focus on depth or breadth. In other words, you can go deep in one particular area (design + CSS, animation, data visualization, REST APIs, Web Sockets), or build something that uses a little bit of everything.
• You will be completing 3 project deliverables in the coming weeks (which you will set for yourself). You will also be presenting your final deliverable during the last day of class. Given this, think about how you might break your project into 3 coherent parts.
• Each deliverable should represent about 4-6 hours of development effort (per teammate). We realize that this is difficult for us to qualitatively assess when we’re grading you, and will give you the benefit of the doubt. That said, if your scope of work is significantly less than that of the homework assignments, this will be obvious to us.
• You’re welcome to connect this to a larger project you’re working on outside of this class. That said, your three deliverables must be original work that you complete over the course of this class. Moreover, you cannot double-count this work with work in another class.
• You are welcome to explore something that wasn’t directly covered in class. That said, at least 50% of your project should connect with the technologies and ideas from the class.
• This project is not your life’s work — it’s the beginning of a longer journey into web technologies. As such, scope your project to something reasonable. You can always build on these ideas later.

2. Potential Technologies You Can Explore

Here is a list of possible technologies you might explore. Note that this is not an exhaustive list! Just some suggestions to get you thinking:

A. Front End Technologies

CSS

• Working with a CSS Framework (e.g. Bootstrap, Foundation, etc. – see this list.
• Using an existing tech firm’s CSS / Widget library (e.g. check out the design resources page).
• Learning how to use SCSS / SASS.

Client-Side JavaScript

• Experimenting with the native HTML5 video, audio, or Canvas APIs.
• Integrating multimodal inputs (e.g. data from the microphone, webcam, etc.)
• Using Experimenting with an existing front end framework you’re interested in learning more about.
• Exploring a state management library.
• Incorporating some interesting third-party JavaScript libraries or widgets. For instance:
  • Leaflet Maps
  • Highcharts
  • Vega
  • d3.js
  • three.js
  • anime.js
  • p5.js

Alternative Clients

Note: if you go this route, we may not have the bandwidth to support you, but if you’re OK with that, go for it!

• Make a Chrome Extension
• Make a native app (Android, iPhone, etc.)
• Designing a progressive web app.

B. Back End Technologies

• Using an alternative Back End framework (e.g. Django, Flask, etc.)
• Integrating a pre-trained model
• Working with web sockets
• Integrating a third-party data API (e.g. TikTok, Twitter, YouTube, etc.).
• Exploring server-side templating
• Creating your own REST API (using Node.js + Express or something else)
• Supporting login / user authentication / user accounts
• Using a database (either MongoDB or something else)
• Integrating media storage (e.g. allowing folks to upload photos, videos, etc.) via S3 (or some other data storage alternative).
• Exploring an e-commerce API (e.g. Shopify, Square, etc.)

Some Sample Project Ideas

These ideas listed below are but a few of the many directions you might pursue. That said, we want you to pursue something that YOU are interested in, so feel free to chart your own course.

1. Project that Focuses on Front-End

Designing and implementing a front-end web interaction using primarily client-side web technologies (HTML, CSS, JavaScript). This would be a very UX/UI focused project that focuses on design (e.g. principles of composition, interaction design, etc.). Example ideas:

1. Designing and building a web portfolio from scratch.
2. Making a personal website (or a part of a website) on a topic of interest (music, art, current events)
3. Helping an existing business / organization / initiative w/their website (or building one from scratch).
4. Redesigning an existing website that needs improvement.

2. Data Visualization / Journalistic Interactive (Front End)

Creating an interesting, interactive data visualization and/or media presentation that communicates an issue or idea. Take a look at a few examples:

• Information is Beautiful
• Flowing Data
• NYT Visual Stories: NYTimes Interactive 2020
• Scrollytelling Guide

3. Data-Driven Web App for an Existing Database

Creating some interactive web front end that works with a existing, third-party API (e.g. Spotify, CTA, Divvy Bikes API, Twitter, Flickr, etc.). For instance, this is a web app that interacts with the Spotify API (like this one).

4. Full Stack Web App (with Custom Database)

Designing and implementing a small REST API with a database, and using it to drive your website. For instance, make your own journaling app, photo sharing app, etc.

Project Deliverables

Below is a rough guide to the schedule of deliverables and how you will be assessed (subject to change):