frontend-final-project
Shipped: A view onto a public dataset
Built Weather Window, a React app that turns hourly public weather forecast data into a practical outdoor-time recommendation. Users can search cities and supported region names, view a continuous outdoor window of up to three hours, and see the precipitation, wind, and temperature values behind the recommendation. The project uses Open-Meteo geocoding and forecast APIs. The repository includes setup and usage instructions, recommendation logic, limitations, and representative-location handling for supported regions. Loading, API error, and no-suitable-window states are handled explicitly. The project was tested with a production build, pushed to GitHub, and deployed on Vercel for reviewer access. Repository: https://github.com/rajatpandey14/weather-window Live: https://weather-window-five.vercel.app Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
I built Nepal Tourism Explorer, a React/TypeScript data visualization app using official Nepal Tourism Board tourism statistics. The reviewer can verify the acceptance criteria by: Making public data understandable: The app visualizes Nepal’s international visitor arrivals from 2019–2025 and the top 10 source markets for 2025. Handling loading/failure states: The app includes loading, error, retry, and empty-data states. Documenting limitations: The README explains the data source, what the data can show, and what it cannot measure. Reproducibility: The README includes local setup and build instructions. Development history: The GitHub repository contains the project’s commit history showing its development. Deployment: The live application is available at https://nepal-tourism-explorer-khaki.vercel.app/ Repository: https://github.com/tenjeebkc/Nepal-tourism-explorer Live: https://nepal-tourism-explorer-khaki.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
I built a pixel-perfect, interactive clone of the Canva export modal using strictly vanilla HTML5, CSS3, and JavaScript, without any external libraries. A reviewer can verify the acceptance criteria are met by checking the live demo and the repository: 1. Clean Code: All development comments have been removed from the source files. 2. UI/UX & Styling: Features custom-styled CSS radio toggles, gradients, and dynamic loading/success states. 3. Accessibility (a11y): Implemented aria-live="polite" for status messages and proper semantic labels for all inputs. 4. Defensive Programming: Includes state validation (preventing download if no page is selected) and a proactive navigator.onLine check to intercept offline requests immediately. 5. Documentation: The README.md file contains comprehensive setup instructions, technical decisions (defensive programming vs. UX), known limits, and a specific feature improvement comparison over the original Canva modal. Repository: https://github.com/Carmy4/canva-export-menu Live: https://carmy4.github.io/canva-export-menu/ Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
I rebuilt Spotify’s persistent web player UI as a standalone React app styled with Tailwind CSS and Lucide icons. A reviewer can verify the acceptance criteria directly through the GitHub repository's step-by-step commit history and the clear setup instructions provided in the README. Full keyboard navigation is supported out of the box using Space for play/pause, Arrow keys for seeking and volume control, M for mute, and Tab for visible focus navigation. Failure states are explicitly handled, showing a retry banner on media loading errors and an SVG placeholder if album art fails to load. Finally, the README compares the build against the original by detailing omitted features like authentication and highlighting an key UI accessibility improvement. Repository: https://github.com/ghazlsinjab80/spotify-mini-player Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
I built GitHub Repository Signals — you type in any public repo (like facebook/react) and it tells you something GitHub itself doesn't show you in one place: how much of the project actually depends on one person. It pulls the repo's contributors and calculates what percentage of commits came from the top contributor, so you can tell at a glance if a project is a healthy team effort or basically one person holding it together. Repository: https://github.com/hassannnn13/devConnect-Internship-Final-Project.git Live: https://git-repository-explorer.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
I built Quakescope, a real-time earthquake monitoring web application using React 19, Vite, Tailwind CSS, Leaflet, and the USGS Earthquake Catalog API. The application transforms earthquake data into an interactive and understandable interface. Users can view earthquake locations on a map, filter events by magnitude and time, and inspect individual earthquake details such as magnitude, coordinates, significance, and alert information. A reviewer can verify that the acceptance criteria are met by following these steps: Acceptance Criterion: Earthquake data is displayed Verification: Open the application and confirm that earthquake events are loaded from the USGS API and displayed in the interface. Acceptance Criterion: Interactive map works Verification: Check that earthquake markers appear on the Leaflet map and that the map can be explored. Acceptance Criterion: Filtering works Verification: Change the magnitude and time filters and verify that the displayed earthquake results update according to the selected criteria. Acceptance Criterion: Earthquake details are available Verification: Select an earthquake and confirm that its details, including magnitude, location, coordinates, and other available information, are shown. Acceptance Criterion: Loading and error states are handled Verification: Test the application during loading or with an unavailable network/API response and verify that the interface provides appropriate feedback rather than failing silently. Acceptance Criterion: Responsive and accessible interface Verification: Resize the browser and test keyboard navigation, focus states, and the usability of the main controls. Acceptance Criterion: Project can be run locally Verification: Clone the repository, run npm install, then npm run dev, and open the local Vite URL to inspect the application. The source code and implementation are available in the Quakescope GitHub repository: https://github.com/techtuber9988/quakescope. This allows the reviewer to inspect both the functionality and the technical implementation. Repository: https://github.com/techtuber9988/quakescope Live: https://quakescope.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: CryptoTracker
This is my take on a CryptoTracker. I've noticed that many cryptocurrency websites these days are confusing and brightly colored, with so many random numbers that can be overwhelming. Clicking one of them opens a modal (unlike other websites that lead to a new page) that shows the latest 48 hours and a naive prediction of where the price could go, along with an hourly compilation of prices. Repository: https://github.com/MedicMedic/CryptoTracker Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
I built a responsive Personal Reading List feature using HTML, CSS, and JavaScript. Users can add, view, open, and remove saved resources, with data persisted using localStorage. The reviewer can verify the acceptance criteria through the README, which includes local setup instructions, keyboard accessibility details, failure-state testing, and a comparison with the original feature. Loading, error, and empty states can be demonstrated using the documented URL parameters without changing the code. Live demo: https://vanshika2723.github.io/Personal-reading-list/ Repository: https://github.com/vanshika2723/Personal-reading-list.git Live: https://vanshika2723.github.io/Personal-reading-list/ Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
Built an explorer for the live USGS 24-hour seismic GeoJSON dataset: 1. Understanding the raw data: Computes aggregated peak magnitude, average hypocenter depth, and filtered categories (2.5+, 4.5+) not immediately obvious in raw JSON. 2. Resilience: Uses an AbortController for network timeouts and provides an in-place retry mechanism. A 'Simulate Timeout / Fail' button allows reviewer testing without code changes. 3. Analytical boundaries: Documented in the README and UI what the dataset establishes (recorded ground motion) vs what it cannot claim (earthquake prediction or structural damage). Repository: https://github.com/GhulamMustafaAnsari/earthquake-dataset-viewer Live: https://ghulammustafaansari.github.io/earthquake-dataset-viewer/ Built for the Verified Frontend Internship · Final project
Shipped: Job Application Tracker
I built a Job Application Tracker, a small personal tool for managing and tracking job applications and their current status. The reviewer can verify the acceptance criteria directly from the deployed application: ● Add job applications with company, job title, location, date, status, job URL, and notes. ● Search and filter applications by status. ● Edit application status and delete applications. ● Refresh the page to verify that applications persist through localStorage. ● Remove all applications to demonstrate the empty state. ● Submit the form with missing or invalid fields to demonstrate validation and failure handling. ● The application also handles corrupted stored data and provides a recovery option. ● The README includes local setup instructions, state-handling details, and a section explaining what was deliberately not implemented. The project repository has been pushed to GitHub with a development history, and the application has been deployed to Vercel. Technologies used: React, TypeScript, Vite, Redux Toolkit, React Redux, React Hook Form, Yup, yupResolver, SCSS, and browser localStorage. Repository: https://github.com/abbasg-dev/job-application-tracker Live: https://job-application-tracker-xi-jet.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A tool for a problem you have
What did i build? I built a Coding Practice Tracker, a React-based web application that helps students organize and track their coding practice. Users can add problems with details such as platform, topic, difficulty, link, and status. The app also supports editing, deleting, searching, filtering, and tracking progress through a dashboard. Data is stored using LocalStorage. How can a reviewer see that acceptance criteria are met? The reviewer can open the deployed application and test the main features directly. The GitHub repository contains the source code and development history. The README includes local setup instructions, project scope, and deliberately unimplemented features. The application also handles form validation, empty states, and no-result states. Repository: https://github.com/Ateefa-Syed/coding-practice-tracker Live: https://coding-practice-tracker.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
What I built & how to review it: I rebuilt GitHub’s repository search as a focused React/Vite application using the public GitHub REST API. The reviewer can verify the acceptance criteria by opening the deployed application, searching for repositories, and testing the initial empty state, loading state, successful results, no-results state, and API error/retry flow. The complete search experience is keyboard accessible with visible focus states, and the layout can be tested at a 320px viewport without horizontal scrolling. The GitHub repository contains the development history and README with setup instructions, scope, accessibility considerations, omitted features, and the comparison with the original GitHub feature. Repository: https://github.com/kiths-bit/github-repository-search Live: https://github-repository-search-seven.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A tool for a problem you have
I built Nodex, a local-first JSON visualizer and editor that turns deeply nested JSON data into an interactive graph, making complex structures easier to understand, navigate, and edit. A reviewer can verify the project by: 1. Pasting or editing JSON and seeing it represented as an interactive node graph. 2. Editing primitive values directly from the graph and verifying that the JSON editor updates accordingly. 3. Collapsing and expanding nested objects and arrays to manage complex structures. 4. Using Cmd/Ctrl + K to search for nodes and navigate directly to them. 5. Refreshing the page to verify that the current workspace persists locally. 6. Generating a shareable URL and opening it in a new browser session to restore the same JSON. 7. Exporting the graph as a PNG. 8. Testing empty, invalid, and malformed share-link states to verify that failures are handled without breaking the application. 9. Switching between light and dark themes. The README includes local setup instructions, project architecture, testing details, limitations, and a section explaining what was deliberately not implemented. The repository also contains the project's development history through Git commits. Technologies used: Next.js, React, TypeScript, Zustand, React Flow, Monaco Editor, Tailwind CSS, Framer Motion, and Web Workers. Repository: https://github.com/riki-k-dev/nodex Live: https://nodex-jv.vercel.app Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
DropLink is a rebuild of Windows Nearby Sharing's "send to a nearby device" feature, running in the browser. Two laptops on the same WiFi pair with a 6 digit code, then send files or a zipped code folder directly to each other over WebRTC. The server only relays the handshake and never sees the files. Repository: https://github.com/rocklegend14/droplink Live: https://droplink-rl1f.onrender.com/ Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
Quake Explorer lets you filter recent USGS earthquakes by strength and place and see the busiest regions. Slow and failing sources are handled, and you can test both from the 'Reviewer' dropdown. The README explains how to run it locally and what the data does and doesn't support Repository: https://github.com/mohammedoomatia-max/Quake-Explorer Live: https://github.com/mohammedoomatia-max/Quake-Explorer Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
React Date Picker rebuilt with Vite, TypeScript, and Tailwind CSS v4. Fully responsive calendar grid, dropdown toggle withclick-outside handling, keyboard navigation (arrow keys, Enter, Escape), clear/reset selection state, and a comprehensive README detailing setup, architecture, omissions, and improvrments. Live deployment and all reviewer criteria met Repository: https://github.com/onaolapomay/date-picker-rebuild Live: https://datepickerrebuild.netlify.app/ Built for the Verified Frontend Internship · Final project
Shipped: A rebuild of one feature you use
I built Stillroom, a full-stack web app that breaks a video into its exact frames. It uses React + TypeScript, an Express + ffmpeg API, and Supabase for the database, storage and email/password sign-in, with no AI anywhere. You upload a clip and get a numbered contact sheet and a 3D plate rack. You can step to any exact frame, keep frames, and download them as full-resolution PNG or WebP, a ZIP of kept frames, or a numbered image sequence with a manifest for frame-by-frame web animation. Repository: https://github.com/Kam-ino/DevConnect-Internship/tree/main/Stillroom Live: https://stillroom-qm1m.onrender.com Built for the Verified Frontend Internship · Final project
Shipped: API Response Debugger — a local-first dev tool
What did you build? - A lightweight browser-based API debugging tool for frontend development. It lets users configure HTTP methods, URLs, headers, query parameters, and request bodies, then send requests and inspect status, timing, response size, and formatted responses. - Built incrementally across 8 scoped PRs, with features including error states, query parameters, JSON highlighting, request history, retry, response size, in-response search, and saved favorites. - No backend, build step, or dependencies — plain HTML/CSS/JS. How can a reviewer verify the acceptance criteria? - Repository: GitHub commit/PR history shows each feature and its implementation. - README: Documents architecture, setup, features, and intentionally excluded scope. - Error states: Invalid URLs, network/CORS failures, timeouts, invalid/empty responses, and 4xx/5xx responses are handled visibly. - Live demo: https://sindhu-dev02.github.io/api-debugger/ - DECISIONS.md: Documents key technical decisions, alternatives, trade-offs, and a real bug discovered during development. Repository: https://github.com/sindhu-dev02/api-debugger Live: https://sindhu-dev02.github.io/api-debugger/ Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
Climate Days is a web app that shows how many days per year exceed a chosen temperature in any city, using historical data from the Open-Meteo API. It includes an adjustable threshold, a linear trend line, and clear notes on what the data can and cannot tell you. Repository: https://github.com/e-dedaj/climate-days Live: https://climate-days.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A tool for a problem you have
I built a responsive Personal Reading List web application using React, JavaScript, CSS, and Vite. Users can add articles/resources with a title and URL, view saved items, open saved URLs, and remove items. The reading list uses browser localStorage for persistent data, so saved items remain after refreshing the page. The app also includes separate loading, error, and empty states. How can a reviewer see that the acceptance criteria are met? Loading state: Open /?state=loading to view the loading state. Error state: Open /?state=error to view the error message and Try Again action. Empty state: Open /?state=empty to see the explanation of the reading list and Add your first article action. Normal/data state: Open /, add an article with a title and URL, and verify that it appears in the reading list. Persistent data: Refresh the page after adding an article and verify that it remains saved. Remove items: Click Remove on a saved article to verify that it is removed. Responsive design: Test the application on both mobile and desktop screen sizes. Accessibility: Use keyboard Tab navigation to test the form and buttons. Visible focus states are provided. Documentation: The README contains instructions for testing all required states without making code changes. Repository: https://github.com/Raunakshukla90/DevConnect FinalProject Built for the Verified Frontend Internship · Final project
Shipped: A tool for a problem you have
What Was Built CommandVault — A keyboard-first developer command cheatsheet and snippet vault (React 19 + TypeScript + Vite) featuring: Dual Workspaces: Zed / Helix Terminal TUI (dense monospaced aesthetic, status line, instant prompt). Linear Precision 3-Pane (categories sidebar → command stream → inspector pane). Craft Light & Dark Themes: High-contrast light theme with dedicated tag badges, legible macOS-style scrollbars, and instant switching. Global Portal Tooltips & Inline Popovers: Root-level floating tooltips (position: fixed, z-index 999,999) immune to overflow clipping, plus non-intrusive inline delete confirmation bubbles. 100% Viewport-Fit Architecture: Full outer frame fits within the visible screen (100dvh) without page scrolling, while snippet streams and inspector panes scroll independently with custom slim scrollbars. How a Reviewer Can Verify Acceptance Criteria Verify Viewport Lock & Inner Scrolling: Open the app: the entire outer window fits on screen without any vertical browser/body scrollbar. Scroll the snippet list or inspector pane: verify each pane scrolls smoothly on its own slim rounded scrollbar. Check the bottom edge: confirm the drop shadow diffuses softly without being clipped. Verify Dual Workspaces & Switcher: Press ⌘ + M (or Ctrl + M) or click the masthead mode buttons to toggle between Zed TUI and Linear 3-Pane. Refresh the page to verify your selected workspace persists in localStorage. Verify Light Theme & Visible Scrollbars/Tags: Press ⌘ + T (or Ctrl + T) or click the Sun/Moon icon in the header. Verify the scrollbar thumb is clearly visible with dark translucent contrast against light backgrounds. Check category tags (Docker, Git, Bash, SQL, etc.): verify they render with clean light pastel tints and legible text instead of dark charcoal boxes. Verify Tooltip & Delete Popover: Hover over the Copy button on any snippet: verify the tooltip appears cleanly below the button with its arrow pointing directly to the button center, without clipping behind any headers. Click the Trash icon on a snippet: verify the inline "Delete snippet?" confirmation bubble pops up anchored to the button (with Cancel and Delete actions). Verify Favorite Filtering in Zed TUI: In Zed TUI, click [★ FAVS] in the filter bar or press ⌘ + P on a command: verify the list instantly filters down to pinned favorites. Repository: https://github.com/aleewains/dev-snippets Live: https://commandvault-tau.vercel.app/ Built for the Verified Frontend Internship · Final project
Shipped: A view onto a public dataset
Clinical Trial Finder is a web app built with React and Vite, where you can search registered clinical studies from the ClinicalTrials.gov API by condition, filter them by recruitment status, and click through to the original record. It handles loading, empty and error states, and requests time out after 10 seconds instead of hanging. The README covers how to run it locally, what the data can’t tell you, and what I left out. Repository: https://github.com/marthahere/clinical-trial-finder Live: https://marthahere.github.io/clinical-trial-finder/ Built for the Verified Frontend Internship · Final project