Project Description

During the last five weeks of the course, you will be designing and implementing a final project of your choosing. Think of your final 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.

Think broadly and creatively: the web can be directed towards many different ideas, so don’t be afraid to take a risk and explore something you do not yet know how to do. While many of you are seniors and may have a well-defined sense of what you like / what you gravitate towards, I 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!

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. I am hesitant to provide too many scoping criteria/restrictions a priori. I 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:

1. You may work on your own or in groups of 2-3. Your work plan should be commensurate with the number of people in your group.
2. 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.
3. You will be completing 3 project milestones in the coming weeks (which you will set for yourself), and then a final deliverable. You will also be presenting your final deliverable during the last day of class. In other words, think of a task that you can divide into three distinct steps, and then use the final week to refine your project and polish it.
4. You will be the one devising / selecting among the relevant evaluation criteria. In other words, we will evaluate you based on (high-level) metrics that you set for yourself.
5. 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.

Some Sample Project Ideas

A. Design-Oriented Project (Front End)

Designing and implementing a front-end web interaction using primarily HTML and CSS (and perhaps some JavaScript). This would involve really delving into the design principles (symmetry, color, etc.) and justifying / defending your choices and how they communicate the ideas / values of your website. Example ideas:

1. Making a portfolio
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.

B. Animation (Front End)

Creating a web animation / experience using JavaScript and Canvas. Take a look at some of these libraries and examples (which I think are really inspiring).

• Three.js
• Flamingo (turn on the sound)
• Graphic Novel (Boat)
• Paper.js
• Jellies (note that the Canvas element can also be used for ornamentation versus for the main event).

C. 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: 2019 • 2018
• The Atlantic

These libraries may be useful:

• d3.js
• Leaflet Maps
• Highcharts
• Vega

D. Data-Driven Web App for an Existing Database

Creating some interactive web front end that works with a 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).

E. Full Stack Web App (with Custom Database)

Designing and implementing a small REST API with a database, and using it to drive your website. This is only recommended for students who have had at least two programming classes (typically CS majors / minors), as it will involve taking some initiative (reading Node.js tutorials, database tutorials, etc.). Historically, around 2-3 students have gone this route (and have been very successful), but it requires some initiative to do some tutorials on your own.

Project Milestones

In an effort to provide some structure as you work to complete your projects, I’ve set up a schedule of interim deliverables, to help you stay on track and get regular feedback.