Skip to main content

Final Project

🎉 Introduction​

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.

Important Dates​

  • Phase 1: Groups
  • Phase 2: Idea + Prototype
    • Fri, April 12: [deliverable] [Phase 2 submission on gradescope]
  • Phase 3: Final
    • Wed, April 24 : [deliverable] presentation!!!.
    • Fri, April 26 : [deliverable] Project Due!!!.
    • Mon, April 29 : [deliverable] (optional) Extended Final Due!.

📦 Logistics​

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 April 24 (specific date TBA), 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.

All deliverables should be submitted by one group member only.

Phase 1​

Phase 1 is due on Nov 14 so we can give you in-class feedback the follwing day. This is the brainstorm phase. Your team will decide which members will be doing design, frontend, or backend. Members should not solely do design; it should be spread out amongst all/a subset of members. Your team must then write some document that defines your project idea and purpose, the features you are planning on implementing, and your tech stack.

Project idea and purpose should outline your project and why you are motivated to create it. You should also include which team members will be working on which element of your project.

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.

Tech stack should define which technologies you will be using to complete your project. The MERN stack is a common example: SQLite, Express.js, React.js, and Node.js. Also include any APIs or extra libraries/frameworks you will be using to complete your project. Additionally, your project must include at least one of: a significant backend or a significant frontend portion.

Deliverable 1: Project group​

Find your group of 4-6 people and submit the project group form! You do not need to have an idea just yet.

Deliverable 2: Idea​

To start off your project, you'll need to flesh out the above points, that is the project idea, features, and tech stack you'll be using. On the project idea and architecture form, you'll specify what your idea is and how to plan to build it.

You do not have to completely know how to build your idea! Your project mentor will help you with that. What we are looking for is ensuring that you have thought through your idea and have a feasible and well-defined idea in mind.

Your assigned project mentor will then review your idea and give you detailed feedback either in-class or over email. Developing your first web app will be tricky and so your project mentor will be your best resource to learn how to best approach your project.

Aside: Tech Stack Requirements​

A design component means that you must use at least one of (Figma, Adobe Illustrator, or any other design tool) to prototype, wireframe, and design your final project. For the wireframe, it should be LOFI, aka low fidelity. We are not looking for something that's final and very detailed, as long as the wireframe can convey your project idea and make people understand what you are doing.

A front-end component means that you must use React/React Native to build your final project. Feel free to use a component library from the following: React-Bootstrap, Chakra UI, Theme UI, and Material UI. Please post on Ed if you would rather use a different component library not listed. A significant frontend component means that you must use the state feature of React/React Native in a significant way, which means that it must either be extremely important to the functionality of your project or worked within a large capacity (in most projects that use react, the amount of javascript you write heavily outweighs the amount of JSX and CSS you write). Using Typescript, Sass, or any other extra technology is also a plus!

A back-end component means that you must use one of (AWS or any other cloud platform, a database system such as MySQL, MongoDB, etc..., Node.js, Django). A significant backend component would entail working with all of the following (A database system such as MySQL, MongoDB, etc... (You can use a cloud-based database such as Google Firebase or AWS DynamoDB), AWS or any other cloud platform (In a way other than just as a database at the least), and one of (Node.js, Django)).

Phase 2​

Phase 2 is due on April 12. This is the prototype phase. Your team must have design complete and a project repository with working prototypes of any page components and backend files created.

Design members need to complete some mockups of pages or components and showcase them in Figma or any other design tool.

Frontend members need to create some page components that will showcase how your project will be divided. For instance, in Tic-Tac-Toe, we had a game component, a board component, and a square component. Come up with a component heirarchy that makes sense and create these classes/components inside of your React project.

Backend members need to create files in the project repository that outlines how they are going to create, update, retrieve, and destory data from their database, as well as how their database is going to be organized. What information are you storing? Where are you storing it?

Deliverable: Mid-Fi Figma & GitHub​

To collaborate we recommend creating a GitHub so everyone can share files with each other and work on them together. For this deliveable, you should create the prototyped project structure as mentioned above. If you're using React, this would mean creating the Vite project folders. For Node.js this would mean setting up Express.js.

With your idea in mind, your group should now work together on creating a mid-fi design in Figma. Forgot what a mid-fi is? A mid-fi is a design that's fleshed out but not a final draft. Some key aspects that your mid-fi design should have include:

  • Show the layout of your site (header, navigation, footer)
  • Reflect your design idea (colors, logos, etc.)
  • Display all the key features you want to add

You will submit your Figma and GitHub link through this form. Please make sure both links are public.

In-Class: Architecture and Design Reviews​

This class session will have time for you to work with your group, additionally, this will be when your project mentor will check-in 1:1 with you about your project.

Phase 3​

Phase 3 is due on April 26. This is the final phase (29 at the ABSOLUTE LATEST). Your team will complete both the frontend and the backend and integrate them together. Your challenge here will be to finish your entire project before the project deadline. Be sure to communicate with your group members to split up tasks and work efficiently, and use your project mentors and/or course staff to help you if you are stuck.

In-Class: Development Review​

During this second development review, your mentor will check-in to make sure your project is on track to get done. You should have significant progress towards your key features.

Deliverable: Final Submission​

Make sure your final code is pushed to GitHub! Your final submission will be a link to your deployed site.

🍕 Showcase Day​

On April 24 (date to be finalized) we will have a project showcase! Every group will setup a presentation of their website to show-off to your classmates, members of the Berkeley community, and other indudstry guests!

Resources​

Helpful resources for wireframing​

Helpful resources for architecture diagrams​

Moral Support​

We are here for you!

This project may seem a little bit scary at first, but you will have all the support from all the teachers and leadership to guide you through 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 (as long as there is no code copying).