Implement Initial UI with Dummy Values for DiceDB Playground

[lucifercr07]

Description

DiceDB Playground is an interactive platform that allows users to experiment with DiceDB commands in a live environment, similar to the Go Playground. Users will be able to submit and execute commands directly through a web interface. The initial implementation will focus on enabling users to search for and trigger commands.
For more details about DiceDB playground you can check here.

Implement the initial UI for the DiceDB Playground as per the attached mockup, using NextJS as the framework and Bulma CSS for styling. The UI will include a mock CLI/Shell component and a Search component, with mock API responses in place.

Note: Implementation will be part of DiceDB playground frontend repo.

Components to Implement

1. Search Component:

   • A search box to simulate command lookups with dummy values.
   • Display mock results on search as a dropdown or a list.

2. Static UI elements:

   • Logo for DiceDB Playground at the top.
   • Mock cleanup timer (e.g., Cleanup in 14:40 mins).
   • Mock command triggers left (e.g., Command Triggers left: 998).

Technology Stack:

• Frontend Framework: NextJS
• CSS Framework: Bulma CSS

Tasks

1. Setup the project using NextJS and configure Bulma CSS for styling.
2. Implement the Search component with a simple search box and a list to display mock command results.
3. Use mock data for API responses.
4. Ensure responsiveness and a basic grid layout similar to the attached UI mockup.

Note: We need to just implement Base components and Search Component as part of this PR.

[rishavvajpayee]

hey would like to take this up @lucifercr07

[lucifercr07]

@rishavvajpayee assigned, thanks for contributing.

[N3XT14]

@rishavvajpayee I am working on #3. Let's connect to establish a solid initial structure before diving into individual tasks.

If you've already started working on a specific pattern or have any ideas in mind, we can build on that or I can share mine.

[rishavvajpayee]

hey @N3XT14, you can check my open PR for initial code structure: #4. we can collab on that. this is the basic structure i created just to start things off. let me know if you have better config ideas.

we can add them to my Current PR or as a separate PR

[aks151]

hey @lucifercr07 is there anything on the frontend side i can work on

[rishavvajpayee]

This is closed right @lucifercr07 ?

[lucifercr07]

Merged as part of: #5