Frontend

This is the frontend codebase built with Next.js, React Native Web, and Monaco Editor. It brings together a React Native experience inside the browser, with a VS Code-like editor and custom device frame UI for simulating mobile views.

🚀 Tech Stack

• Next.js (TypeScript) – Web app shell with SSR/SSG
• React Native Web – Render React Native components in browsers
• Monaco Editor – In-browser code editor (VS Code–like)
• Custom Device Frame UI – Simulates iOS/Android device previews

⚙️ Getting Started

1. Clone the repo

git clone "https://github.com/notAryan10/react-native-playground-frontend"
cd react-native-playground-frontend

2. Install dependencies

First install project dependencies:

npm install

Then install the required packages

npm install react-native-web monaco-editor

3. Run the development server

npm run dev

App runs on http://localhost:3000

🛠️ Features

• Cross-platform UI using React Native + React Native Web
• Code editor powered by Monaco (VS Code in-browser)
• Device frame UI for simulating mobile screens
• Next.js SSR/SSG support for web performance

📌 Contributing

1. Fork this repository
2. Create a feature branch (git checkout -b feature-name)
3. Commit your changes (git commit -m "Added feature")
4. Push to your fork (git push origin feature-name)
5. Open a Pull Request