Final Project - HackMD

--- title: Final Project tags: assignment --- <span style="font-size: 50px;">**Final Project**</span> :::info **Due Dates** - Individual Ideation: 11/8 at 11:59 PM - Group Formation: 11/10 at 11:59 PM - Project Proposal: 11/17 at 11:59 PM - Check In #1: 12/1 - 12/4 - Check In #2: 12/8 - 12/11 - Submission: 12/13 at 9:00 AM - Presentations: 12/13 at 3:00 PM **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/     *[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 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 **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 8th, 11:59pm ET** Post on Slack and submit to Gradescope [**here**](https://www.gradescope.com/courses/592164/assignments/3633223/) ::: 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**](https://www.gradescope.com/courses/592164/assignments/3633223/) 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](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!  ## 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.   # Part 2: Group Formation :::info **Due: November 10th, 11:59pm ET** Groups can be submitted **[here](https://www.gradescope.com/courses/592164/assignments/3631274/)** ::: 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](https://www.gradescope.com/courses/592164/assignments/3631274/)** by the due date. Once your group has been settled, you can set up a group repository for your group [on Github Classroom](https://classroom.github.com/a/ET4V1cYw). # Part 3: Project Proposal / Technical Road Map (15%) :::info **Due: November 17th, 11:59pm ET** Project proposals can be submitted **[here](https://www.gradescope.com/courses/592164/assignments/3206995/)** ::: 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. However, we still expect you to keep the features that make this a hypermedia system. For example, linking should be maintained. ::: <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 on Gradescope](https://www.gradescope.com/courses/592164/assignments/3206995/)** :::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: 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: 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 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: - 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 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 - **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 [group handin form](https://www.gradescope.com/courses/592164/assignments/3783987/) on Gradescope 2. [Everyone individually] fill out the [individual handin form](https://www.gradescope.com/courses/592164/assignments/3784013/) on Gradescope ::: # Part 7: Demo Day (5%) :::info **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: - 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!

Read more

Architecture of Dash

Assignment 4 | Additional Hypertext Features

Assignment 3 FAQs

Assignment 2 | Anchors & Links