add example env for easier setup, better readme (#18)

* add example env for easier setup, better readme

* coderabbit feedback

---------

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>

Author: jobenjada

apps/playground/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR-ENVIRONMENT-ID

apps/playground/.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

apps/playground/README.md

@@ -1,36 +1,52 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Formbricks Playground
 
-## Getting Started
+A demo application for testing and developing Formbricks in-product surveys. This Next.js app provides an interactive environment to test survey triggers, user actions, and attributes.
 
-First, run the development server:
+## Setup
+
+1. Install dependencies:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+pnpm install
+```
+
+2. Create a `.env.local` file with your Formbricks credentials:
+
+```env
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=your-environment-id
+NEXT_PUBLIC_FORMBRICKS_API_HOST=https://app.formbricks.com
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+You can find your environment ID in the Formbricks app under Settings → Setup.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+3. Start the development server:
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+pnpm dev
+```
 
-## Learn More
+Open [http://localhost:3000](http://localhost:3000) to view the app.
 
-To learn more about Next.js, take a look at the following resources:
+## Features
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- **User Identification**: Set user IDs and pull user data from Formbricks
+- **User Attributes**: Test setting single and multiple custom attributes
+- **Actions**: Test both no-code and code actions
+- **Email Setting**: Test user email functionality
+- **Language Support**: Test multi-language survey delivery
+- **Debug Mode**: Automatically enabled for detailed widget logs (check browser console)
+- **Dark Mode**: Toggle between light and dark themes
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Usage
 
-## Deploy on Vercel
+The app provides interactive buttons to test various Formbricks SDK methods:
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+- `formbricks.setUserId()` - Set user ID and sync state
+- `formbricks.setAttribute()` - Set individual attributes
+- `formbricks.setAttributes()` - Set multiple attributes at once
+- `formbricks.setEmail()` - Set user email
+- `formbricks.setLanguage()` - Set user language
+- `formbricks.track()` - Trigger code actions
+- `formbricks.logout()` - Clear user session
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Create surveys in your Formbricks app and use this playground to test triggers and targeting.