feat: project init structure with basic layout

.gitignore

@@ -1,5 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# IDEs and editors
+.idea/
+.vscode/
+.env
+
 # dependencies
 /node_modules
 /.pnp

README.md

@@ -6,6 +6,54 @@ Allows users to search and play with various DiceDB commands in real-time.
 
 This repository hosts frontend service implementation of the Playground.
 
+## Prerequisites
+
+Ensure you have the following installed:
+- **Node.js** (v16.x or later)
+- **Yarn** (or npm)
+- **Next.js** (v13.x or later)
+
+## Installation
+Clone the repository and install the dependencies:
+
+```bash
+git clone <repository-url>
+cd playground-web
+npm install
+```
+
+## Development
+
+To start the development server, run:
+
+```bash
+npm run dev
+```
+
+This will launch the app on [http://localhost:3000](http://localhost:3000). The app will automatically reload if you make changes to the code.
+
+## Building for Production
+
+To create a production build:
+
+```bash
+npm run build
+```
+
+After the build is complete, you can start the production server with:
+
+```bash
+npm run start
+```
+
+## Project Structure
+
+The main components of the DiceDB Playground include:
+- **Terminal Component**: A basic terminal interface for interacting with DiceDB commands.
+- **Search Component**: Allows searching through mock commands or documentation.
+
+Feel free to extend or modify the components to suit your needs.
+
 ## How to contribute
 
 The Code Contribution Guidelines are published at [CONTRIBUTING.md](CONTRIBUTING.md); please read them before you start making any changes. This would allow us to have a consistent standard of coding practices and developer experience.

package.json

@@ -10,9 +10,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.20",
+    "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-terminal-ui": "^1.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/page.tsx

@@ -1,17 +1,9 @@
-import Image from "next/image";
+import Playground from "@/components/Playground/Playground";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          src="/logo.png"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
+      <main>
+        <Playground />
       </main>
-    </div>
   );
-}
+}