This project was made as part of Bandung Institute of Technology's Programming Laboratory selection task. This webapp uses an API to fetch the query and render the result to the user.
Input the suspect's ID to the search bar, you can click a node to explore that node (suspect), or double click to add friends from that suspect to the graph. You can zoom in/out on the graph view with the scroll wheel. You can also click a friend in the friend list to investigate that person. Each suspect's element is represented by a logo.
Fetching of the suspect datas is using labpro's API. The endpoint of the API is GET /friends/{id}
. There are some flaws with the API
- The suspect can be included in the friend list from the response
- Duplicate friends in the friend list of a suspect
I'm not sure if this is intended to be a flaw, but is worth mentioning:
- One sided friendship (if a is friend with b, b may or may not be friends with a)
Some recommendation for the API is to filter the generated data first, so that we don't need to filter the nodes and edges when constructing the graph.
To run this project on your local machine, clone this repository. You will need node and npm installed on your machine.
npm install
npm start
This will start the app in development mode. Open http://localhost:3000 to view it in the browser.
npm run deploy
This project is deployed on Github Pages at https://littlemight.github.io/suspect-expander/
- React - Javascript library for front end development
- Material-UI - Frontend framework for React applications
- react-d3-graph - React component to visualize graphs with d3
Icons made by Freepik from www.flaticon.com
The element icons are from fontawesome
- Michel Fang - 13518137 - Teknik Informatika ITB 2018