Final Project
Ready to put everything together?
Well, you made it to the final project, congratulations!
We know that it's been a long journey to get here and that there have been many hardships and trials that you've had to endure on your journey as a student of web development, but we are confident that you'll be able to create amazing final projects to be proud of.
The final project is meant to be as open-ended as possible while still having just enough requirements to ensure that you're able to use everything you've learned to the fullest capacity and learn along the way. Think of the final project as something you'd want to build at a hackathon, but spread out over around 3 weeks. Let your imagination fly, let the wings of your mind soar, and let your creativity sprout to be able to build whatever your heart desires. After all, that's why we do what we do here with your web development skills - we wish to build.
Our goal for the decal was to give you all the power to build whatever you could think of - and now is the time to try doing so. Failure at first is unfortunately essentially inevitable, but we hope that throughout the journey you will be able to grow as both a developer and as a student.
You will be working in a group of 4-6 people to brainstorm, create, and deliver a full stack project! Your project must include a design component, a frontend component, and a backend component. Every team will also be assigned a mentor that will help guide you throughout this project and assist you with any questions that you or your team may have. This project is split into various check-ins so we can make sure you're making progress. On the week of Dec 2, we will have a showcase where every team will present their project to their classmates, members of the Berkeley community, and even industry representatives! After the project is over, every team member will submit a peer evaluation form.
This project can be whatever you think of, so feel free to tackle cool problems that you've thought of, or use weird APIs that you've always wanted to use. If you do need some guidance, here's an external API reference resource that lists some cool and weird APIs alongside tutorials on how to use them, written by some of our course staff.
As always if you need any help at all, please feel completely free to contact us through Ed, email, or come to an OH. We're here to support you.
We've seen some truly incredible ideas and websites that have come from this project, and even people on course staff who have taken this class say it is one of the most useful things that they take from it. Because of that, we're so excited to see what you all come up with!
Important Dates
- Thurs, Nov 7: Project group preferences due
- Wed, Nov 13: Checkpoint 1: Project Idea
- Fri, Nov 22: Checkpoint 2: Design Checkpoint
- Mon Dec 2, Wed Dec 4: Presentations
- Fri Dec 6: Project due
Is this a group project?
As said above, yes. The difference between this project and the last project is that working in a group will be mandatory for this project. We believe that getting along with and working in a team is a very important part of any development role and a project as open-ended as this one is a great opportunity for you to develop those skills before working on other projects after this class.
You will be able to choose some people that you want to work with through a group preference form that will be sent out as the project is released on Ed, and responses will be considered when assigning groups. But please note that due to the size of the class and mentor availability there will still be a good chance that you will be working with people you don't know for this project, and after groups are assigned we will not be able to allow you to switch to another group.
Collaboration
There are two principal ways to collaborate. The easiest is to get together to make the main page of the website, and then each person can make their individual sites and combine the files at the end. You may optionally use Git. One person creates the project and repository, and pushes it to GitHub. Then add everyone else as collaborators, and they can clone the project. Each member then pulls and pushes repeatedly. You can learn more at https://rogerdudler.github.io/git-guide/.
All deliverables should be submitted by one group member only.
Checkpoint 1: Project Idea
This checkpoint is relatively simple: by now you should already be in assigned groups of 4-6 people depending on Group Preferences from the previous form and class size. You should already have a project mentor to help you out with ideas, and design and implementation steps. The first step towards making your website is coming up with the idea! We want to get this done early to give you time to actually iterate and expand on this idea into a website over the next few weeks.
Requirements + Submission & Grading
- Submit your project idea & high level features of your website to the "Project 3: Final Project [Idea]" Gradescope assignment. Include the following in your response:
- Project idea and purpose should outline your project and why you are motivated to create it.
- Features should outline what you are trying to implement in your project. Do you have some feature to share with your friends or view data from some API? That should all be included here.
- Get your project idea & high level features of your website checked off by your project mentor. We recommend meeting with your mentor to get feedback on your idea.
This will be worth 5% of the overall project grade. All of your points for this part will come from a successful checkoff with your mentor. So either you get full points (get checked off), or get no points (don't get checked off).
Checkpoint 2: Design Prototype
It's back. Like mentioned in the previous project, designing and wireframing your project beforehand is vital to successfully planning out and eventually delivering more complex web projects. Since this website will be more complicated than previous websites you've made, we highly recommend you take some time and think about the different parts of your website- how they will be designed/what they will look like, and how they will combine together. This will also make it a LOT easier to split up work. Some resources for wireframing can be found in the resources section of this project spec (at the bottom).
Requirements + Submission & Grading
We will require a hifi Figma mock up and a write up of the system design of your website. The submission of this will be:
- A submission of a public Figma project link and system design write up to the "Project 3: Final Project [Design]" Gradescope assignment. Please make sure this project is public so we are able to open it. Include the following in your system design writeup:
- The tech stack used for your application (technologies for the frontend/backend, database used, APIs used)
- Every high level feature of your website.
- For each feature, how this feature is implemented in the frontend (different pages, user workflow)
- For each feature, how this feature is implemented in the backend (corresponding APIs, data storage in database, data fetching through APIs)
- For each group member, describe what their part is and who is working on what.
- Get your Figma mockup and system design write up checked off by your project mentor. We recommend meeting with your mentor to get feedback on your design.
This will be worth 15% of the overall project grade. All of your points for this part will come from a successful checkoff with your mentor. So either you get full points (get checked off), or get no points (don't get checked off).
Checkpoint 3: Final Project Implementation
Requirements + Submission & Grading
We only require you to build a substantial full stack application for this project. This means a multi-page frontend, a large backend that can store, fetch, and manipulate data, and a database. Everything else is truly up to you. In the final week, we will have a project showcase for each group to show what they have accomplished to the rest of the class.
To submit, upload the work that you have done to a repository on Github. DO NOT UPLOAD YOUR node_modules as this will have too many files in it. Also DO NOT upload any sensitive information like API keys. For more information about Git and GitHub, please refer to the GitHub reading or this useful reference.
The submission of this will be:
- Upload your GitHub repository code to the "Project 3: Final Project [Implementation]" Gradescope assignment.
This will be worth 80% of the overall project grade, and a successful final project design, implementation, and presentation is a requirement to pass the class.
All of your points for this part will come from a successful presentation. So either you get full points (present), or get no points (don't present).
Moral Support
We are here for you!
This project may seem a little bit scary at first, but you will have a lot of support from your project mentors and feel completely free to come to OH to get any help during the course of this project.
This is first and foremost a learning opportunity that should be fun! So don't be afraid to ask plenty of questions (there are no stupid questions here), and exploit Stack Overflow to your heart's content.
Resources
Helpful resources for wireframing
- How to Wireframe (Article)
- Wireframing Basics (Video)