JavaScript Projects Ideas

Project Details: This project features a beautiful retro-styled digital and analog clock display. It includes the current date and is a great way to learn about integrating dynamic time updates and styling with HTML, CSS, and JavaScript to create a visually appealing, functional clock.

Features:

• Analog and digital clock display
• Retro style design
• Shows current date

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A playful “Magic 8-Ball” application that provides dynamic answers to user questions. This project focuses on handling button clicks, implementing array manipulation to store responses, and updating text content on the screen, offering a fun introduction to interactive web elements.

Features:

• Visible 8-ball with changeable text
• Button-triggered responses
• Customizable answers from an array

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Unsplash (for images)
• Vecteezy (for images)
• Photoshop

Project Source Code: GitHub

Project Details: This project creates an interactive “Choose Your Own Adventure” text-based game. It demonstrates fundamental programming concepts like conditional logic, user input handling, and dynamic content rendering to create branching narratives, providing an engaging user experience.

Features:

• Interactive text-based story
• User choice-driven narrative
• Dynamic content updates

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A utility that generates random color palettes. This project teaches about color theory in web development, generating random values, and potentially state management for “locking” colors. It’s ideal for designers and developers needing quick color scheme ideas.

Features:

• Generates qualitative, sequential, and diverging color schemes
• Includes Paul Tol’s and ColorBrewer palettes
• Supports generating palettes of desired size

Key Tools & Libraries:

• JavaScript

Project Source Code: GitHub

Project Details: An application to test and improve typing speed. This project involves real-time input monitoring, text comparison, timer implementation, and calculation of metrics like Words Per Minute (WPM), Characters Per Minute (CPM), and accuracy. It offers two modes: time-based and infinity.

Features:

• Time and Infinity modes
• Displays WPM, CPM, and accuracy
• Mobile view support

Key Tools & Libraries:

• HTML
• CSS
• Vanilla JavaScript
• VS Code
• Netlify

Project Source Code: GitHub

Project Details: This project creates an interactive image gallery where clicking on an image card expands it, while others recede. It’s a great exercise in CSS transitions, Flexbox for layout, and JavaScript event listeners to create smooth, engaging UI interactions.

Features:

• Five image cards with background images and headings
• Expanding card on click
• Smooth CSS transitions

Key Tools & Libraries:

• HTML
• CSS (Flexbox)
• JavaScript

Project Source Code: GitHub

Project Details: A lightweight library that implements a custom cursor with a temporary trail effect. This project teaches about DOM manipulation, event handling for mouse movement, and dynamic styling to create visually appealing and interactive cursor animations.

Features:

• Customizable cursor border color and size
• Configurable trail color and duration
• Optional click animation

Key Tools & Libraries:

• JavaScript
• CSS

Project Source Code: GitHub

Project Details: This project demonstrates a parallax scrolling effect on a landing page, where background elements move at different speeds than foreground elements. It’s an excellent way to learn about creating depth and an immersive user experience using CSS and JavaScript for scrolling effects.

Features:

• Engaging parallax scrolling effect
• Interactive sections with unique parallax
• Responsive design across devices

Key Tools & Libraries:

• HTML5
• CSS3
• JavaScript

Project Source Code: GitHub

Project Details: A library for creating responsive and animated progress bars using SVG paths. This project demonstrates how to implement dynamic visual feedback for processes, forms, or steps, focusing on SVG manipulation and animation for sleek UI elements.

Features:

• Responsive progress bars
• Animated SVG paths
• Customizable animations

Key Tools & Libraries:

• JavaScript (ProgressBar.js library)
• SVG

Project Source Code: GitHub

Project Details: A web application that allows users to draw on an HTML canvas. This project teaches fundamental canvas API usage, handling mouse events for drawing, and implementing features like changing colors, erasing, and downloading the artwork.

Features:

• Change pen color
• Change background color
• Eraser pen
• Clear canvas
• Download artwork as image

Key Tools & Libraries:

• HTML (Canvas)
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A classic Tic-Tac-Toe game implemented for the browser. This project is ideal for learning game logic, state management, winning condition checks, and basic AI implementation, providing a complete interactive game experience.

Features:

• Playable Tic-Tac-Toe game
• AI opponent
• Win/draw condition detection

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A simple grid-based “Whac-A-Mole” game using vanilla JavaScript. This project focuses on timed events, random element appearance, user interaction handling, and score tracking, providing a fun and engaging game development introduction.

Features:

• Grid-based gameplay
• Mole appearance/disappearance
• Score tracking
• Timer

Key Tools & Libraries:

• HTML
• CSS
• Vanilla JavaScript

Project Source Code: GitHub

Project Details: A very minimal JavaScript platformer game where a character navigates platforms, collects items, and avoids obstacles. This project introduces game loop concepts, collision detection, physics simulation (like jumping), and sprite animation.

Features:

• Basic platform navigation
• Collectible items (gold)
• Avoidance of obstacles (monsters)
• Simple rectangular entities

Key Tools & Libraries:

• HTML (Canvas)
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A classic “Match the Pairs” memory game built with plain JavaScript. This project teaches about card shuffling, state management for flipped cards, matching logic, and delaying interactions for a smooth user experience.

Features:

• 12 pairs of cards
• Randomized card display
• Match detection and hiding
• Score tracking

Key Tools & Libraries:

• HTML
• CSS
• Plain JavaScript

Project Source Code: GitHub

Project Details: The classic Rock, Paper, Scissors game playable in the browser with score tracking. This project is excellent for learning about user input, conditional logic for game rules, random computer choices, and updating scores on the interface.

Features:

• Player vs. Computer gameplay
• Score tracking for multiple rounds
• Clear win/loss/draw conditions

Key Tools & Libraries:

• HTML
• CSS
• Bootstrap
• JavaScript

Project Source Code: GitHub

Project Details: A simple To-Do List web application that allows users to add, remove, and mark tasks as done. A key feature is the use of local storage to persist tasks, ensuring they remain even after the browser is closed or refreshed.

Features:

• Add new tasks
• Remove tasks
• Mark tasks as complete
• Tasks saved locally using localStorage API

Key Tools & Libraries:

• HTML
• CSS
• JavaScript (localStorage API)

Project Source Code: GitHub

Project Details: A simple calculator built with HTML, CSS, and JavaScript, offering basic arithmetic operations. It supports both mouse/touchscreen input and keyboard controls. Features include decimal point input, backspace functionality, and continuous calculation based on the last operation.

Features:

• Basic arithmetic operations
• Mouse/touchscreen and keyboard controls
• Decimal point (comma/dot) input
• Backspace functionality
• Recalculates on repeated equals key press
• Displays last operation above input

Key Tools & Libraries:

• HTML
• CSS
• Vanilla JavaScript

Project Source Code: GitHub

Project Details: An application designed to convert between various units of measurement. It currently supports length, weight, speed, temperature, and digital storage. This project is useful for understanding numerical conversions and user interface design for practical tools.

Features:

• Converts length, weight, speed, temperature, and digital storage
• User-friendly interface

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A simple web application that displays a random inspirational quote and its author upon a button click. It ensures no consecutive duplicate quotes and offers a “Share on Twitter” functionality. This project is great for practicing DOM manipulation and API integration.

Features:

• Displays random quotes
• Shows author name
• Prevents consecutive duplicate quotes
• “New Quote” button
• “Share on Twitter” button

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A web-based password generator that allows users to create strong, customizable passwords. Users can specify password length (8-128 characters) and include uppercase, lowercase, numbers, or symbols. This project demonstrates handling user prompts, input validation, and character set generation.

Features:

• Customizable password length (8-128 characters)
• Options for uppercase, lowercase, numbers, and symbols
• User prompts for preferences

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A web application providing real-time weather updates for any location. It uses the OpenWeatherMap API to fetch current weather and a 5-day forecast, including an “Explore” section for random cities and an option to add more cities.

Features:

• Real-time weather data
• 5-day forecast
• “Explore” section with random city weather
• Option to add custom cities

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• OpenWeatherMap API
• Font Awesome

Project Source Code: GitHub

Project Details: A web application that allows users to search and view GitHub profiles using the GitHub API. It caches requests in session storage to optimize API usage. This project is a practical example of fetching and displaying data from external APIs.

Features:

• Search GitHub users
• View GitHub profiles
• Caches API requests in session storage

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• GitHub API

Project Source Code: GitHub

Project Details: A basic JavaScript image carousel without external library dependencies. It supports lazy image loading, multiple image sources for different device sizes, and touch gestures. This project is great for understanding fundamental web animations and responsive image handling.

Features:

• No library dependencies
• Lazy image loading
• Responsive image sources
• Touch swipe support
• Auto-rotation with delay

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A web application that functions as a countdown timer, allowing users to set a future date and time. It then dynamically displays the remaining time in days, hours, minutes, and seconds. This project is good for learning about date manipulation and real-time updates.

Features:

• Set a specific future date and time
• Displays remaining time in days, hours, minutes, and seconds
• Real-time countdown updates

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A web-based sticky notes application enabling users to create, organize, edit, and delete virtual notes. Notes are draggable, customizable with a color picker, and persistent across sessions via local storage. This project covers DOM manipulation, event handling, and data persistence.

Features:

• Create, edit, and delete sticky notes
• Customizable note colors
• Drag-and-drop functionality
• Saves notes locally

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A creative web project where a pair of eyes dynamically follow the mouse cursor’s movement. This demonstrates using JavaScript to manipulate CSS styles in real-time, providing an engaging visual effect.

Features:

• Eyes follow mouse cursor
• Real-time style updates
• Basic animation

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A web project implementing a light/dark theme toggle, demonstrating how to switch between positive and negative contrast polarity. It utilizes JavaScript and CSS to manage themes, including leveraging prefers-color-scheme and local storage for user preferences.

Features:

• Light and dark theme toggle
• Persists theme choice using localStorage
• Respects prefers-color-scheme system setting

Key Tools & Libraries:

• HTML5
• CSS3 (prefers-color-scheme)
• JavaScript (ES6+, localStorage)

Project Source Code: GitHub

Project Details: A JavaScript tool that procedurally generates smooth, organically shaped SVG blobs using cubic Bezier curves from a polar graph. Parameters are customizable, allowing for unique designs. Useful for background elements and generative art.

Features:

• Generates randomly shaped smooth SVG blobs
• Utilizes cubic Bezier curves
• Customizable parameters for shape variation

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• SVG

Project Source Code: GitHub

Project Details: A JavaScript plugin for playing sounds on user actions and page events, leveraging the Web Audio API for modern browsers and falling back to HTML5 audio for older ones. It offers control over loading, playing, and removing audio files, including audio-sprite support.

Features:

• Plays sounds on user actions/events
• Uses Web Audio API with HTML5 audio fallback
• Audio-sprite support
• Volume control and looping options

Key Tools & Libraries:

• HTML
• JavaScript (ion.sound library, Web Audio API)

Project Source Code: GitHub

Project Details: A lightweight JavaScript library for creating interactive particle effects. It allows for customizable particle configurations, making it suitable for dynamic backgrounds or engaging visual elements triggered by user interaction (e.g., click/hover).

Features:

• Lightweight particle generation
• Customizable particle configurations
• Interactive effects

Key Tools & Libraries:

• HTML
• CSS
• JavaScript (particles.js library)

Project Source Code: GitHub

Project Details: This web application allows users to find recipes by utilizing the MealDB API. It focuses on an intuitive interface where users can search for recipes and potentially filter them based on available ingredients. This project is excellent for understanding API integration, data parsing, and dynamic content rendering.

Features:

• Searches for recipes using the MealDB API
• Displays recipe information
• Potential for ingredient-based filtering

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• MealDB API

Project Source Code: GitHub

Project Details: A flexible JavaScript quiz application capable of handling a customizable number of questions and answers via a JSON file. It tracks the user’s score dynamically, making it reusable for various quiz types. This project is valuable for learning about dynamic content generation, state management, and user feedback.

Features:

• Customizable quiz content via JSON
• Dynamic question and answer display
• Score tracking
• Simple user interface

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• JSON for quiz data

Project Source Code: GitHub

Project Details: An expense tracker app built with HTML, CSS, and JavaScript, featuring local storage integration for seamless user experience. Users can add expenses with custom tags, set and edit budgets, view expense history, and visualize spending habits with a pie chart. It also includes editing, deleting, and sorting functionalities for expenses.

Features:

• Expense addition with customizable tags
• Budget input and editing
• Local storage integration for persistence
• Expense history display with sorting
• Edit and delete expense items
• Budget calculation and pie chart visualization
• Responsive design

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Chart.js (for visualization)
• Local Storage API

Project Source Code: GitHub

Project Details: A browser-based Markdown previewer that allows users to write Markdown text and see the rendered HTML in real-time. This project highlights the use of a Markdown parsing library and dynamic content updates, making it a great learning experience for text processing in web applications.

Features:

• Real-time Markdown to HTML conversion
• Supports standard Markdown syntax
• Displays rendered output

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• marked.js (Markdown parser library)

Project Source Code: GitHub

Project Details: A full-featured image editor built using HTML5 Canvas, providing powerful filters and photo manipulation capabilities. It includes features like cropping, flipping, rotation, drawing, shapes, icons, text, and various image filters. This project is excellent for delving into canvas manipulation and complex UI development.

Features:

• Crop, flip, rotate images
• Drawing, shapes, icons, text tools
• Mask and image filters (grayscale, invert, sepia, blur, sharpen, etc.)
• Undo/redo functionality
• Customizable themes
• Cross-browser support (IE10+)

Key Tools & Libraries:

• HTML5 Canvas
• JavaScript (fabric.js, tui.code-snippet, tui.color-picker)

Project Source Code: GitHub

Project Details: An engaging and educational country guessing game built with React (via Vite) and powered by the REST Countries API. Players guess countries and receive hints, along with visual feedback on their guesses. This project demonstrates API integration with a modern JavaScript framework and interactive game design.

Features:

• Country guessing gameplay
• Interactive hints (flag, region info)
• Visual feedback for correct/incorrect guesses
• Leverages REST Countries API

Key Tools & Libraries:

• React
• Vite
• REST Countries API

Project Source Code: GitHub

Project Details: A custom video player built with HTML, CSS, and JavaScript, offering a sleek, user-friendly interface. It includes essential controls such as play/pause, volume, progress bar, playback speed, picture-in-picture, and full-screen view. This project is ideal for understanding browser media APIs and custom control implementation.

Features:

• Play/pause control
• Volume control and slider
• Video progress bar
• Playback speed adjustment
• Picture-in-picture mode
• Full-screen view

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: This project implements native drag-and-drop functionality in vanilla JavaScript to create a Kanban-style board. It demonstrates how to handle drag events, update the DOM, and manage the state of draggable elements efficiently. This is a practical example for learning about complex user interactions.

Features:

• Native drag-and-drop for board items
• Dynamic updating of elements
• Handles dragstart and dragend events

Key Tools & Libraries:

• HTML
• CSS
• Vanilla JavaScript (Drag and Drop API)

Project Source Code: GitHub

Project Details: A “scroll spy” navigation implemented using JavaScript and the Intersection Observer API. This feature automatically updates navigation links based on the user’s scroll position on the page, providing a smooth and intuitive browsing experience. It’s a great project for learning about modern browser APIs and dynamic navigation.

Features:

• Automatically updates navigation links based on scroll position
• Uses Intersection Observer API for efficient tracking
• Smooth scrolling animation

Key Tools & Libraries:

• HTML
• CSS
• JavaScript (Intersection Observer API)

Project Source Code: GitHub

Project Details: A classic Snake game implemented using HTML, CSS, and JavaScript. Players control a snake to eat apples, growing longer and moving faster with each apple consumed, while avoiding collisions with walls or its own body. This project is excellent for understanding game logic, canvas drawing, and keyboard event handling.

Features:

• Classic Snake gameplay
• Controls via arrow keys
• Score tracking (implicitly by snake length)
• Collision detection with walls and self

Key Tools & Libraries:

• HTML (Canvas)
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A simple web application that utilizes the Web Speech API to implement speech recognition for taking notes. Users can speak, and the application will convert their speech into text. This project is ideal for exploring browser-native APIs and integrating voice input into web applications.

Features:

• Speech-to-text conversion
• Utilizes the Web Speech API
• Simple note-taking functionality

Key Tools & Libraries:

• HTML
• CSS
• JavaScript (Web Speech API)

Project Source Code: GitHub

Project Details: A real-time text input counter that displays the number of characters, words, and potentially sentences as the user types. This project is valuable for understanding event handling, string manipulation, and dynamic UI updates in web forms.

Features:

• Real-time character count
• Real-time word count
• Dynamically updates as user types
• Ability to add input as a list item

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• React

Project Source Code: GitHub

Project Details: A web application for converting currencies using real-time exchange rates. It leverages the Fetch API to retrieve up-to-date rates and provides a clean, user-friendly interface for selecting base and target currencies. This project is ideal for learning about external API integration and dynamic data display.

Features:

• Real-time exchange rates
• User-friendly interface
• Custom currency selection
• Interactive UI with flags
• Fast and lightweight

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Fetch API

Project Source Code: GitHub

Project Details: A lightweight, object-oriented JavaScript solution for creating custom right-click context menus on a website. It allows developers to define menu items with associated functions, providing a tailored user experience beyond standard browser context menus. This project is good for understanding event handling and dynamic DOM manipulation.

Features:

• Customizable right-click context menus
• Add text items with functions
• Add separators
• Block default context menus for specific elements

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A JavaScript library that enables reorderable drag-and-drop lists, serving as a foundation for interactive data tables. It supports touch devices and modern browsers, offers animations, multi-drag, and robust API for sorting and managing list items. This project demonstrates advanced UI interactions and data manipulation.

Features:

• Reorderable drag-and-drop lists
• Supports touch devices and modern browsers (including IE9)
• CSS animations
• Multi-drag support
• Sortable within the same list or between lists
• Customizable options for behavior and appearance

Key Tools & Libraries:

• HTML
• CSS
• JavaScript (Sortable.js library)

Project Source Code: GitHub

Project Details: This web application allows users to discover nearby businesses and points of interest using Google Maps Platform APIs. It geolocates the user, displays interactive maps, searches for places, and provides detailed information including photos. It’s an excellent project for learning about location services, API integration, and map customization.

Features:

• User geolocation
• Customizable map display
• Nearby place search
• Displays place details and photos

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Google Maps JavaScript API
• Google Places API

Project Source Code: GitHub

Project Details: A minimalist web application designed to create, publish, and manage dynamic forms with drag-and-drop functionality. While currently a work-in-progress with in-memory data persistence, it showcases concepts of form generation, field manipulation, and basic validation. This project is great for understanding dynamic UI creation and data handling.

Features:

• Drag-and-drop form building
• Form publishing and viewing
• Basic HTML form validation
• Responsive design

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Node.js (for backend/in-memory database NeDB)
• jQuery FormBuilder

Project Source Code: GitHub

Project Details: This project focuses on a text-to-speech (TTS) and speech-to-text (STT) SDK for building voice-controlled applications. It demonstrates how to convert text into synthetic speech and capture voice transcripts, enabling hands-free user interfaces. This is a valuable resource for integrating voice commands and outputs into web applications.

Features:

• Text-to-speech synthesis
• Speech-to-text recognition
• Supports Promises and Async/Await
• Voice selection options

Key Tools & Libraries:

• HTML
• JavaScript (Spoken SDK, Web Speech API)

Project Source Code: GitHub

Project Details: A comprehensive to-do list application that helps users organize tasks with features like priority levels, due dates, and project management. It includes filtering, sorting, search functionality, and dark/light theme toggling. This project is excellent for learning about complex state management, data persistence (implied), and responsive UI design.

Features:

• Task and project management
• Priority levels (high, medium, low) and due dates
• Note management
• Dark/light theme toggle
• Search and filtering options
• Responsive design

Key Tools & Libraries:

• HTML5
• CSS3
• JavaScript
• Webpack
• npm

Project Source Code: GitHub

Project Details: This repository provides official samples for building various Chrome Extensions. It covers a wide range of functionalities, from single-API focused extensions to full-featured ones. This is an essential resource for anyone looking to understand the architecture and development process of browser extensions.

Features:

• Demonstrates various Chrome Extension APIs
• Provides functional examples
• Teaches fundamental extension development concepts

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Chrome Extension APIs

Project Source Code: GitHub

Project Details: A lightweight and flexible JavaScript solution for lazy loading images, animated SVGs, videos, and iframes. It defers content loading until elements enter the viewport, leveraging the IntersectionObserver API to improve web application speed and optimize for slower connections.

Features:

• Defers loading of off-screen images, videos, and iframes
• Utilizes the IntersectionObserver API
• Supports responsive images
• Improves page load performance

Key Tools & Libraries:

• HTML
• JavaScript (IntersectionObserver API)

Project Source Code: GitHub

Project Details: This project showcases a collection of examples for creating various client-side data visualizations using the Chart.js library. It demonstrates how to integrate Chart.js with HTML and JavaScript to render interactive charts like bar graphs, line charts, pie charts, and more. This is a great resource for learning data presentation on the web.

Features:

• Demonstrates various chart types
• Uses Chart.js for data visualization
• Interactive and customizable charts

Key Tools & Libraries:

• HTML
• JavaScript
• Chart.js library

Project Source Code: GitHub

Project Details: A very simple vanilla JavaScript library for creating a custom scrollbar that is cross-browser and cross-device compatible. It’s extremely lightweight and uses native scroll events for smooth performance. This project is useful for learning about UI customization and optimizing user experience.

Features:

• Lightweight custom scrollbar
• Cross-browser and cross-device compatible
• Uses native scroll events for performance
• RTL (Right-to-Left) support

Key Tools & Libraries:

• HTML
• CSS
• Vanilla JavaScript

Project Source Code: GitHub

Project Details: A responsive multi-step form with a dynamic progress indicator, adaptable to any number of steps. It handles basic HTML validation and provides a clear visual progression for users completing multi-page forms. This project is useful for understanding form structure, validation, and user flow management.

Features:

• Responsive multi-step form
• Dynamic progress indicator
• Adaptable to any number of steps
• Basic HTML validation

Key Tools & Libraries:

• HTML
• CSS
• JavaScript

Project Source Code: GitHub

Project Details: A random meal generator application that fetches meal data, including recipes, images, origin, videos, and categories, from an external API. It provides a simple interface to get random meal suggestions, potentially with filtering options based on criteria like category or area. This project is good for learning API integration and dynamic content display.

Features:

• Fetches random meal data from an API
• Displays meal image, category, origin, tags, ingredients, and instructions
• Includes video recipe (if available)

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• TheMealDB API

Project Source Code: GitHub

Project Details: This is a lightweight Node.js-based real-time collaborative whiteboard that can be easily customized. It supports multiple users drawing simultaneously, with features like remote cursor display, undo/redo, image/PDF drag-and-drop, text, sticky notes, and keyboard shortcuts. It’s an excellent project for understanding WebSockets, real-time synchronization, and rich interactive web applications.

Features:

• Real-time multi-user collaboration
• Undo/Redo functionality
• Image, PDF, and text support
• Extensive keyboard shortcuts
• REST API for control
• Docker support for easy deployment

Key Tools & Libraries:

• Node.js
• WebSockets
• HTML Canvas

Project Source Code: GitHub

Project Details: This web application allows users to interactively view and customize 3D objects directly in their browser. Built with Three.js, React, and Tailwind CSS, it offers real-time updates and visual feedback for customization changes. This project is ideal for those looking to delve into 3D rendering, interactive web graphics, and modern frontend frameworks.

Features:

• Interactive 3D object display
• Real-time customization and visual feedback
• Component-based architecture with React
• Responsive and modern design with Tailwind CSS

Key Tools & Libraries:

• Three.js
• React
• Tailwind CSS
• Vite (build tool)

Project Source Code: GitHub

Project Details: This project demonstrates how to build a Progressive Web App (PWA) using only HTML, CSS, and pure JavaScript, focusing on offline capabilities and background synchronization. It highlights best practices for performance, native API utilization (Service Workers, IndexedDB), and handling data persistence and syncing in offline scenarios. This is a comprehensive example for building robust offline-first web applications.

Features:

• Pure JavaScript PWA implementation
• Offline capabilities with Service Workers
• Background data synchronization
• IndexedDB for local data storage
• Emphasis on performance and native APIs

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Service Workers
• IndexedDB
• Workbox (for Service Worker tooling)

Project Source Code: GitHub

Project Details: This project provides a simple demonstration of deploying a pre-trained MobileNet machine learning model directly in a web browser using TensorFlow.js. It classifies images client-side, returning class names and probabilities without needing a backend server for inference. This is an excellent starting point for exploring in-browser ML and leveraging pre-trained models for image recognition.

Features:

• Client-side image classification
• Uses pre-trained MobileNet model
• Real-time predictions in the browser
• Pure JavaScript implementation

Key Tools & Libraries:

• HTML
• JavaScript
• TensorFlow.js library
• MobileNet (pre-trained model)

Project Source Code: GitHub

Project Details: This Node.js module provides a suite of utilities for building customizable command-line interface (CLI) applications. It features automatic parsing of arguments, user prompting, robust logging, file operations, and graphical elements like info boxes and progress bars. This project is indispensable for developers creating powerful and user-friendly CLI tools.

Features:

• Automatic command-line argument parsing
• User prompting for input
• Graphical info boxes and progress bars
• Robust logging to file
• File loading and saving utilities
• TTY detection and width reporting

Key Tools & Libraries:

• Node.js
• pixl-cli (custom CLI module)
• pixl-args (for argument parsing)
• pixl-tools (utility functions)

Project Source Code: GitHub

Project Details: This is a WebRTC-based video chat application, providing real-time peer-to-peer video communication directly in the browser. The frontend is built with pure HTML, CSS, and JavaScript, while the backend uses Node.js for signaling. This project is ideal for understanding the fundamentals of WebRTC, real-time communication protocols, and building interactive media applications.

Features:

• Real-time video communication
• Peer-to-peer connection setup
• Mute and hide camera controls
• Room-leaving functionality

Key Tools & Libraries:

• HTML
• CSS
• JavaScript
• Node.js
• WebRTC API

Project Source Code: GitHub

Project Details: This project showcases a serverless CRUD (Create, Read, Update, Delete) API built with AWS Lambda, Node.js, and the Serverless Framework. It demonstrates how to create scalable and cost-effective backend solutions in a serverless architecture, emphasizing secure IAM roles per function. This is an excellent resource for learning about serverless development, AWS services, and API deployment.

Features:

• Serverless CRUD API functionality
• Utilizes AWS Lambda and Node.js
• Deploys with Serverless Framework
• Enhanced security with IAM roles per function

Key Tools & Libraries:

• AWS Lambda
• Node.js
• AWS SDK
• Serverless Framework

Project Source Code: GitHub

Project Details: This is a decentralized web chat application leveraging WebRTC (via PeerJS) for direct peer-to-peer communication, bypassing central servers for message routing. It uses localForage for local message storage, aiming for a more private and resilient chat experience. This project provides deep insights into decentralized architectures, real-time communication without a central server, and browser storage.

Features:

• Peer-to-peer chat (decentralized)
• WebRTC-enabled browser support
• Local message storage
• Uses PeerJS for WebRTC abstraction

Key Tools & Libraries:

• HTML
• CSS (Bootstrap)
• JavaScript (jQuery, PeerJS, localForage)
• WebRTC API

Project Source Code: GitHub

Project Details: This project is a UI component library containing highly customizable React components, built with Storybook for isolated development and Rollup for efficient bundling. It includes versatile components like buttons, inputs, search bars, and text areas, emphasizing reusability and controlled component patterns. This is invaluable for learning advanced React, design systems, and component development best practices.

Features:

• Collection of reusable React UI components
• Highly customizable styles and behaviors
• Isolated component development with Storybook
• Efficient bundling with Rollup
• Utilizes Material UI (MUI) and React Select

Key Tools & Libraries:

• React
• Storybook
• Rollup
• Material UI (MUI)
• React Select

Project Source Code: GitHub

Project Details: This Node.js module, node-summarizer, provides AI-powered text summarization using both frequency-based and TextRank algorithms. It can condense text into a specified number of sentences and also offers sentiment analysis and reduction percentage metrics. This project is ideal for exploring natural language processing (NLP), text mining, and integrating AI capabilities into Node.js applications.

Features:

• Text summarization (frequency and TextRank algorithms)
• Customizable summary length
• Sentiment analysis
• Provides reduction percentage and other text insights

Key Tools & Libraries:

• Node.js
• natural (for NLP tasks)
• wordpos (for part-of-speech tagging)

Project Source Code: GitHub

Project Details: This project is a dynamic dashboard builder allowing users to create custom dashboards with drag-and-drop widgets. It integrates with keen.io for data analysis and visualization, providing a flexible framework for building interactive data display interfaces. This is an excellent resource for learning about dynamic UI construction, widget management, and integration with analytics platforms.

Features:

• Drag-and-drop dashboard creation
• Integrates with keen.io for analytics
• Supports customizable widgets
• Available as an npm package

Key Tools & Libraries:

• JavaScript
• keen.io (for data analysis)
• npm/yarn

Project Source Code: GitHub

Project Details: This project features artyom.js, a robust JavaScript wrapper for the webkitSpeechRecognition and speechSynthesis APIs, enabling voice-controlled browser navigation and interaction. It allows adding dynamic voice commands, smart commands with wildcards, and text-to-speech capabilities, making web applications hands-free and more accessible.

Features:

• Voice command recognition
• Speech synthesis (text-to-speech)
• Smart commands with wildcards and regex
• Dictation mode (voice to text)
• Cross-browser and mobile device compatibility

Key Tools & Libraries:

• HTML
• JavaScript (artyom.js)
• Web Speech API (webkitSpeechRecognition, speechSynthesis)

Project Source Code: GitHub

Project Details: “Wasm By Example” is a website providing simple, hands-on examples for integrating WebAssembly (Wasm) into web applications. Heavily inspired by “Go By Example,” it serves as a tutorial for learning Wasm by doing, with code snippets in various programming languages and explanations in multiple human languages. This is an excellent resource for anyone looking to understand and implement WebAssembly.

Features:

• Beginner-friendly Wasm examples
• Code snippets in various programming languages
• Multi-language explanations
• Community-driven contributions model
• Focus on practical application

Key Tools & Libraries:

• Node.js
• Git
• WebAssembly

Project Source Code: GitHub

Project Details: This is a monorepo containing packages for building OAuth2 and JWT-based authentication systems in Node.js, particularly for Express.js applications. It includes modules for handling Bearer tokens, verifying JWTs, and providing authentication middleware. Developed by Auth0, it’s a robust solution for securing APIs and web applications with industry-standard authentication protocols.

Features:

• Handles OAuth2 Bearer token extraction and error handling
• Verifies and decodes JWT Access Tokens
• Express.js authentication middleware
• Adheres to RFC6750 and draft-ietf-oauth-access-token-jwt-12

Key Tools & Libraries:

• Node.js
• Express.js
• OAuth2
• JWT (JSON Web Tokens)

Project Source Code: GitHub

Project Details: This Hyperledger Blockchain Explorer is an open-source utility designed to browse activity on underlying blockchain networks, specifically Hyperledger Fabric. It offers a simple, powerful, and easy-to-use interface to monitor blocks, transactions, chaincodes, and network health. It’s an essential tool for developers and administrators working with Hyperledger Fabric deployments.

Features:

• Browse blockchain activity (blocks, transactions)
• Monitor chaincodes and network health
• Supports Hyperledger Fabric
• Quick start with Docker or direct codebase setup
• Customizable configuration for various networks

Key Tools & Libraries:

• Node.js
• PostgreSQL
• Docker, Docker Compose (for quick start)
• Hyperledger Fabric

Project Source Code: GitHub

Project Details: This project is a sample smart home web application interface featuring a mock UI and interactive controls for smart devices. Built with React, TypeScript, and Tailwind CSS, it allows users to view device states, access detailed device information via draggable dialogs, and demonstrates modern frontend development patterns like Compound Components.

Features:

• Interactive smart device control (on/off, status)
• Draggable dialog windows for dynamic interaction
• Clean and modern UI with Tailwind CSS
• Built with React and TypeScript
• Utilizes interact.js for drag functionality

Key Tools & Libraries:

• React
• TypeScript
• Tailwind CSS
• interact.js (for dragging)
• Node.js (for backend API)

Project Source Code: GitHub

Project Details: This project explores building custom data visualizations in JavaScript without relying heavily on existing libraries. It covers techniques for graphing various data sources like Bitcoin prices and State of JS data, focusing on vanilla JS for direct DOM manipulation. It also discusses integrating custom visualizations with front-end frameworks.

Features:

• Vanilla JS for custom visualizations
• Handles diverse data sources (e.g., historical prices, survey data)
• Explores integration with frameworks like Angular, React, Vue.js

Key Tools & Libraries:

• JavaScript
• HTML5 Canvas / SVG (implied)

Project Source Code: GitHub

Project Details: This project demonstrates building a retro space game using WebAssembly, focusing on deploying C/C++ applications to the web. It covers game development concepts such as sprites, animation, AI, physics, and shaders, showcasing how WebAssembly enables near-native performance for web applications.

Features:

• Near-native performance for web games
• C/C++ game logic compiled to WebAssembly
• Integration with HTML5 Canvas and WebGL

Key Tools & Libraries:

• WebAssembly
• C/C++
• Emscripten
• HTML5 Canvas, WebGL, SDL

Project Source Code: GitHub

Project Details: This project details implementing a Node.js API Gateway within a microservices architecture, utilizing a Service Registry with a server-side discovery pattern. It provides a complete architecture example with four microservices accessible via the API Gateway, focusing on routing, service discovery, and configuration.

Features:

• API Gateway for microservices
• Service Registry with server-side discovery
• Clustered Node.js services
• Configurable routing and headers

Key Tools & Libraries:

• Node.js
• Express.js (implied)
• MongoDB (for Service Registry)

Project Source Code: GitHub

Project Details: A simple Azure DevOps dashboard providing real-time pipeline status and history. It fetches build data using Azure DevOps API and visualizes it with Apache ECharts. The dashboard is configured via URL parameters, allowing for easy monitoring of CI/CD pipelines.

Features:

• Real-time Azure DevOps pipeline status
• Historical pipeline data visualization
• Configurable with PAT, organization, project, and pipeline IDs
• Automatic data refresh

Key Tools & Libraries:

• Apache ECharts
• Azure DevOps API
• JavaScript

Project Source Code: GitHub

Project Details: treehugger.js is a JavaScript library for program processing, specifically for representing and manipulating HTML Abstract Syntax Trees (ASTs). It offers generic AST representation, traversal mechanisms for querying and transforming ASTs, and language-specific analyses, particularly for JavaScript.

Features:

• Generic AST representation (ATerms inspired)
• Query and manipulate ASTs (collectTopDown, traverseTopDown)
• JavaScript parser and type analysis

Key Tools & Libraries:

• JavaScript
• UglifyJS (for JS parsing)
• Require.js

Project Source Code: GitHub

Project Details: This project creates a real-time stock market data dashboard utilizing the stocksocket Node.js module. It establishes a direct WebSocket connection with Yahoo Finance to receive lightweight, fast, and reliable market data for various stock tickers and cryptocurrencies.

Features:

• Real-time stock price updates
• Supports multiple stock tickers and cryptocurrencies
• Lightweight WebSocket connection
• Sample output for different market hours

Key Tools & Libraries:

• Node.js
• StockSocket (npm module)
• WebSockets

Project Source Code: GitHub

Project Details: Netron is a viewer for neural network, deep learning, and machine learning models. It supports a wide range of popular formats including ONNX, TensorFlow Lite, Keras, and PyTorch, allowing users to visualize and inspect the architecture of their AI models.

Features:

• Visualize neural network models
• Supports multiple model formats (ONNX, TFLite, Keras, etc.)
• Cross-platform availability (macOS, Linux, Windows, Browser)

Key Tools & Libraries:

• JavaScript (for browser version)
• Python (for pip package)
• Various ML/DL frameworks’ model formats

Project Source Code: GitHub

Project Details: This project features the Monaco Editor, the powerful code editor used in VS Code, adapted for web browsers. It provides a fully-featured coding experience with syntax highlighting, IntelliSense, and other advanced editing capabilities, making it ideal for integrating robust code editing into web applications.

Features:

• Full-featured code editor from VS Code
• Syntax highlighting and IntelliSense
• Supports various programming languages
• Interactive playground for demonstrations

Key Tools & Libraries:

• Monaco Editor
• JavaScript
• TypeScript (implied)

Project Source Code: GitHub

Project Details: A simple web application built with Express.js that enables users to upload images and perform recognition using a pre-trained MobileNet model from TensorFlow.js. The app displays the most likely classification of the uploaded image, demonstrating practical machine learning integration in a web environment.

Features:

• Image upload and display
• Image recognition using MobileNet
• Displays image classification
• Can be used as an API endpoint

Key Tools & Libraries:

• Express.js
• TensorFlow.js (MobileNet)
• HTML/CSS/JavaScript
• EJS

Project Source Code: GitHub