Photo by Filip Urban on Unsplash

REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Dec 2021)

Every month I give updates in my digital garden. December, I focus mainly on no-code concepts, flame graphs, and the e2e test with Cypress.

At first, I mentioned I started integrating my side project (digital garden) with Cypress.

Digital Garden Cypress Tests

1. Dynamic Counters

Here you will find a quick demonstration. This is a sample Dynamic Counters application for NoCode development. In previous applications we have developed a Multiple Counter application in which the Counter count is fixed, and defined by the developer.

In this application, the user can generate new Counters and parts dynamic.. It’s a NoCode Application which allows users to design their own counters.

• First click the creation button to change mode Creation
• Then click the Create Counter/Add Store button to create a Counter Parts Generator.
• The + icon appear on screen. When you click it, it expands and display Counter Parts creation buttons (Inc, Dec, Reset, Displayer)
• You can click any of these buttons and generate parts of the component
• If you want you can repeat same steps and generate new counters

2. Flame Graphs Coloring

Here you will find a quick demonstration. This is a sample Flame Graph Coloring application. A flame graph displays hierarchical data in two-dimensional views.

In this application the user can select different color pallets in the flame graph.

• Native Colors
• Color Temperatures
• Brewer

3. Dynamic Counters2 (Multiple Store)

Here you will find a quick demonstration. This is a sample Multiple Store applications for NoCode development. It provides multiple stores, which you can design with different kind of stores/components.

This application contains 2 types of stores;

• Counter’s Parts is only clickable and displays the value.. So the user interaction is simple.
• Say Something’s Parts include a Textbox, an Apply button and a display value part.. It’s more flexible than the counter. So the user can use the dynamic input field.

4. Flame Graphs Auto Sizing (Responsive)

Here you will find a quick demonstration. his is a sample Flame Graph Auto Sizing application. It provides Flame Graph autosizing according to it's container size. You can try this sample with dragging sidebar.

5. Dynamic Counters3 ( with Complex IDE)

Here you will find a quick demonstration. This is a sample NoCode IDE. It provides complex IDE feature for NoCode platforms.

Left Border contains;

• Pages Tab
• Layouts Tab
• Styling Component Tab

Right Border contains;

• Dynamic Store Tab
• Action Tab
• Flow Tab

Bottom Border Bottom

• Console Tab
• Storyboard Tab
• Settings Tab

6. Static Form

Here you will find a quick demonstration. This is a sample Static Form application. This application contains a TextBox and Apply button. All of them are generated with React + JSX.

7. Dynamic Form

Here you will find a quick demonstration. This is a sample Dynamic Form application for NodeCode development. It enables to generate the TextInput and PasswordInput element.

8. Dynamic Form Block

Here you will find a quick demonstration. This is a sample Dynamic Form Block application for NodeCode development. It allows to generate dynamic forms the content of which you can also change later.

9. Dnd Sorting

Here you will find a quick demonstration. This is a sample “Sorting with Dnd” application. It allows creation of sortable lists by dragging and dropping the items.

10 Editable Label

Here you will find a quick demonstration. This is a sample “Editable Label” application. It provides a label which can be edited if the user clicks on it. This component has two modes;

• Label Mode
• Textfield Mode

11. Static Address Form

Here you will find a quick demonstration. This is a sample Static Address Form application. It provides City, District, and Neighborhood options for selection. It's all data is static and generated on client side.

12. Address Form (Fetching Data From Server)

Here you will find a quick demonstration. This is a sample "Static Address Form and Fetching Dictionary Data" application.

It provides City, District, and Neighborhood options for selection. We mock all data with MSW.js (Mock Service Worker). It simulates server and provides HTTP Restful services. Components fetch the data and use them.

13. Address Form (Fetching Data and Using Redux)

Here you will find a quick demonstration. This is a sample “Static Address Form and Fetching Dictionary Data and Store in Redux” application.

It provides City, District, and Neighborhood options for selection. We mock all data with MSW.js (Mock Service Worker). It simulates server and provides HTTP Restful services. Components fetched data and store it on Redux before using.

14. Address Form (Abstraction Fetching And Redux)

Here you will find a quick demonstration. This is a sample “Static Address Form and Abstract Fetching & Store operations” application.

It provides City, District, and Neighborhood options for selection. We mock all data with MSW.js (Mock Service Worker). It simulates server and provides HTTP Restful services. Components use some abstracted parametric generated code, so we can use it NodeCode Infrastructure in future.

15. Dynamic Form 2 (Support Dropdown)

Here you will find a quick demonstration. This is a sample “Dynamic Address Form with Dropdown” application.

It allows the user to generate Dynamic Form with;

• TextField,
• PasswordField and Dropdown.

Dropdown dynamic generation is a bit harder than TextField, because dropdown needs options data which must load before dropdown display.

With NoCode development you must follow below steps;

• First define backend fetch actions.
• Define when this actions run.. (on page load, or any other dropdown change…)
• Generate dropdown component
• Bind dropdown component and fetch action result

Let’s continue reading 😃

You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share