https://github.com/prathampatel25/pistonpad

https://github.com/prathampatel25/pistonpad

appwrite framer-motion gsap lucide-react monaco-code-editor piston-api react react-hook-form react-router redux-toolkit tailwindcss vercel

Last synced: about 22 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/prathampatel25/pistonpad
• Owner: PrathamPatel25
• Created: 2024-12-31T15:06:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-04T15:42:29.000Z (over 1 year ago)
• Last Synced: 2025-10-09T15:43:59.838Z (6 months ago)
• Topics: appwrite, framer-motion, gsap, lucide-react, monaco-code-editor, piston-api, react, react-hook-form, react-router, redux-toolkit, tailwindcss, vercel
• Language: JavaScript
• Homepage: https://piston-pad.vercel.app
• Size: 121 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


# 🚀 PistonPad

[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen.svg)](https://piston-pad.vercel.app/)

[![React](https://img.shields.io/badge/react-%2320232a.svg?style=flat&logo=react&logoColor=%2361DAFB)](https://reactjs.org/)

[![Tailwind](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)

[![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=flat&logo=vite&logoColor=white)](https://vitejs.dev/)

An elegant, powerful online code editor and execution platform powered by the Piston API

[Live Demo](https://piston-pad.vercel.app/) | [Report Bug](https://github.com/PrathamPatel25/PistonPad/issues) | [Request Feature](https://github.com/PrathamPatel25/PistonPad/issues)



## ✨ Features

- 🎨 **Sleek Monaco Editor** with syntax highlighting, autocomplete, and IntelliSense

- ⚡ **Real-time Code Execution** powered by Piston API

- 🔄 **Multi-language Support** for various programming languages

- 💾 **Code Export** - Download your code as ZIP files

- 🎯 **Instant Feedback** with integrated console output

- 🔒 **Secure Code Storage** with Appwrite integration

## 🛠️ Tech Stack

### Frontend

- **Framework:** React 18.3

- **Styling:** Tailwind CSS

- **State Management:** Redux Toolkit

- **Editor:** Monaco Editor

- **Animations:** Framer Motion & GSAP

- **Icons:** Lucide React

- **Routing:** React Router DOM

- **Forms:** React Hook Form

### Backend & Services

- **Code Execution:** Piston API

- **Storage:** Appwrite

- **Deployment:** Vercel

## 🚀 Quick Start

### Prerequisites

- Node.js (v16 or higher)

- npm or yarn

- Git

### Installation

1. **Clone the repository**

   ```bash

   git clone https://github.com/PrathamPatel25/PistonPad.git

   cd PistonPad

   ```

2. **Install dependencies**

   ```bash

   npm install

   ```

3. **Configure environment variables**

   Create a `.env` file in the root directory:

   ```env

   VITE_APPWRITE_URL=your_appwrite_url

   VITE_APPWRITE_PROJECT_ID=your_project_id

   VITE_APPWRITE_DATABASE_ID=your_database_id

   VITE_APPWRITE_COLLECTION_ID=your_collection_id

   ABSTRACT_API_KEY=your_abstract_api_key

   ```

4. **Start the development server**

   ```bash

   npm run dev

   ```

5. **Open your browser**

   Navigate to `http://localhost:5173`

## 🌟 Roadmap

- [ ] Real-time collaboration features

- [ ] Custom themes support

- [ ] Code snippets library

- [ ] User authentication

- [ ] Project sharing capabilities

## 👨‍💻 Author

**Pratham Patel**

- LinkedIn: [Pratham Patel](https://www.linkedin.com/in/pratham-patel-0920-/)

- GitHub: [@PrathamPatel25](https://github.com/PrathamPatel25)

## 🙏 Acknowledgments

- [Monaco Editor](https://microsoft.github.io/monaco-editor/)

- [Piston API](https://github.com/engineer-man/piston)

- [Appwrite](https://appwrite.io/)

- [Tailwind CSS](https://tailwindcss.com/)

---



If you find PistonPad helpful, please consider giving it a ⭐️!