Skip to content

PrathamPatel25/PistonPad

Repository files navigation

🚀 PistonPad

Live Demo React Tailwind Vite

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

Live Demo | Report Bug | Request Feature

✨ 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

    git clone https://github.com/PrathamPatel25/PistonPad.git
    cd PistonPad
  2. Install dependencies

    npm install
  3. Configure environment variables Create a .env file in the root directory:

    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

    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

🙏 Acknowledgments


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