This guide will help IoT designer, service designers, UI/UX designers to prototype their ideas to the organization quickly

I grasp what strikes your mind first when looking at the heading. Don’t worry. I didn’t repeat the same outdated debate on whether designers should code. I feel pleasure to share my personal journey of creating a simple app, react.

Why designers should try react ?

React is designed to make user interfaces. React is made up of components. A sketch is made up of symbols, which is easy for designers to relate.

2. As all the designers know “Design system” is more influential in the design industry in 2018. React plays will play an vital role in design system.

My Steps for creating a small app

Let’s have a quick glimpse of the steps I used to design the app. Also and quick heads up, as I am not an expert in coding, if you have seen any crazy slip, please let me know.

Step 1: Setting up Folder Structure

Composing a folder structure is the significant step. It is time-consuming if you are starting from the scratch.

Hence you can get help from developers to create a folder structure. I got help from my great professor Carrie Kengle

Step2: Install all NPM Modules

This process resembles the installation of all font, plugin and extension.

You have to install different NPM modules in the app folder.

Step 3: Draw your app design in p5.js

This is most interesting step for designers,

You can create awesome animation and interaction in few coding, because they already have a huge library for all the motions https://p5js.org/examples/

Secondly, the javascript is created by a designer (Daniel Shiffman)so it so fun and engaging

Must checkout his youtube, The Coding Train!

Step 4: Wrap p5 sketch inside React code

Using <P5Wrapper> you can include all you crazy javascript coding inside the react

Step 5: Connecting arduino

To acquire the live data from any IOT devices, you just have to type the port name.

Here is a steps for how to find the path to your serial port in terminal.

ls -al /dev/cu*

Step 6: Storing in database and publish

You can store your live data from Arduino or raspberry pie into database using robomongo and publish in real time.

Why I used RoboMongo ?

Robo mogo is an open source, which helps the designers to visually showcase the database.

Reactjs

RoboMongo3T

Step 7: Hosting using Meteor

If you want to learn complete app development in 1 day, meteor is the best way, they have 12 steps to explain you the concept of the publish and subscribe.

Final Match using my app

The main takeaways from this exercise is,

I have understand the developer constraints and their way of thinking.

“Being empathetic to the developer job.”

2. Being able to relate each symbol in sketch with the react components. I personally suggest all the designers to try React and p5.js. But I never suggest them to sit and code throughout their life.

We expect designer to understand physics, but not be a physicist — Developer

I’m curious to know your views on React and p5, check any bugs in my Github.

Quick Starter Kit of Beginners: