More Example Projects:
- https://pushbox.glitch.me/app
- https://github.com/Cather-Zhang/final_project
- https://clip.kmoene.com/
- https://github.com/GP2P/G3P-Expense-Tracker
For your final project, you'll implement a web application that exhibits understanding of the course materials. This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
- Server-side programming using Node.js. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation.
- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) Upload the video to Canvas. (Further instructions are available in the Canvas assignment.) Make sure your video is less than five minutes but long enough to successfully explain your project and show it in action. There is no minimum video length.
Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity.
Students are will work in teams of 3-5 students for the project. Working in teams should help enable you to build a good project in a limited amount of time. Use the #finalproject channel in Slack to pitch ideas for final projects and/or find fellow team members as needed.
Teams must be in place by end of day on Monday, April 8. If you have not identified a team at this point, you will be assigned a team. Put all team members together in one of the empty "Final Project" groups on Canvas. You MUST do this step to receive full credit on the assignment.
Provide an outline of your project direction and the names of associated team members. The outline should have enough detail so that staff can determine if it meets the minimum expectations or if it goes too far to be reasonable by the deadline. Please include a general description of the project and a list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript, etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Your pull request does not need to have a specific name. Only one pull request is required per team.
There are no other scheduled checkpoints for your project.
Although the assignment is due at 11:59 pm, you must be prepared to demo your website in class that day.
Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
The README for your second pull request doesn’t need to be a formal report, but it should contain the following:
- A brief description of what you created, and a link to the project itself (two paragraphs of text)
- Any additional instructions that might be needed to fully use your project (login information, etc.)
- An outline of the technologies you used and how you used them.
- What challenges you faced in completing the project.
- What each group member was responsible for designing / developing.
- What accessibility features you included in your project.
Think of 1, 3, and 4 in particular in a similar vein to the design / technical achievements for A1—A4. Make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
The video described above is also due on Canvas at this time.
Can I use XYZ framework?
You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript. Note that the staff may not be able to assist with TypeScript questions.