Skip to main content

Final Project Overview

🎉 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 3-4 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.

📦 Logistics

You will be placed in a team of ~5 people with 1 month 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 mentors 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 3 phases and is due on April 28th. You will submit on Gradescope and connect with your mentor after you are done with each phase. On April 28th, every team will demo their project to their classmates and a panel of exciting people. After the project is over, every team member will submit a peer evaluation form.

Phase 1

Phase 1 is due on April 7th. 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: MongoDB, 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.

After you have completed these steps, email or message your mentor and show them your work to be done with this phase.

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 Piazza 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 14th. This is the prototype phase. Your team must have design wireframes 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?

We will have a full stack lab on April 19th to help integrate your project's frontend with your backend. So don't worry about how those two will connect until then. Just communicate with each other on how the frontend side and backend side should sync up before then.

Phase 3

Phase 3 is due on April 28th. This is the final phase. 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.

🌠 Demo Night

On April 28th we will have a project showcase/demo night! Every group will have 6 minutes to present their project to their classmates and a panel of course staff/WDB members and other industry guests.


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).