Final Project - HackMD

--- title: Final Project tags: assignment --- <span style="font-size: 50px;">**Final Project**</span> :::info **Deliverables** - **Group Formation: November 9th 11:59pm ET** - **System Description: November 16th 11:59pm ET** - **Backend: November 30th 11:59pm ET** - **Frontend: December 13th 8:30am ET** - **Presentation: December 13th 9:00am ET** ::: :::danger Note: No late passes can be used for the final project! :::     *[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 out a hypertext system, we want to see you build out features that interest you! Your task for the final project is to build on top of the architecture you have developed in the previous 4 assignments by:a 1. Adding functionality for additional node types (audio, map, etc.). **We expect you to add at least one new node type.** This of course includes providing a user interface to show anchors/links in the editors and follow those links from one node to another. 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. :::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! ::: **Each final project group will consist of 3 students.** Each group will be assigned a 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 **Fair 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. To ensure that you are working on this project, there are multiple deadlines along the way. **Your final grade for this project will be determined by the timeliness and quality of your check-ins (40%) and the final product (60%).** ::: ## Final Project Complexity TAs will work with groups to ensure that projects are complex enough for a Brown CS final project, and reasonable to finish in 4-5 weeks. **In addition, capstone or graduate student projects should be considerably more ambitious; we will hold these proposals to a higher standard.** 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 TAs (through Slack, check-ins, hours, 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. # Deliverable 0: Individual Ideation and Group Formation (5%) :::info **Individual posts and group formation due November 9th, 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 introduces 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 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 feature(s) you will implement **<u>Paragraph 2: Implementation</u>** - Explain how you are thinking about implementing the feature(s) 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 very 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) * Temporal Nodes (e.g. video and audio) * Geographic Nodes * Timeline Nodes **<u>Global Features</u>** * Global Search * Presentation Trails * Local and/or Global maps * Spatial hypertext * 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. 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! ## Group Formation 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, have one member of your group complete the Group Declaration Form **[here](https://forms.gle/ZzZxHPRxzJMUHH5Q7)**. Once your group has been settled, we will set up a group repository for you on Github Classroom. # Deliverable 1: Project Proposal and Technical Road Map (15%) :::info **Due: November 16th, 11:59pm ET** ::: Once you have a group, you will submit an official project proposal, a document and 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? - 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 - Include which member(s) will be in charge of each component - Lastly, **you must include all of 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 <u>don't</u> require you to carry over any of the features in Assignment 4 into your final project. In other words, editable text nodes, folder view, etc, are not needed - but feel free to copy our implementation of these features if you think they are useful for the end user. Because you don't need to carry over all Assignment 4 features, we don't require that you iterate upon Assignment 4 code in your final project. Feel free to design your system from the ground up so that it fits your new use case. If any of Assignment 4 code is however useful, then feel free to incorporate it into your code base! ::: <u>**Part 3: Project Timeline**</u> - Lastly, you will need to include a timeline showing 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 [Optional]**</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 pencil. Here are a few examples, you could also just link a Figma or Adobe Xd URL: <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> :::info **Within 24 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. **Within a couple days of your proposal being accepted, your group TA will set up a meeting to review the proposal!** ::: # Deliverable 3: Backend Test Suite / Frontend Basic Setup (20%) :::info **Checkins: November 30th - December 3rd** ::: This will be a 30-minute Zoom meeting scheduled with your TA. There are two main goals of this check in: 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 will provide more details on exactly what this means later on, but we really care more about the quality of tests over the total quantity. It is not necessary that you pass all tests at this point -- we just want to see that you have thought through the expected functionality of the final product. 3. Ensure you have a minimally working frontend that will support the backend once it is implemented. You will demonstrate each frontend React component you will be using with mock data. This means that your frontend components should interact with the same Typescript interfaces you defined in your backend. # Deliverable 4: Frontend Demo to Group TA :::info **Checkins: December 7th - December 9th** ::: This will be a 30 minute Zoom meeting scheduled with your TA. This is the final check-in before handing in your code and presenting your work at Demo Day! The vast majority of your code should be completed by this checkpoint as you will be doing a run through of your presentation at Demo Day in addition to discussing questions or bugs. # Handin (55%) :::info **Due: December 13th at 8:30am EST** Do not stay up too late! 😴 ::: After the check-in for `Part 5`, you will have a week to fix any last minute bugs and polish your demo. You will be submitting your final projects through Github Classroom using the repository you have used throughout project implementation. Additionally, you will be submitting a final Google form that includes all of your project materials, division of labor, any bugs you know of, and potential future projects. You will also be handing in a video that is up to 10 minutes to show and explain all of your features alongside a use case. **Some topics you should cover in your video:** - **Goals of the project**: Were they met? If so, how? If not, what happened? - **Use Cases**: Description of your system’s use cases - **Guided demo of the program**: This is a great chance to show-off the frontend portion of your projects! - **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://forms.gle/kzxR9rBHt9FxHp9x7). 2. [Everyone individually] fill out the teammate & feedback form [**here**](https://forms.gle/cw4NV4c3hbVTbWBa6). ::: # Demo Day (5%) :::info **During CS1951V Exam Time on December 13th 9:00am - 12:00 noon EST** ::: Demo Day will take place in our normal room (219) on December 14th. Each group will prepare a 3 minute pitch 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.