Awesome JavaScript Collection

Live Demos

• Netlify Demo (Recommended - Auto-updated)
• GitHub Pages Demo

Overview

A curated collection of interactive JavaScript projects and examples. This repository contains projects ranging from beginner to advanced level, all automatically organized and deployed.

Features

• Automatic Project Detection - Add projects and they're automatically included
• Responsive Design - Works perfectly on all devices
• Netlify Deployment Ready - One-click deployment to Netlify
• Modern UI - Clean interface with project search and filtering
• 56+ Interactive Projects - And growing

Content Structure

• All projects are stored in the Awesome-JavaScript-Example folder
• Each project must have an index.html file as the entry point
• Projects are automatically detected and added to the showcase

Deploy to Netlify

Method 1: One-Click Deploy

Method 2: Manual Deployment

1. Fork this repository
2. Connect to Netlify:
   • Go to netlify.com
   • Click "New site from Git"
   • Choose your forked repository
3. Build settings (auto-configured via netlify.toml):
   • Build command: npm run build
   • Publish directory: .
4. Deploy

Method 3: CLI Deployment

# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Deploy (from project root)
npm run deploy

How to Contribute

Adding a New Project

1. Fork this repository
2. Create your project folder in Awesome-JavaScript-Example/

   Awesome-JavaScript-Example/
   ├── Your-Project-Name/
   │   ├── index.html    # Required entry point
   │   ├── style.css     # Your styles
   │   ├── script.js     # Your JavaScript
   │   └── assets/       # Any additional assets
   

3. Ensure your project works - Test locally first
4. Commit and push your changes
5. Create a Pull Request

The system will automatically:

• Detect your new project
• Generate project metadata
• Create a placeholder image if none exists
• Add it to the showcase

Project Requirements

• Must have index.html as the main file
• Should be self-contained (all dependencies included)
• Should be responsive (mobile-friendly)
• Include a descriptive project name

Local Development

# Clone the repository
git clone https://github.com/Akash52/awesome-Javascript-collection.git
cd awesome-Javascript-collection

# Install dependencies
npm install

# Generate project data
npm run generate-data

# Start local server
npm start
# OR
npm run serve

Available Scripts

• npm run generate-data - Scan and generate project list
• npm run build - Build for production (Netlify)
• npm start - Start Node.js server
• npm run serve - Start Python server
• npm run deploy - Deploy to Netlify (requires CLI)

Contributing Guidelines

• Focus on Quality - Ensure your project is well-coded and documented
• Mobile-First - Test on different screen sizes
• Clean Code - Follow JavaScript best practices
• Documentation - Add comments to help others learn
• No External Dependencies - Keep projects self-contained when possible

Issues & Feedback

• Found bugs or errors?
• Something not rendering properly?
• Have ideas to make it better?
• Want to suggest new features?

Feel free to open an issue

Project Stats

• 56+ Projects and growing
• All Categories - Games, Apps, Animations, Tools
• 100% Responsive - Works on all devices
• Auto-Deploy - Netlify integration included

Featured Project Categories

• Games - Interactive games and puzzles
• Calculators - Various calculator types
• Animations - CSS & JavaScript animations
• Data Visualization - Charts and graphs
• Media Players - Audio/video players
• Weather Apps - API integration examples
• Productivity Tools - Todo lists, note apps
• Learning Projects - Educational examples

Show Your Support

All contributions and feedback are welcome! If you found this helpful:

1. Star this repository
2. Fork and contribute
3. Share with others
4. Create a PR

Together, let's build an amazing collection of JavaScript projects!

License

This project follows the MIT License.