{"id":20690033,"url":"https://github.com/gdbecker/frontendmentorprojects","last_synced_at":"2026-01-24T00:51:31.943Z","repository":{"id":155505476,"uuid":"631670202","full_name":"gdbecker/FrontendMentorProjects","owner":"gdbecker","description":"Challenge Projects from Frontend Mentor","archived":false,"fork":false,"pushed_at":"2024-10-20T20:35:07.000Z","size":40981,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T16:51:13.411Z","etag":null,"topics":["bootstrap","css","firebase","frontend-webdevelopment","html","javascript","nextjs","react","sass-framework","tailwind-css"],"latest_commit_sha":null,"homepage":"https://frontend-mentor-showcase-gdbecker.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gdbecker.png","metadata":{"files":{"readme":"README.md","changelog":"news-homepage/.gitignore","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-23T18:45:39.000Z","updated_at":"2024-10-20T20:35:10.000Z","dependencies_parsed_at":"2024-10-22T00:38:18.150Z","dependency_job_id":null,"html_url":"https://github.com/gdbecker/FrontendMentorProjects","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdbecker%2FFrontendMentorProjects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdbecker%2FFrontendMentorProjects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdbecker%2FFrontendMentorProjects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdbecker%2FFrontendMentorProjects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gdbecker","download_url":"https://codeload.github.com/gdbecker/FrontendMentorProjects/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250283443,"owners_count":21405164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","firebase","frontend-webdevelopment","html","javascript","nextjs","react","sass-framework","tailwind-css"],"created_at":"2024-11-16T23:11:38.305Z","updated_at":"2026-01-24T00:51:31.902Z","avatar_url":"https://github.com/gdbecker.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor Project Solutions\n\nThis is a collection of solutions I created for a variety of challenges from [Frontend Mentor](https://www.frontendmentor.io) - a platform that provides an awesome way to grow in frontend development skills. I really enjoy how each project's approach is a lot like a real-life scenario: you're given a brief that contains core design goals and styles, sometimes Sketch or Figma files for a greater level of detail, and then it's up to you to deliver a solution that as closely matches what's needed as possible. There is a lot of flexibility to build however you want. Each of these projects within this showcase pushed me for different reasons, to stretch what I thought I was capable of, and to challenge me to keep learning and growing - aiming to get better everyday with practice.\n\nCheck out links below for each project's live demo, my Frontend Mentor solution, and the original project brief's link.\n\n## Links\n\n[Projects Showcase Site](https://frontend-mentor-showcase-gdbecker.netlify.app)\n\n## Finished Solutions\n\n| Project Difficulty Level | Key |\n| ----------- | ----------- |\n| Newbie | ⭐️ |\n| Junior | ⭐️⭐️ |\n| Intermediate | ⭐️⭐️⭐️ |\n| Advanced | ⭐️⭐️⭐️⭐️ |\n| Guru | ⭐️⭐️⭐️⭐️⭐️ |\n\n| Project | Level | Links | Tools \u0026 Approach |\n| ----------- | ----------- | ----------- | ----------- |\n| [REST Countries API with color theme switcher](./countries/) | ⭐️⭐️⭐️⭐️ | [Live Demo](https://rest-countries-api-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/rest-countries-api-app-with-next-tailwind-VZ0_N1UPsW) / [Project Brief](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) | React, Next, Tailwind |\n| [Rock, Paper, Scissors Game](./rock-paper-scissors/) | ⭐️⭐️⭐️⭐️ | [Live Demo](https://rock-paper-scissors-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/rock-paper-scissors-game-with-html-css-javascript-1KCdykZHJI) / [Project Brief](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH) | HTML, CSS, JavaScript |\n| [Calculator App](./calculator/) | ⭐️⭐️⭐️ | [Live Demo](https://calculator-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/calculator-app-with-next-tailwind-YnS4hyZBDm) / [Project Brief](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29) | React, Next, Tailwind |\n| [IP Address Tracker](./ip-tracker/) | ⭐️⭐️⭐️ | [Live Demo](https://ip-tracker-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/ip-address-tracker-with-next-tailwind-2Zz94TGTex) / [Project Brief](https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0) | React, Next, Tailwind |\n| [Todo App](./todo/) | ⭐️⭐️⭐️ | [Live Demo](https://todo-app-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/todo-app-with-nextjs-tailwind-firebase-3CyqBuYLnn) / [Project Brief](https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW) | React, Next, Tailwind, Firebase |\n| [Advice Generator App](./advice-app/) | ⭐️⭐️ | [Live Demo](https://advice-app-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/advice-app-with-next-tailwind-8S94c3c-U-) / [Project Brief](https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db) | React, Next, Tailwind |\n| [Age Calculator App](./age-calculator/) | ⭐️⭐️ | [Live Demo](https://age-calculator-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/age-calculator-with-react-bootstrap-xj_HjknSpR) / [Project Brief](https://www.frontendmentor.io/challenges/age-calculator-app-dF9DFFpj-Q) | React, Bootstrap |\n| [Blogr Landing Page](./blogr-homepage/) | ⭐️⭐️ | [Live Demo](https://blogr-homepage-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/blogr-landing-page-with-react-bootstrap-ziqxnxrt9z) / [Project Brief](https://www.frontendmentor.io/challenges/blogr-landing-page-EX2RLAApP) | React, Bootstrap |\n| [Expenses Chart Component](./expenses-chart-component/) | ⭐️⭐️ | [Live Demo](https://expenses-chart-component-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/expenses-chart-component-with-html-css-javascript-UBH4GcyB5Z) / [Project Brief](https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt) | HTML, CSS, JavaScript |\n| [Fylo Dark Theme Landing Page](./fylo-landing-dark/) | ⭐️⭐️ | [Live Demo](https://fylo-landing-dark-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/fylo-dark-landing-page-with-next-and-sass-IAyv5CaYqZ) / [Project Brief](https://www.frontendmentor.io/challenges/fylo-dark-theme-landing-page-5ca5f2d21e82137ec91a50fd) | React, Next, SASS, Bootstrap |\n| [News Homepage](./news-homepage/) | ⭐️⭐️ | [Live Demo](https://news-homepage-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/news-homepage-with-react-bootstrap-tkackbvjn1) / [Project Brief](https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl) | React, Bootstrap |\n| [Notifications Page](./notifications-page/) | ⭐️⭐️ | [Live Demo](https://notifications-page-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/notifications-page-with-react-bootstrap-LjvWM4bG57) / [Project Brief](https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) | React, Bootstrap |\n| [Social Media Dashboard with Theme Switcher](./social-media-dashboard/) | ⭐️⭐️ | [Live Demo](https://social-media-dashboard-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/social-media-dashboard-with-next-tailwind-k1uS7_Om47) / [Project Brief](https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H) | React, Next, Tailwind |\n| [Sunnyside Agency Landing Page](./sunnyside/) | ⭐️⭐️ | [Live Demo](https://sunnyside-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/sunnyside-landing-page-with-next-sass-EZ3xT9DAIG) / [Project Brief](https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef) | React, Next, SASS, Bootstrap |\n| [Testimonials Grid Section](./testimonials-grid/) | ⭐️⭐️ | [Live Demo](https://testimonials-grid-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/testimonials-grid-with-next-tailwind-Jk2KbMWvmV) / [Project Brief](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7) | React, Next, Tailwind |\n| [Tip Calculator](./testimonials-grid/) | ⭐️⭐️ | [Live Demo](https://tip-calculator-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/tip-calculator-with-next-tailwind-S4saLJMW04) / [Project Brief](https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX) | React, Next, Tailwind |\n| [3-Column Preview Card Component](./3-column-card/) | ⭐️ | [Live Demo](https://3-column-card-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/3column-card-with-nextjs-sass-voBV4ThwSG) / [Project Brief](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-) | React, Next, SASS, Bootstrap |\n| [Article Preview Component](./article-preview-component/) | ⭐️ | [Live Demo](https://article-preview-component-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/article-preview-component-with-html-css-js-5CUDmusErU) / [Project Brief](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT) | HTML, CSS, JavaScript |\n| [Base Apparel Coming Soon Page](./base-apparel/) | ⭐️ | [Live Demo](https://base-apparel-page-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/base-apparel-page-with-html-css-KRIlBZ-PMQ) / [Project Brief](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0) | HTML, CSS, JavaScript |\n| [Blog Preview Card](./blog-preview-card/) | ⭐️ | [Live Demo](https://blog-preview-card-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/blog-preview-card-with-html-css-zn9wxN9Jjz) / [Project Brief](https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS) | HTML, CSS |\n| [FAQ Accordion](./faq-accordion/) | ⭐️ | [Live Demo](https://faq-accordion-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/faq-accordion-with-html-css-javascript-LgASHjywcH) / [Project Brief](https://www.frontendmentor.io/challenges/faq-accordion-wyfFdeBwBz) | HTML, CSS, JavaScript |\n| [Four Card Feature Section](./four-card-feature-section/) | ⭐️ | [Live Demo](https://four-card-feature-section-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/four-card-feature-section-with-html-css-SZBaeKV0w8) / [Project Brief](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK) | HTML, CSS |\n| [Huddle Landing Page](./huddle-landing/) | ⭐️ | [Live Demo](https://huddle-landing-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/huddle-landing-with-next-tailwind-qui6I1xtZh) / [Project Brief](https://www.frontendmentor.io/challenges/huddle-landing-page-with-a-single-introductory-section-B_2Wvxgi0) | React, Next, Tailwind |\n| [Interactive Rating Component](./rating-component/) | ⭐️ | [Live Demo](https://rating-component-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/rating-component-with-react-bootstrap-Tba__w3pRE) / [Project Brief](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) | React, Bootstrap |\n| [Intro Component with Sign-Up Form](./intro-component/) | ⭐️ | [Live Demo](https://intro-component-sign-up-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/intro-component-with-html-css-javascript-H3bRV-s9mg) / [Project Brief](https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1) | HTML, CSS, JavaScript |\n| [NFT Preview Card Component](./nft-card/) | ⭐️ | [Live Demo](https://nft-card-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/nft-card-component-with-react-bootstrap-hiW4LJD-cc) / [Project Brief](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U) | React, Bootstrap |\n| [Order Summary Component](./order-summary-component/) | ⭐️ | [Live Demo](https://order-summary-component-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/order-summary-component-with-html-css--upHZl1KGv) / [Project Brief](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj) | HTML, CSS |\n| [Ping Single Column Coming Soon Page](./ping-coming-soon-page/) | ⭐️ | [Live Demo](https://ping-coming-soon-page-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/ping-coming-soon-page-with-html-css-js-RssOlz1me0) / [Project Brief](https://www.frontendmentor.io/challenges/ping-single-column-coming-soon-page-5cadd051fec04111f7b848da) | HTML, CSS, JavaScript |\n| [Product Preview Card](./product-preview-card/) | ⭐️ | [Live Demo](https://product-preview-card-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/product-preview-card-with-html-css-0DgtaPqf1m) / [Project Brief](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa) | HTML, CSS |\n| [Profile Card Component](./profile-card/) | ⭐️ | [Live Demo](https://profile-card-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/profile-card-with-next-sass-bgCML2EGD_) / [Project Brief](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ) | React, Next, SASS, Bootstrap |\n| [QR Code Component](./qr-code/) | ⭐️ | [Live Demo](https://qr-code-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/qr-code-component-hosted-on-netlify-rwLGIUAbUi) / [Project Brief](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H) | React, Bootstrap |\n| [Recipe Page](./recipe-page/) | ⭐️ | [Live Demo](https://recipe-page-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/recipe-card-with-html-css-eBDtuI37Uz) / [Project Brief](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm) | HTML, CSS |\n| [Results Summary Component](./results-component/) | ⭐️ | [Live Demo](https://results-component-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/results-component-with-react-bootstrap-EaorfiBf3j) / [Project Brief](https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV) | React, Bootstrap |\n| [Single Price Grid Component](./single-price-grid-component/) | ⭐️ | [Live Demo](https://single-price-grid-component-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/single-price-grid-component-with-html-css-rvvACzqxRj) / [Project Brief](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc) | HTML, CSS |\n| [Stats Preview Card Component](./stats-card/) | ⭐️ | [Live Demo](https://stats-card-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/stats-card-with-next-tailwind-s2UBHsewM6) / [Project Brief](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62) | React, Next, Tailwind |\n| [Social Links Profile](./social-links-profile/) | ⭐️ | [Live Demo](https://social-links-profile-gdbecker.netlify.app) / [Solution](https://www.frontendmentor.io/solutions/social-links-profile-with-html-css-gBmKT4syK4) / [Project Brief](https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ) | HTML, CSS |\n| [Social Proof Section](./social-proof-section/) | ⭐️ | [Live Demo](https://social-proof-section-gdbecker.netlify.app/) / [Solution](https://www.frontendmentor.io/solutions/social-proof-section-with-html-css-_QFmuPvzpf) / [Project Brief](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA) | HTML, CSS |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdbecker%2Ffrontendmentorprojects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgdbecker%2Ffrontendmentorprojects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdbecker%2Ffrontendmentorprojects/lists"}