FALL 2023
TREEREQ
WORK TYPE 
CONTEXT    csci1951v, brown university
TIME       5 weeks, ~12 hours/week
live project can be found at
treereq.vercel.app

(please allow time for servers to wake from inactivity)
WHAT IS HYPERTEXT?

you might be familiar with a hyperlink, a clickable element that takes a user to its targeted content. hypertext is text that contains these hyperlinks. multiple hypertext pages make up a hypertext system.

hypermedia is an extension of hypertext which allows not just text, but all forms of media (such as graphics, video or audio) to serve as nodes of a system and owners of hyperlinks.

over the course of the semester, we developed various features of a fullstack hypertext system including editable multimedia nodes, multimedia anchors, and links, built out using the MERN stack.

PROJECT BRIEF

this final project transforms the developed, skeleton architecture by adding an additional specialized node type, the course, and a global feature—a course tree—across nodes, anchors, and/or links which helps users navigate and visualize the structure of the hypermedia system.

TreeReq is a structured course planner and prerequisite/postrequisite visualizer that enables high-level planning not directly accessible through single-course visualization.

TreeReq combines API-retrieved and authorized scraped data from course databases
(Banner, Courses @ Brown, The Critical Review) to generate trees of course interaction and populate user-modifiable course nodes with existing descriptions and review information.


MOCKUPS
> mockups by sherry zhang
detailed hypertext features include graph viewing, selective anchoring and linking for all nodes, text and images, and editable linked annotations.

TECHNICAL INFO
LANGUAGES & LIBRARIES

initial data collection
in Python with BeautifulSoup4
and Postman

website made in TypeScript and Sass/SCSS
with MERN (MongoDB, Express, React, Node) stack
featuring ReactFlow and Dagre libraries for graphing
backend hosted on Render
frontend hosted on Vercel
PRODUCT PHOTOS