• MiraQL is a GUI that allows developers to test and monitor query performance, track responses and errors, and visualizes their GraphQL schema in real time.

• Created React higher-order functional components, which leveraged React Hooks to handle complex state management to create a user schema with a large amount of input data.

• Leveraged D3.js to display user-chosen aspects of their GraphQL schema on the DOM with modern-looking, interactive graphical elements.

• Utilized ChakraUI and it’s modular, modern-styled visual components to make use of modern design trends and create a responsive, visually understandable user experience.

• Packaged the web app with Electron to make the app available to users on desktops while not having to write in a desktop-specific language.

• Used the CodeMirror library to present a monospaced, line-numbered display for the response from the GraphQL server to make readability easy.

• Product developed under tech accelerator OS Labs (opensourcelabs.io).

Website: https://miraql.org/

• Implemented OAuth using Passport.js to provide the user with a fast and easy sign-up and login method.

• Created RESTful API service to add new users to the app and update their “saved jobs” history whenever they chose to accept or reject a displayed job.

• Interacted with a public jobs listing API and parsed the given data to get only the text that we wanted to display.

• Set up data model in PostgresQL to track signed up users and to enforce unique entries.

• Made use of PostgresQL to store users, users’ cart items, and seller inventory in distinct tables and used join tables to display the logged in user’s cart.

• Created RESTful API service to add new users to the app and update their shopping cart when they added items.

• Leveraged ChakraUI to create interactive React components resulting in a very fast, responsive SPA and a much more enjoyable development experience.

• Composed the routing functions with React Router to navigate the front-end and speed up the user experience with client-side rendering thus allowing renders to happen with less user waiting time.

• As a moderately nested application, React Hooks was used to allow for having multiple states as well as make use of the flexibility of functional components.

• Created an SPA with React with usable components to make maintenance easier and increase modularity while also keeping stateful and visual components separate and ensuring data flow in just one direction.

• Created a Node.js and Express server to handle HTTP and API requests to send user queries for specific game titles to the backend so that an API query could be run.