Welcome to my portfolio-grade frontend showcase! This repository is designed to demonstrate advanced frontend engineering practices, clean code, accessibility compliance, and visual design craftsmanship for software engineering and AI developer internships.
Rather than simple practice scripts, this repo contains 21 high-fidelity applications mapped across games, utilities, APIs, and storytelling layout paradigms.
This repository includes a interactive landing page dashboard. When hosted (e.g. via GitHub Pages), recruiters can search, filter, and open any of the 21 projects directly from one interface:
- Live Dashboard URL:
https://your-username.github.io/Mini-Projects/ - Local Landing Page: index.html
- Modern JavaScript & TS: Async REST API pipelines, standard mathematical WPM/entropy formulas, local caching modules, and unbeatable Minimax game trees.
- Responsive Layout Design: Mobile-first grid layouts, viewport queries, neomorphism/glassmorphism styling, and custom theme switches.
- Graphic Canvas Renderers: Real-time canvas line chart vectors, transparent background overlay fills, and frame-rate particle confetti animations.
- Browser Feature Sets: Service Worker offline caching, native Geolocation coordinates mapping, and haptic vibrations.
- Web Accessibility (a11y): Proper contrast checking, ARIA-hidden overlays, explicit keyboard tab indices, and state triggers.
| # | Project Name | Visual Artwork | Tech Stack & APIs | Core Skills Demonstrated | Live Link / Directory |
|---|---|---|---|---|---|
| 1 | Note App |  |
React, TypeScript, Vite, LocalStorage | State management, Pinning, Drag & Drop notes reordering | note-app |
| 2 | QR Code Reader |  |
Vanilla JS, PWA (sw.js), Camera stream API | Real-time scanner frame overlay, offline PWA setup | qr-code-reader |
| 3 | Rock Paper Scissors |  |
Vanilla JS, Canvas particles, Web Audio API | HTML5 Canvas confetti generator, state audits, sound switches | rock-paper-scissors |
| 4 | Stopwatch App |  |
Vanilla JS, requestAnimationFrame, Space Grotesk | 10ms high-precision timers, fastest/slowest lap overlays | stopwatch-app |
| 5 | Weather App |  |
Vanilla JS, OpenWeather API, Geolocations | Dynamic weather-gradient backgrounds, input key bindings | weather-app |
| 6 | Scientific Calculator |  |
Vanilla JS, math evaluation strings, PWA | Form formula displays, slide-out transaction ledgers | calculator-web |
| 7 | Quiz App |  |
Vanilla JS, timer countdowns, LocalStorage | Form wizard sliders, question review panels, custom modal dialogs | quiz-app |
| 8 | Password Generator |  |
Vanilla JS, window.crypto API, Entropy Math | Strong cryptographic numbers, strength ratings gauges | password-generator |
| 9 | Tic-Tac-Toe |  |
Vanilla JS, Minimax AI, Canvas Confetti | Unbeatable AI minimax trees, grid glow victories | tic-tac-toe |
| 10 | Link Shortener |  |
Vanilla JS, REST API, QR Server API | REST API connections, local URL fallbacks, QR generation | link-shortener |
| 11 | Meme Generator |  |
Vanilla JS, HTML5 Canvas 2D, Imgflip API | Drawing stroke overlays, automated canvas downloads | meme-generator |
| 12 | Chat App |  |
Vanilla JS, typing dots loops, LocalStorage | Async answer queues, typing dots delays, history storage | chat-app |
| 13 | Survey App |  |
Vanilla JS, wizard validations, JSON viewer | Multi-step form wizards, validations nodes, JSON printouts | survey-app |
| 14 | Job Search Board |  |
Vanilla JS, localStorage bookmark rows, modals | Jobs filtering models, favorites lists, application forms | job-search-app |
| 15 | Parallax Website |  |
Vanilla JS, Scroll layers, IntersectionObserver | Depth scroll transformations, card viewport entrance fades | parallax-website |
| 16 | Random User App |  |
Vanilla JS, randomuser.me API, Skeletons | Skeleton layouts, user detail cards, tabs switching | random-user-app |
| 17 | Typing Speed Test |  |
Vanilla JS, WPM formulas, hidden buffers | Caret cursors blinkers, character-by-character checks | typing-speed-test |
| 18 | Kanban Task Board |  |
Vanilla JS, HTML5 Drag-Drop, priority states | Column lanes transitions, drag-over highlights, badges | todo-list |
| 19 | Memory Match Game |  |
Vanilla JS, 3D CSS flips, mismatch shake | CSS 3D rotates, card matching validations, highscores | memory-game |
| 20 | Music Player |  |
Vanilla JS, HTML5 Audio, circular spin art | Audio seek bars, timeline calculations, playlist drawers | music-player |
| 21 | Stock Simulator |  |
Vanilla JS, Canvas charting, Random Walk | Line chart vector plotters, buy/sell portfolio balance ledgers | stock-trading-app |
To explore these projects locally, follow these steps:
-
Clone the repository:
git clone https://github.com/utsavexe/Mini-Projects.git cd Mini-Projects -
Open the landing dashboard directly in any browser:
- Double-click
index.htmlat the root folder or use VS Code Live Server.
- Double-click
-
Node development (required ONLY for React/TypeScript projects like
note-app):cd note-app npm install npm run dev
Each project is fully standalone. They contain their own index.html and assets and do not require root packages.
- GitHub Pages: Simply activate GitHub Pages on the root repository. Every project directory will map directly to
/folder-name/(e.g.yourname.github.io/Mini-Projects/note-app/). - Vercel / Netlify: Connect this repository to Vercel/Netlify. The root landing page will serve as the gateway, and all standalone routes will render perfectly.
This repository is open-source and available under the MIT License. Feel free to copy, modify, and build upon these projects for your own practice!
⭐ Star the repo if you found these premium designs helpful!