Photo by Pelargoniums for Europe on Unsplash

REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Jun 2022)

Onur Dayıbaşı
React Digital Garden
4 min readJun 30, 2022

--

I’m posting the different phases of the applications I’ve developed for ten months on the Digital Garden page on onurdayibasi.dev. Digital Garden is getting stronger day by day.

FullScreen Support For Demo Layouts

This month, I first extended the DemoLayout structure with FullScreen Support. How is it working

When you enter any application screen, you can switch to full-screen mode by clicking the below button, or if you want to exit FullScreen mode, press the ESC button.

Fullscreen Button

You can see the normal .and full-screen mode of SimpleCalculator in the picture below.

Different Device Layouts

Here you will find a quick demonstration. This is a sample Device Layout application.

When a device is selected, the application screen size changes accordingly and the app size fits to the the device screen.

The below image displays the responsiveness of Simple Calculator with different layouts (iPhone, iPad Mini, iPad Air, Macbook).

GitHub Log Viewer Color Support

Here you will find a quick demonstration. This is a sample GitHub LogViewer Color Support application.

It allows Color Support in Log Viewer. Logs can displays with colors.

Visual SQL Editor Column Support

Here you will find a quick demonstration. This is a sample Visual SQL Editor Column Support application.

I have tried to build a Visual SQL Editor/Builder. First, I focused on a structure that you can select columns.

Visual SQL Editor Tables

Here you will find a quick demonstration. This is a sample Visual SQL Tables application.

It allows to visualize DB Tables.

Visual SQL Editor (Column & Table)

Here you will find a quick demonstration. This is a sample Visual SQL Column & Table application.

I combined the Columns and Tables. Below you can see the relation with column and table. Table helps users to understand the data of column.

Visual SQL Editor (Multi-Column)

Here you will find a quick demonstration. This is a sample Visual SQL Multi-Column application.

As you know, SQL can consist of more than one column.

select column1, column2 from … 

I have brought this mechanics to this application, so you can select MultiColumn.

Visual SQL Editor (Multi Data Source)

Here you will find a quick demonstration. This is a sample Visual SQL Multi-Data Source application.

If you work with more than one DB or different Data Sources (AirTable, Intercom, etc…) It allows to select DB from dropdown.

Visual SQL Editor (Filters)

Here you will find a quick demonstration. This is a sample Visual SQL Filters application.

In SQL, there are options to add filters, just like in Columns, so the columns you make come up according to specific criteria. In this section, the user can write the desired condition.

Let’s continue reading 😃

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

--

--