https://akash52.github.io/awesome-Javascript-collection/
This repository contains vanilla JavaScript projects for beginners to intermediate programmers.
https://akash52.github.io/awesome-Javascript-collection/
ajax api awesome-javascript bootstrap4 css3 ecmascript6 frontend hacktoberfest html5 javascript jquery vanilla-javascript
Last synced: 5 months ago
JSON representation
This repository contains vanilla JavaScript projects for beginners to intermediate programmers.
- Host: GitHub
- URL: https://akash52.github.io/awesome-Javascript-collection/
- Owner: Akash52
- Created: 2020-10-07T08:55:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-07-20T08:18:45.000Z (5 months ago)
- Last Synced: 2025-07-20T10:16:40.769Z (5 months ago)
- Topics: ajax, api, awesome-javascript, bootstrap4, css3, ecmascript6, frontend, hacktoberfest, html5, javascript, jquery, vanilla-javascript
- Language: HTML
- Homepage: https://js-display-project.netlify.app/
- Size: 26.5 MB
- Stars: 8
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Awesome JavaScript Collection
[](https://app.netlify.com/sites/YOUR-SITE-NAME/deploys)
[](https://github.com/Akash52/awesome-Javascript-collection)
[](https://github.com/Akash52/awesome-Javascript-collection)
## Live Demos
- **[Netlify Demo](https://js-display-project.netlify.app/)** (Recommended - Auto-updated)
- **[GitHub Pages Demo](https://akash52.github.io/awesome-Javascript-collection/)**
## 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
[](https://app.netlify.com/start/deploy?repository=https://github.com/Akash52/awesome-Javascript-collection)
### Method 2: Manual Deployment
1. Fork this repository
2. Connect to Netlify:
- Go to [netlify.com](https://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
```bash
# 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
```bash
# 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](https://github.com/Akash52/awesome-Javascript-collection/issues)
## 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](/LICENSE).