frontend-task-state
Shipped: Currency converter with live rates
Repository: https://github.com/mutyalaraghavendra/currencyconverter Live: https://mutyalaraghavendra.github.io/currencyconverter/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
Built a responsive currency converter using React and the Frankfurter public API. The application supports successful conversion plus clearly distinct loading, error, and empty/data-gap states. Reviewers can reproduce all three states without changing the code using ?demo=loading, ?demo=error, and ?demo=empty, with the exact steps documented in the README. The interface is keyboard accessible, responsive at 320px, and has no horizontal scrolling. Repository: https://github.com/rajatpandey14/Currency-Converter Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I built a very simple state-driven Personal Reading List application with localStorage persistence that lets users add and remove entries. Reviewers can verify all criteria directly in the UI using the built-in demo control panel at the top of the page without changing any code. Clicking "Trigger Loading" shows an animated spinner and status message, "Trigger Empty" explains the feature and offers an "Add Your First Book" button that focuses the input, and "Trigger Error" displays a red alert explaining what failed along with a "Retry Loading" button. Full details and setup instructions are documented in the README. Repository: https://github.com/ghazlsinjab80/personal-reading-list Built for the Verified Frontend Internship · state and data
Shipped: Public repository search
A grid of my personal GitHub repos. The results are loaded once into the site, and searching and sorting are done locally; you can sort them by recent commits, stars, creation date, and name. Clicking one of the cells will open a modal showing the stats of the repository along with a link to it. Repository: https://github.com/MedicMedic/Stellar-s-Public-Repos Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I build a small browser only reading list app from open library search api that include add list function saved in the localstorge. Repository: https://github.com/aungmyintmyatmaggie129/LeafMark Reading List Live: https://leafmark.netlify.app/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
I built a responsive Exchange Rate Converter that fetches exchange rates from a public API and focuses on clearly handling different application states. What I Built 1. Currency Conversion Users can enter an amount and select the source and target currencies. The application fetches the exchange rate and displays the converted amount. A swap option is provided to quickly switch currencies. 2. Loading State While the API request is in progress, the application shows a clear loading indicator and message. This makes it clear that the system is working and the result has not arrived yet. 3. Error State If the API request fails, a separate error state is displayed. The message explains what went wrong and tells the user what they can do next, such as retrying the request. 4. Empty State If the request succeeds but the API does not provide a rate for the selected currency pair, the application shows an empty/data-gap state. It does not incorrectly treat missing data as a zero value. 5. Success State When a valid exchange rate is available, the application displays the rate and the converted amount clearly. How a Reviewer Can Verify the Acceptance Criteria The reviewer does not need to modify the source code to test the required states. Success: Open the application normally and perform a conversion. Loading: Open the application with ?state=loading . Error: Open the application with ?state=error . Empty: Open the application with ?state=empty . This allows the reviewer to directly verify that Loading, Error, Empty, and Success are separate and clearly distinguishable states. Acceptance Criteria Covered Loading, Error, and Empty states are visually and textually different. Errors explain what failed and what the user should do next. Missing exchange-rate data is treated as a data gap rather than displaying 0 . Unsupported currency pairs are presented as an Empty state, not as an application error. All required states are demonstrable without changing the code. The README provides instructions for testing each state. Repository: https://github.com/techtuber9988/exchange-rate-converter Live: https://exchange-rate-converter-sooty.vercel.app/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
I built a Currency converter that fetches live exchange rates from the Frankfurter API. The app demonstrates three distinct fetch states: Loading (spinner + message while waiting) Error (clear alert when the request fails, with retry option) Empty (coverage gap when a currency pair isn’t supported, shown as “No rate available” instead of an error). How can a reviewer see that the acceptance criteria are met? All three states are visually and textually distinct and can be reached without code changes: Loading → open task2.html?demo=loading or enable Simulate a slow connection in Demo controls. Error → open task2.html?demo=error or enable Force the request to fail. Empty → open task2.html?demo=empty or select BTC or ETH as the “To” currency. The error message explains what failed and what to try next, including a retry button. Unsupported currency pairs are presented as a data gap, not an application error. Repository: https://github.com/hassannnn13/currency-converter.git Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
What did you build? I built a responsive Personal Reading List web application using HTML, CSS, and JavaScript. Users can add articles/resources with a title and URL, view saved items, and remove items. The reading list uses browser localStorage for persistent data. How can a reviewer see that the acceptance criteria are met? Loading state: Open ?state=loading and the loading state will be displayed before the content loads. Error state: Open ?state=error to see the error message explaining what failed and providing a Try Again action. Empty state: Open ?state=empty to see an explanation of the reading-list feature and an Add your first article action. Normal data state: Add an article using the form and verify that it appears in the reading list and remains available after refreshing. Responsive design: Test the application on mobile and desktop widths; the layout adapts without horizontal scrolling. Accessibility: Use keyboard Tab navigation to verify visible focus states and use Enter/Space to operate buttons. Documentation: The README contains the exact steps and URLs for testing all three states without making any code changes. 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 · state and data
Shipped: Public repository search
Built a public GitHub repository search view against the live GitHub REST API handling all three core states: 1. Loading state: Animated loading spinner and active announcement. 2. Empty state: A search that returned 0 results is explicitly presented as a successful search with 0 matches, not an error. 3. Request failed state: Visual error alert explaining what failed with an interactive 'Try Again' retry button. 4. Reviewer testability: Provided top preset buttons enabling the reviewer to test loading, 0-match empty state, and simulated API error states directly without editing code. Repository: https://github.com/GhulamMustafaAnsari/public-repo-search-states Live: https://ghulammustafaansari.github.io/public-repo-search-states/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
I built a responsive currency converter using React and Vite. It fetches live exchange rates from the Frankfurter API and handles four distinct states: Loading, Error, Empty, and Success. The reviewer can run the project locally and use the URL query parameters documented in the README to demonstrate each required state without changing the code: Loading: /?state=loading Error: /?state=error Empty: /?state=empty Success: / The README contains step-by-step instructions for reaching and verifying each state. Repository: https://github.com/Ateefa-Syed/currency-converter Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
A single web page for saving the books, articles, and links you want to get back to. Entries persist in the browser's local storage, accessed through a small async api layer (list, add, remove) that mimics a real REST backend including latency and failures so the loading and error states are genuine, not just mocked up visuals. Repository: https://github.com/rocklegend14/personal-reading-list Live: https://personal-reading-list-black.vercel.app/ Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I built a Personal Reading List web application using React and Vite, backed by the Open Library Search API. Reviewers can search for books, view book details, add books to their personal reading list, remove them, and refresh the page to verify that the list persists through browser localStorage . The application includes clearly separated loading, error, and empty states. To make the acceptance criteria easy to verify without changing the code, the Reviewer Demo section at the top provides buttons for Show loading state, Show error state, and Show empty state, plus Reset demo. The empty reading-list state also explains the purpose of the list and how to add the first book, while the error state explains what failed and what the reviewer should do. Reviewers can therefore test all required states directly from the live application, while the README documents the implementation, setup, API, persistence, and state demonstrations. Repository: https://github.com/kiths-bit/personal-reading-list Live: https://personal-reading-list-beryl.vercel.app/ Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I built a simple state-driven Personal Reading List application powered by the Open Library API, with localStorage persistence that lets users discover, search, add, and remove books. The application includes clearly defined loading, error, empty, discover, and reading list states. Reviewers can verify the error state directly using the built-in demo URL (?demo=error), while the loading and empty states can be reached through normal user interactions — no code changes required. The app also includes keyboard-accessible search with Cmd/Ctrl + K, book search, persistent saved books, and responsive UI. Full setup instructions and state-testing details are documented in the README. Repository: https://github.com/riki-k-dev/reading-list Live: https://riki-k-dev.github.io/reading-list/ Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
What you built: A Personal Reading List web application using Next.js App Router, TypeScript, and Tailwind CSS. It supports adding and removing books, local storage persistence, and a built-in Reviewer Testing Control Panel. Empty state requirement: When the list has no items, the UI shows a dedicated screen explaining what the list is for and provides a direct button to add the first book. Loading, error, and empty states: All three states are visually and textually distinct. Reviewers can trigger them directly using the control panel without changing any code. Error message requirement: The error state displays a clear explanation of what failed along with a "Try Again" recovery option. README documentation: The repository includes a README.md file documenting the project setup and how reviewers can test each required state. Repository: https://github.com/onaolapomay/ReadingLIST.git Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
A book reading list app built with React and Vite, where you can search books through the Open Library API and save them to a persistent list. It includes clearly distinct loading, error and empty states, plus demo buttons that let anyone preview each state without touching the code. Repository: https://github.com/e-dedaj/reading-list Live: https://booklover-bookshelf.vercel.app/reading-list Built for the Verified Frontend Internship · state and data
Shipped: Public repository search
Searches public GitHub repos via the real API. Open 'Reviewer: trigger each state' under the search box to see loading, error and empty without code changes. The README explains each state and the error messages. Repository: https://github.com/mohammedoomatia-max/repo-search Live: https://mohammedoomatia-max.github.io/repo-search/ Built for the Verified Frontend Internship · state and data
Shipped: Currency converter with live rates
I built Specimen, a currency converter in React, TypeScript and Vite. It fetches live European Central Bank exchange rates from the public Frankfurter API, shows the result styled like a banknote, and charts the pair's rate history over 1 month, 3 months or 1 year. Repository: https://github.com/Kam-ino/DevConnect-Internship/tree/main/State%20and%20Data Live: https://devconnect-internship-state-and-data.onrender.com Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
What I built: A personal reading list app. You can add books (title + author) and remove them. It's backed by a real backend — Node.js with Express, and the data is saved in a SQLite database file, so it doesn't disappear on refresh. The app shows four different states depending on what's happening: loading, error, empty, and the actual list. Each one looks and reads differently, so it's always clear which one you're looking at. How to check the loading, error, and empty states There's a small panel at the bottom of the page called "Reviewer tools." It has buttons to jump straight to each state, no code or dev tools needed: - Show loading state — shows the loading screen - Show error state — triggers a real failed request and shows the error screen, with a message saying what went wrong and a button to retry - Show empty state — shows the empty screen, which explains what the list is for and has a button to add your first book - Back to my list — goes back to your real saved books You can also see these naturally: open the app fresh (or clear the data) to see the real empty state, remove all books to get back to it, or stop the server to see a real error. All of this is also written out in the README in the repo. Repository: https://github.com/sindhu-dev02/reading-list Live: https://reading-list-jeah.onrender.com Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
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 Repository: https://github.com/Raunakshukla90/DevConnect FinalProject Live: https://frontendsaveitreadit.netlify.app/ Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
What I built: A Personal Reading List app (React + TypeScript + Vite) backed by persistent localStorage that supports adding, removing, and tracking books across reading statuses (Want to Read, Currently Reading, Completed). How a reviewer can verify the acceptance criteria: Distinct States: Loading: Shows skeleton cards and explicitly states data is unmeasured pending retrieval (not zero). Error: Explains what failed, provides a working "Try Again" retry button, and states when retrying will not help (e.g., server maintenance). Empty: Explains what the reading list is for and offers the first action ("+ Add Your First Book"). Demonstrable without code changes: URL Parameters: Append ?state=loading, ?state=error, or ?state=empty directly in the browser address bar. Reviewer Toolbar: Use the top in-app switcher buttons to toggle any state or adjust latency instantly. Automated Tests: Run npm test to see 9/9 automated tests verifying all states and URL parameters. Repository: https://github.com/aleewains/personal-reading-list Live: https://personal-reading-list-ruddy.vercel.app/ Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
1. What did I build? I built a Personal Reading List web application using Next.js, React, TypeScript, and Tailwind CSS as part of DevConnect Internship - Brief C. Users can browse books, view detailed book information, and manage their personal reading lists by adding and removing books. I focused on creating a responsive, user-friendly interface with clear loading, error, and empty states. 2. How can a reviewer verify the acceptance criteria? The reviewer can use the live application and repository to check the following: Book browsing: Open the Books page and select a book to view its details. Adding and removing books: Add a book to the reading list, then remove it and verify that the list updates. Empty state: Open an empty reading list and verify that it explains the feature and offers a clear first action. Loading state: Observe the loading indicator while the application retrieves data. Error state: Simulate a data-loading failure, if a supported method is available, and verify that the error message explains the problem and offers a recovery action. Accessibility: Navigate the application using the keyboard and verify that interactive elements have visible focus indicators. Responsive layout: Test the application at a viewport width of 320px. Documentation: Review the README for setup instructions, keyboard navigation guidance, and instructions for demonstrating the required states. Repository: https://github.com/humaeidmansur/personal-reading-list-book-vibe Live: https://humaeidmansur-personal-reading-list-gamma.vercel.app/ Built for the Verified Frontend Internship · state and data
Shipped: Personal reading list
I built a personal reading list where you can add books (title, optional author) and remove them. It’s saved in the browser’s localStorage, so it persists across reloads and restarts, and it needs no account or server for the reviewer to use. The store is wrapped in an async API, so the app handles waiting and failure as it would with a network backend. How to check each criterion: open the “For reviewers: see each state” panel at the bottom of the page. Each link reloads with a setting in the address, so no code changes are needed. The README lists them too. Loading: ?delay=4000. You see “Loading your reading list…”, a spinner and grey placeholder rows, and the form is disabled. Error: ?fail=load. A red panel with an icon names what failed and what to do, with a Try again button (which then succeeds). ?fail=save shows the error for a failed add or remove, naming the book and confirming the list is unchanged. Empty: ?reset, or any first visit. A dashed panel explains what the list is for and offers an “Add your first book” button. Each state differs in its text, colour, icon and available actions, so none can be mistaken for another; in particular, an error is never shown as “no books”. Repository: https://github.com/TechnicalSamia18/practise-task-reading-list Built for the Verified Frontend Internship · state and data