Skip to content

akshitmalia/MERN-Stack-Minor-Projects

Repository files navigation

🛠️ JavaScript Mini Projects

A collection of mini JavaScript projects built using HTML, CSS, and Vanilla JS — covering API integration, DOM manipulation, event listeners, Canvas API, Web Speech API and async/await concepts through practical real-world projects.


📁 Projects

Project Description Live Demo
🎨 Canvas Drawing App Freehand drawing with custom brush size, color, clear and PNG export using HTML5 Canvas API Live
🐶 Dog Image Generator Random dog images fetched using Dog CEO API with breed filtering Live
📊 GitHub Analytics Dashboard Search GitHub users and explore repositories, commits and contributors via GitHub REST API Live
✅ Habit Tracker Track daily habits with streak counting and localStorage persistence Live
😂 Joke Generator Fetch random jokes via API and read them aloud using Web Speech Synthesis API Live
🖱️ Mouse Movement Tracker Real-time mouse position and movement visualization on screen Live
🎬 Movie Finder Search movies and view details using OMDB API with dynamic rendering Live
📝 Note Maker Create, save and delete notes with localStorage persistence Live
🧠 Quiz App Interactive quiz with score tracking, timer and result display Live
👤 Random User Generator Generate random user profiles with details fetched from Random User API Live

🛠️ Tech Stack

  • HTML5
  • CSS3 + Bootstrap 5
  • JavaScript (Vanilla JS)
  • REST APIs
  • LocalStorage
  • HTML5 Canvas API
  • Web Speech API

💡 Concepts Covered

  • API Integration using fetch and axios
  • Async/Await and Promise handling
  • DOM Manipulation and dynamic rendering
  • Event Listeners (mousedown, mousemove, click, keyup)
  • LocalStorage for data persistence
  • Canvas API for drawing applications
  • Web Speech API for text-to-speech
  • Debouncing for optimized API calls
  • Responsive design with Bootstrap

⚙️ Setup

Each project is self-contained. To run any project locally:

git clone https://github.com/akshitmalia/MERN-Stack-Minor-Projects.git
cd MERN-Stack-Minor-Projects

Navigate to any project folder and open index.html in your browser.

Each project folder contains its own README.md with detailed setup instructions, features, concepts used and screenshots.


👨‍💻 Author

Akshit Malia


📄 License

This project is open-source and available under the MIT License.

About

A collection of mini JavaScript projects covering API integration, DOM manipulation, event listeners, Canvas API and async/await — includes Movie Finder, Dog Image Generator, Habit Tracker, Quiz App, Note Maker, Random User Generator, Joke Generator and more.

Topics

Resources

License

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors