---
# System prepended metadata

title: Final Project
tags: [assignment]

---

---
title: Final Project
tags: assignment
---

<span style="font-size: 50px;">**Final Project**</span>
:::info
**Due Dates**
- Individual Ideation 11/7 at 11:59 PM
- Group Formation: 11/9 at 11:59 PM
- Project Proposal: 11/16 at 11:59 PM
- Check In #1: 11/30-12/3
- Check In #2: 12/7-12/9
- Submission: 12/13 at **8:30 AM**
- Presentations: 12/13 at **9:00 AM**

**Reminder:** No late passes can be used for the final project!
:::

<!-- INFO BOXES 
:::success GREEN
This is for any step by step instructions that students should follow. 
:::

:::info BLUE
This is for important assignment information throughout the assignment:
**Released: September 8th, 6:00pm ET** 
**Due: September 15th, 11:59pm ET** 
:::

:::warning YELLOW
Use this info box for disclaimers.
:::

:::danger 
Use this info box for important points that students should not miss!
:::

:::spoiler Dropdown list
Use this 
:::
 -->

<!-- TYPESCRIPT CODE BLOCKS  
```typescript
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
-->

 
<!-- HOW TO CHANGE COLOR IN MARKDOWN
<span style="background:aliceblue">some text with a **lightblue** background</span>

<span style="color:red">some **red** text</span> 
-->

<!-- These are a list of shortcuts available. -->
*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
*[NPM]: Node Package Manager
*[IDE]: Integrated Development Environment
*[MERN]: MongoDB, Express, React, NodeJS
*[Yarn]: Yet Another Resource Negotiator


# **Introduction**

**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:

1. **Adding functionality for at least one additional node type**. This includes providing a user interface to show anchors/links in the editors and follow those links from one node to another. The additional node type cannot be one of the Assignment 4 optional features. 
2. **Developing at least one global feature (trails, access rights, visualisations, etc.) that works across all nodes, anchors, and / or links.** This feature should help users navigate and/or visualize the structure of the hypermedia system. The global feature cannot be one of the Assignment 4 optional features. 


:::success
If you are taking this course for master's/capstone credit, you should add at least **two** new node types and **two** new global features.
:::

<!-- :::info
**Note:** if your group has a specific idea for a project in mind that does not meet the guidelines specified above, reach out to the TA staff and we will determine if your proposed project is acceptable. We will be flexible with our expectations - as long as your goals are realistic!
::: -->

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
**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.**
:::


## Final Project Complexity

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. 

# Part 1: Individual Ideation (5%)
:::info 
**Due: November 7th, 11:59pm ET**
:::

The first stage of the final project is the Individual Ideation phase, and the purpose of this phase is twofold. 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.

**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](https://slack.com/help/articles/201864558-Set-your-Slack-status-and-availability)). 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!
<!-- 
We have also created a [`Google Sheet`](https://docs.google.com/spreadsheets/d/1AWmuuljdZZClI5U2-I-aWaQ_J5Wf2RXr3cYfy-6cQ00/edit?usp=sharing) that you can fill out so that you can all have an overview of the groups - please fill this out when you have an idea that you want to pursue for forming a group! 

 -->


## Final Project Idea Post Requirements
### Individual Post Requirements:
<u>**Paragraph 1: Introduce Your Idea**</u>
- Outline your idea at a high-level
- Describe a basic use case for the features you will implement
 
**<u>Paragraph 2: Implementation</u>**
- Explain how you are thinking about implementing the features at a high level
- Discuss your personal coding strengths (backend, frontend, etc.) and what specific parts of this project you would enjoy working on 

**<u>Paragraph 3: Information for Other Students</u>**
- Outline potential roles that other students could fill in. This can be something as general as backend or frontend or something more specific such as creating a new node type and its corresponding anchors.
- Mention whether you are using this course as a capstone or graduate student requirement. This is important for expected workload!

### Response Post Requirements:
1. Give at least one piece of constructive feedback
2. Briefly mention another potential use case for the feature(s) they proposed
3. (Optional) Include anything else that you think would be helpful


:::info
**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. 
:::

## Editors / Potential Project Features

### Feature Ideas
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!

**<u>New Node Types</u>**
* Mutable editors (e.g. grids/tables/graphs)
* Geographic nodes
* Timeline nodes
* Code editor nodes
* Nodes that combine multiple other nodes

**<u>Global Features</u>**

* Presentation trails
* Users and permissions
* Intermedia-like webs (grouped links)
* Comments / annotations
* Typed links

**<u>React Editors</u>**
Below is a list of editors to provide you with some inspiration for the final project!

**[React-Leaflet](https://react-leaflet.js.org/)**: React leaflet is a component to display Google Maps style interactive maps which you can draw on / pan and zoom!
**[React-Player](https://www.npmjs.com/package/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](https://www.npmjs.com/package/react-svg-map)**: A set of React.js components to display an interactive SVG map.
**[React-PDF-Viewer](https://react-pdf-viewer.dev/)**: 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](https://rowsncolumns.app/)**: Excel-like DataGrid component for React JS built for high performance rendering similar to Google Sheets.
**[React-Designer](https://github.com/react-designer/react-designer/blob/master/README.md)**: 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. 

<!-- If you find a package that you’re interested in you should be checking it over using the methods described in this article and/or by reaching out to a TA to help with the sanity check. -->

<!-- ## Window Manager

To enable the ability for flexible layouts and displaying multiple nodes at once we will be posting instructions on how to use a React window manager package alongside the frontend you implemented in assignment 4. [**Here**](https://nomcopter.github.io/react-mosaic/) is a basic demo of that package. We will make an announcement once this resource is available!

-->


# Part 2: Group Formation
:::info
**Due: November 9th, 11:59pm ET**
:::
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](https://docs.google.com/forms/d/e/1FAIpQLSd97ckPnJrljFMoWcAOnjuIxyHd9ZTsR_no5ipYWG3SNEmxeg/viewform?usp=sf_link)** by the due date.

Once your group has been settled, the TAs will set up a group repository for you on Github Classroom.

# Part 3: Project Proposal / Technical Road Map (15%)
:::info
**Due: November 16th, 11:59pm ET**
Project proposals can be submitted **[here](https://docs.google.com/forms/d/e/1FAIpQLSf6kEjqIOdNvl7iDU_PdMCCBe6zssZTTrAWwFCgGKI73IcNbw/viewform?usp=sf_link)**
:::



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**](https://docs.google.com/document/d/e/2PACX-1vQcL2PbgraADnm0hS4mPtFIiMw3KXEI-te9PxNnxjDtMsbQ0gk97uAaV-zlkR2L8hJ1OW1M3-VVKL4X/pub):

<u>**Part 1: Idea at a High-Level**</u>
- 1-2 paragraphs describing your idea
- 1-2 paragraphs describing the use case(s) for your idea
- 1-2 paragraphs outlining the specific features you will build

<u>**Part 2: Technical Roadmap**</u>

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:
- **The overall design / structure of your project.** How are you building on the architecture from previous assignments? What additional backend or frontend structures you will need to create?
- **Plan for each component.** For every component of your project, briefly describe how you will build it and cite (with links) any external libraries or editors you will be using to do so. 
- **Which member(s) will be in charge of each component.** Consider how you want to divide up the work: Does one member prefer to do backend work and the other two frontend? How will you avoid blocking each other? Do you want each team member to take ownership of a set of features instead of dividing up into backend and frontend? 
- **The TypeScript interfaces that you will need to implement the features in your proposal.** That is to say, similar to the first programming assignments, we expect you to define common TypeScript interfaces that you will use for easy communication between the frontend and backend. This includes field and method declarations for each interface. Don’t worry if down the road you make changes to some of these.

:::warning
**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.
:::

<u>**Part 3: Project Timeline**</u> 
- The timeline should show when you plan to complete each component and what you intend to have done at each checkpoint (can be done with written dates in chronological order or a visual calendar)

<u>**Part 4: Mockup**</u>

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:


<div style="display: grid; width:100%; ">
    <div style="text-align:center; margin-bottom: 20px"><img style="border-radius:5px; width:300px; border:solid 2px black" src="https://i.imgur.com/mjOeFYZ.png" /></div>
    <div style="text-align:center; margin-bottom: 20px"><img style="width:300px;" src="https://i.imgur.com/un0orus.png" /></div>
</div>

When you're finished with your project proposal, you can submit it **[here](https://docs.google.com/forms/d/e/1FAIpQLSf6kEjqIOdNvl7iDU_PdMCCBe6zssZTTrAWwFCgGKI73IcNbw/viewform?usp=sf_link)**

:::info
**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!** 
:::

# Part 4: Check-In #1 (15%) 
:::info
**Check-ins: November 30th - December 3rd**
:::
This will be a 30-minute Zoom meeting scheduled with your mentor TA. 

The goals of this check-in are as follows:
1. Show a functional backend, inline with your proposal specifications. 
2. Demonstrate that you have a strict specification for your backend application in the form of a test suite. 
    - Each function that you defined in your submitted interfaces should be rigorously tested. We care more about the quality of tests over the quantity.
3. Show that you've made progress on your frontend, inline with your proposal plans.
4. Ask your mentor TA any questions you have!

# Part 5: Check-In #2 (5%) 
:::info
**Check-ins: December 7th - December 9th**
:::
This will be a 30 minute Zoom 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:
- Run through your Demo Day presentation with your mentor TA
- Discuss any remaining questions or bugs with your mentor TA

# Part 6: Handin (55%)
:::info
**Due: December 13th 8:30am EST**
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
- **Goals of the project**: What were the goals? Were they met? If so, how? If not, what happened?
- **Use cases**: Description of your system’s use case(s)
- **Difficulties**: What did you learn from this experience?
- **How your project relates to the broader ideas of the class and hypertext systems as a whole.**


:::success
**TODO:**
1. [One person per group] fill out the handin form [**here**](https://docs.google.com/forms/d/e/1FAIpQLSe8e8k1OzhZBGD6QKMm6d3jAsQAckXBPRHU1xPPReBn55IKmA/viewform?usp=sf_link). 
2. [Everyone individually]  fill out the teammate & feedback form [**here**](https://docs.google.com/forms/d/e/1FAIpQLSdByhZmk6qynXgWs6jZv6bG_e-xAAs7juMdTjObpSveL1mkPA/viewform?usp=sf_link). 
:::

# Part 7: Demo Day (5%)
:::info
**During CS1951V Exam Time December 13th 9:00am - 12:00 noon ET**
:::

Demo Day will take place in our normal room (CIT 219). 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:
- What are the use cases for the hypertext system that you created?
- What are the most compelling new features and why are they exciting or useful?
- A live demo of the system being used in one of the use cases mentioned.

# Final Words
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!