alsoamit / flexbox.fun

Playground that lets you experiment and master Flexbox Concepts

Introduction

Flexbox.fun is an interactive playground that helps you master Flexbox concepts while having fun.

Features

1. Learn difficult concepts by playing around.
2. Highly Interactive tutorials with widgets (upcoming).
3. Helps you build your confidence in Flexbox.

Usecases

1. Create and experiment with different layouts using Flexbox for faster learning.
2. Perfect your Flexbox skills with easy experimentation and revision.
3. Ideal for creators looking to demonstrate Flexbox concepts through video tutorials.

Getting Started

1. Fork-Clone the repo.
2. Install dependencies.

yarn install

3. Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Vision

1. Interactive Tutorials: Text based tutorials along with interactive widgets and Videos.
2. Skins: Skins for the playground and Flexbox items.
3. Sound Effects
4. Description of Active property: Show a guide of the latest property clicked by the user below the playground.

flexbox.fun's Issues

change playground logo in playground sidebar

The current logo looks like a movie logo, but it does not match the name "Playground."

Tooltips for Sidebar links

Description
Simply looking at the icons gives no clue as to what the links mean.

Solution
Add tooltips to the Sidebar links

1. Playground
2. Tutorials
3. Quizzes (upcoming)

Additional context
This can be achieved by leveraging Flowbite tooltips.

Mismatch in order after deletion of an item.

Describe the bug
There is a mismatch while displaying the details of the Active item in the toolbar once an item is deleted (except if items are deleted from last).

To Reproduce
Steps to reproduce the behavior:

1. Open the Playground
2. Delete item 3.
3. Now, click on item 4.
4. Details of item 5 is shown (error).
5. Or click on item 5, no details are shown.

Expected behavior
Items 4 and 5 should be accessible after 3 is deleted.

Screenshots

Additional context
It could be an issue with how the action removeItem is handled or in reducer state management.