Reactrix

Reactrix is an analytical prototyping tool for developers to not only rapidly produce React component trees, but to also determine what structures may lead to the most optimal performance.

Reactrix brings together the commodity of prototyping with a drag and drop feature, allowing users to build out their component trees, and the ability to quickly assess the performance of their applications.

Main Features:

• Drag & Drop 🤏
  Visualize your component hierarchy by dragging and dropping components into the component tree. View and rearrange parent/sibling/children relationships.
• Component Library 📕
  Create and save reusable components and store them across sessions.
• Preview / Demo 🪄
  Render your component tree as a preview with full interactions based on details.
• Profiling 🔎
  Profile the initial render performance of your current component tree.
• Performance Metrics 📊
  View the performance data of your parent and children components displayed as a bar graph.
• Snapshots 📷
  Save and compare performance metrics of your previously saved snapshots.

Getting Started!

1. Simply clone the repo to your local machine

    git clone https://github.com/oslabs-beta/Reactrix.git
   

2. Npm install the needed packages

    npm install
   

3. Run the application with command node dev.js

    node dev.js
   

4. Continue as guest to demo the app. For future collaborators, create a .env file and access the secrets stored in GitHub (reference documentation)

Contributors:

Kevin Chung @kevhjc

Jay Heo @heojay0309

Tychicus Lee @tychicuslee

Jonathan Tam @jktam336