Photo by Zoe Schaeffer on Unsplash

REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Sep 2022) — includes 122 Apps

In Sep 2022 I did not add any new application to Digital Garden. Instead of developing something new, I thought I should develop digital garden intelligibility.

But How ?

  • Navigations and Filtering
  • Informations & Usage Videos

1. Navigations

In My Digital Garden includes 122 applications . Every application has different features and capabilities.

Main Page

When users enter the digital garden, they need some navigation and filtering. So I added different filtering capabilities.

Filtering Capabilities
  • Search Filter: Let’s write anything in Search Box, then application cards filters according to keyword matching.
  • Context Filter : UI has different kind of context. Some of them about UI Components, Some of them Styling, Some of them Performance etc… This filters grouping application according to their context. For Example user clicks FlameGraph , the system displays the applications about flame graph
Context Filtering

In first displays the basic app → FlameGraph, then develop it add Custom Tooltip → then develop it and add Coloring, Theming and at last → added auto size capability.

  • Monthly Filter : This filters group applications according to their development data. For example you select 2021.08, only Simple Calculator and Dark Theme apps displays.
Monthly Filtering

2. Informations and Usage Videos

When users click any navigation card, they are redirected to the application pages. Most of pages contains two parts;

  • Demo Part where the application run.
  • Info Part where the informations, usage videos and controls exist.

In the above picture you can see left & right side. Right side is information bar which can includes;

  • Usage: It presents application usage videos.
  • Info: It gives general information about application
  • Controls: Extra controls like text box, sliders, and radio button helps users to control the details of mini-apps
  • Console Viewer: Displays mini-app console.log output.
  • JSON Viewer: It displays data (result, response, editing) in JSON format
  • Log-Viewer: It shows logs in LogViewer.
  • Course : Displays reference links to studies.
  • Libraries: Displays library links to GitHub or NPM links

122 Application Information Text Updated

Info Panel development completed. All applications were refactored with a new info panel design. We rewrote information texts for every application. It was a long process to fixed Video and Information Text part.

Most of 122 Application Usage Videos Updates

Info Panel development completed. All applications were refactored with a new info panel design. We take videos of applications and put it to right side. You can click on videos and watch fullscreen.

Let’s continue reading 😃

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store