Final Project
Due Dates
Reminder: No late passes can be used for the final project!
GitHub Classroom link: https://classroom.github.com/a/ET4V1cYw
Individual Handin: https://www.gradescope.com/courses/592164/assignments/3784013/
Group Handin: https://www.gradescope.com/courses/592164/assignments/3783987/
Welcome to the Final Project for CS1951V! Over the course of the semester, you have built out various features of a fullstack hypertext system. Each project focused on specific features (nodes, anchors, links, editable nodes, etc.) and introduced you to the various technologies we’ve interacted with across the MERN stack. Now that you have the tools to build a hypertext system, we want to see you build the features that interest you!
Your task for the final project is to build on top of the architecture you have developed in the previous assignments by:
If you are taking this course for 2000-level/capstone credit, you should add at least two new node types and two new global features.
Your final project will be built on top of the stencil code you've been using throughout the course. Given the limited time we have for final projects, it isn't feasible to build your final project from scratch.
Each final project group will consist of 3 students. Each group will be assigned a mentor TA that will monitor and guide the group through the project. While we do have a list of potential features and editor types you could focus on in the final project, you are free to develop whichever features/editor types you and your team desire as long as they relate to the course and are of relevant complexity to a final project!
Since this is a very open-ended final project, we will have a number of steps and checkpoints to make sure you and your team are on the right track and making meaningful progress as the end of the semester approaches.
Warning: Our expectation is that this project will take a considerable amount of work from all members of your group. You cannot put this off until the last week. You should spend time at the beginning of the project thinking about issues and bugs that will most likely come up towards the end of the assignment.
Your final grade for this project will be determined by the timeliness and quality of your check-ins as well as the final product.
Your mentor TA will work with your group to ensure that your project is complex enough for a Brown CS final project, and reasonable to finish in the project timeframe. The technical roadmap portion of this assignment, where you outline each part of the assignment and cite exactly how you will implement each feature (noting the respective library/editor if applicable), is important in gauging the complexity of your idea. We have also included checkpoints to check on your progress in case certain packages / editors are too easy or difficult to work with or other complications arise.
The most important thing is to communicate with your mentor TA (through Slack, check-ins, etc.) about your progress so they can help out and guide accordingly! This ensures that your final grade for this project will take into account any unforeseen circumstances or potential roadblocks you run into over the course of the project.
Due: November 8th, 11:59pm ET
Post on Slack and submit to Gradescope here
The first stage of the final project is the Individual Ideation phase, and the purpose of this phase is two-fold. First, we want to give you time to come up with cool and interesting final project ideas. Second, we want you to see other students’ ideas so you can form groups based on similar interests and complementary skill sets.
Your task for this part of the assignment is to write 3 paragraphs in the #final-project-ideas Slack channel that introduce your idea to the class. Additionally, you are required to respond to at least one other classmate’s post with a 1 paragraph response, giving them constructive feedback on their idea. The exact requirements for these posts can be found below, in addition to potential ideas that you can choose to pursue for this project.
After posting your two messages on Slack, take screenshots of these and submit to Gradescope for credit.
Note: We understand that some of you already know who you will be working with. However, we are still requiring all of you to post a unique final project idea in the Slack, as well as a unique response to another classmate. If you already have a FULL group, please update your Slack status to include a ✅ emoji (here are instructions for updating your status). Make sure that you set the “clear after” time frame to “This week” so the status doesn’t disappear after a day. This is how other students will know that you are not looking for teammates. Otherwise, leave your status as is. If you already have a group, please make sure you update your status before you post your final project idea!
Paragraph 1: Introduce Your Idea
Paragraph 2: Implementation
Paragraph 3: Information for Other Students
Note: This is a great chance to show interest in forming groups with other students, especially if their idea is interesting to you or if you think you have a complementary skillset. You can use this response to express interest and show that you are thinking critically about their idea. During the group formation phase, feel free to reach out to other students in this public channel or through Slack’s direct message feature about forming groups.
As mentioned above, we can break down potential features into two distinct categories: new types of nodes (e.g. similar to images and text you’ve seen in the assignments) and global features that apply to generic nodes, anchors, and links.
Below is a list of potential features you could build-out for the final project. However, these are merely suggestions, so feel free to use these as inspiration or come up with something completely different!
New Node Types
Global Features
React Editors
Below is a list of editors to provide you with some inspiration for the final project!
React-Leaflet: React leaflet is a component to display Google Maps style interactive maps which you can draw on / pan and zoom!
React-Player: A React component for playing a variety of media, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.
React-Svg-Map: A set of React.js components to display an interactive SVG map.
React-PDF-Viewer: A React component to view a PDF document written in TypeScript and powered by React hooks completely.
React-Calendar-Timeline: A modern and responsive React timeline component.
Spreadsheet-Grid: Excel-like DataGrid component for React JS built for high performance rendering similar to Google Sheets.
React-Designer: Easy to configure, lightweight, editable vector graphics in your React components.
The above lists are not comprehensive, they are just meant to get you thinking about the sorts of projects you can work on. There are plenty of other npm packages out there, but they heavily vary in quality. Make sure to check how often a package is downloaded and verify the quality of the documentation.
Due: November 10th, 11:59pm ET
Groups can be submitted here
Now that you have posted your ideas in the Slack channel, you should be forming groups based on similar interests and/or complementary skill sets. Feel free to use the class Slack to reach out to other students. The TAs can also help with finding group members, so please reach out to them if you are having trouble finding a group. Once you have finalized a group, fill out the Group Declaration Form here on Gradescope by the due date.
Once your group has been settled, you can set up a group repository for your group on Github Classroom.
Due: November 17th, 11:59pm ET
Project proposals can be submitted here
Once you have a group, you will submit an official project proposal with a timeline of how you plan to complete the project. Here are the requirements this proposal, and here is an example:
Part 1: Idea at a High-Level
Part 2: Technical Roadmap
You can choose how to structure this section (feel free to use writing, diagrams, etc.), however it must include the following information about the actual implementation of your project:
Are all of Assignment 4's requirements necessary?
We don't require you to carry over all of the features in Assignment 4 into your final project. In other words, editable text nodes, folder view, etc., are not needed; you can remove any features that you don't think are useful to the end user.
However, we still expect you to keep the features that make this a hypermedia system. For example, linking should be maintained.
Part 3: Project Timeline
Part 4: Mockup
A rough sketch of the overall design of your web app. You can do this with Figma
, Adobe Xd
, or even just a pen and paper.
Here are a few examples:
When you're finished with your project proposal, you can submit it here on Gradescope
Within 48 hours of the due date, we will either approve your proposal or request a resubmission along with written feedback. If we request a resubmission, this will most likely be because your implementation proposal is not thorough enough or the scope of your project is not complex enough. If we do ask you to resubmit, we will give direct feedback on how your proposal should be altered in order to get approved. To avoid needing to resubmit your proposal, make your submission as detailed as possible, especially in the technical roadmap! We will request more details on any vague aspects of your submission.
Shortly after your proposal is accepted, your group will be assigned a mentor TA who will be your point of contact for the rest of the project!
Check-ins: December 1st - December 4th
This will be a 30-minute meeting scheduled with your mentor TA.
The goals of this check-in are as follows:
Check-ins: December 8th - December 11th
This will be a 30-minute meeting scheduled with your mentor TA. This is the final check-in before handing in your code and presenting your work at Demo Day!
The goals of this check-in are as follows:
Due: December 13th 9:00am ET
Don't stay up too late! 😴
After the final check-in, you will have a week to fix any last minute bugs and polish your project.
You'll also record a 6-10 minute video with a guided demo of your program. In your narration, in addition to discussing your project features, you should also discuss
TODO:
Wednesday, December 13th 3:00pm - 5:30pm ET
Demo Day will take place on our last class meeting. Each group will give a live 3 minute demo showing the class what they have created followed by 5 minutes of Q&A from instructors and students.
Your pitch should cover the following:
Group projects like this are a hallmark of Brown CS classes and we are excited to see the results of your work. Remember, you are working as a team, so make sure you are ALL starting early so that one team member is not jeopardizing the deadlines for the rest of the team.
We look forward to seeing what you all create!