Skip to content

Latest commit

 

History

History
231 lines (158 loc) · 8.29 KB

README.md

File metadata and controls

231 lines (158 loc) · 8.29 KB

🎮 OpenPlayground

Build. Share. Explore. A community-driven platform where developers showcase their creativity through interactive web projects.

ECWOC 2026 License: MIT PRs Welcome Contributors Stars

🌐 View Live Website | 📖 Contributing Guide | 🐛 Debugging Guide | 💬 Discussions

• Project spotlight: Recipe – Landing Page Preview

🚀 What is OpenPlayground?

OpenPlayground is where creativity meets code! Whether you're building your first calculator or crafting an innovative game, this is your space to share and discover amazing projects. From beginners taking their first steps to experienced developers experimenting with new ideas - everyone is welcome here.

✨ Why Choose OpenPlayground?

Feature Description
🎯 Learn by Building Practice your skills with real-world projects
🌟 Get Discovered Showcase your work to the global developer community
💡 Inspire Others Your project might spark someone's next breakthrough
🤝 Beginner Friendly Perfect for developers at any skill level
🔓 Open Source Contribute to something meaningful and lasting

⭐ Love what we're building? Star this repository to show your support!

🎨 Features

  • 🔍 Smart Search - Find projects by name, description, or technology
  • 🏷️ Category Filters - Browse by Utility, Game, Puzzle, Fun, and more
  • 📋 Dual View Modes - Switch between Card and List view
  • 🔖 Bookmarks - Save your favorite projects for quick access
  • 📅 Deadline Tracking - Mark project deadlines and importance levels ⭐ NEW
  • 🎲 Random Project - Discover something new with one click
  • 🚀 Full-Stack Section - Unique projects in MERN, Python, Go, Rust & more (GitHub only)
  • 🌙 Dark Mode - Easy on the eyes, day or night
  • 📱 Fully Responsive - Works beautifully on all devices

🚀 Quick Start Guide

⚠️ Important: Do not open index.html directly using the file:// protocol. Please run the project using a local development server, otherwise some components may fail to load.

👀 For Visitors

Simply visit our live website and start exploring!

👨‍💻 For Contributors

Ready to add your project? Follow these simple steps:

1️⃣ Fork & Clone

git clone https://github.com/YOUR_USERNAME/OpenPlayground.git
cd OpenPlayground

2️⃣ Create Your Project Folder

mkdir projects/my-awesome-project
cd projects/my-awesome-project

3️⃣ Build Your Project

Create these files in your project folder:

  • index.html - Your main project file
  • style.css - Your styles
  • script.js - Your JavaScript logic

4️⃣ Add to projects.json ⚠️ IMPORTANT!

Open projects.json in the root folder and add your project entry:

{
  "title": "Your Project Name",
  "category": "utility",
  "description": "A brief description of what your project does.",
  "tech": ["HTML", "CSS", "JavaScript"],
  "link": "./projects/my-awesome-project/index.html",
  "icon": "ri-code-s-slash-line",
  "coverStyle": "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
}

Available Categories: utility, game, puzzle, fun, productivity, experimental

Icons: Use any icon from RemixIcon (e.g., ri-gamepad-line, ri-calculator-line)

5️⃣ Submit Your Contribution

git add .
git commit -m "Add: Your Project Name - Brief description"
git push origin main

Then create a Pull Request on GitHub!

📁 Project Structure

OpenPlayground/
├── 📂 projects/              # 🎯 All community projects live here
│   ├── 📂 calculator/
│   ├── 📂 tic-tac-toe/
│   └── 📂 your-project/      # 🚀 Your project goes here!
├── 📂 components/            # Reusable HTML components
├── 📂 css/                   # Global website styles
├── 📂 js/                    # Global website scripts
├── 📄 index.html             # Main website entry
├── 📄 projects.json          # ⭐ Project registry (add your project here!)
├── 📄 README.md              # This file
└── 📄 CONTRIBUTING.md        # Detailed contribution guidelines

🎯 Project Categories

Category Icon Description
Utility 🛠️ Tools, calculators, converters
Game 🎮 Interactive games and entertainment
Puzzle 🧩 Brain teasers and logic games
Fun 🎉 Jokes, quotes, creative projects
Productivity 📊 Planners, trackers, organizers
MERN Stack 🚀 Full-Stack projects (GitHub only)
Experimental 🔬 Unique concepts and demos

🤝 Contributing Guidelines

✅ Project Requirements

  • Use vanilla HTML, CSS, and JavaScript
  • Include index.html as the entry point
  • Make it responsive and accessible
  • Add your project to projects.json
  • Test across different browsers
  • Keep content family-friendly

💡 Best Practices

  • Add meaningful comments to your code
  • Use semantic HTML elements
  • Follow consistent naming conventions
  • Optimize for performance
  • Include error handling where appropriate

📖 Read the full contributing guide →

🐛 Running into issues? Check the debugging guide →

🏆 Our Amazing Contributors

A huge thank you to all the talented developers who have contributed!

Want to see your avatar here? Make your first contribution today!

💡 Project Ideas

Difficulty Ideas
Beginner Quote generator, color picker, countdown timer, password generator
Intermediate Weather app, expense tracker, memory game, markdown editor
Advanced Code editor, music visualizer, real-time chat, multiplayer game

🛠️ Tech Stack

  • Frontend: HTML5, CSS3, JavaScript (ES6+)
  • Icons: RemixIcon
  • Fonts: Inter
  • Hosting: Vercel / GitHub Pages

🌟 Community & Support

� License

This project is licensed under the MIT License - see LICENSE for details.

Made with ❤️ by the OpenPlayground Community

Building the future of web development, one project at a time.

⭐ Don't forget to star this repo if you found it helpful! ⭐