Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/gdbecker/frontendmentorprojects

Challenge Projects from Frontend Mentor
https://github.com/gdbecker/frontendmentorprojects
bootstrap css firebase frontend-webdevelopment html javascript nextjs react sass-framework tailwind-css
Last synced: 2 days ago
JSON representation
Challenge Projects from Frontend Mentor
Host: GitHub
URL: https://github.com/gdbecker/frontendmentorprojects
Owner: gdbecker
Created: 2023-04-23T18:45:39.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-10-20T20:35:07.000Z (29 days ago)
Last Synced: 2024-10-21T01:07:25.686Z (29 days ago)
Topics: bootstrap, css, firebase, frontend-webdevelopment, html, javascript, nextjs, react, sass-framework, tailwind-css
Language: JavaScript
Homepage: https://frontend-mentor-showcase-gdbecker.netlify.app
Size: 39.1 MB
Stars: 1
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: news-homepage/.gitignore
Awesome Lists containing this project

README

        # Frontend Mentor Project Solutions

This 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.

Check out links below for each project's live demo, my Frontend Mentor solution, and the original project brief's link.

## Links

[Projects Showcase Site](https://frontend-mentor-showcase-gdbecker.netlify.app)

## Finished Solutions

| Project Difficulty Level | Key |

| ----------- | ----------- |

| Newbie | ⭐️ |

| Junior | ⭐️⭐️ |

| Intermediate | ⭐️⭐️⭐️ |

| Advanced | ⭐️⭐️⭐️⭐️ |

| Guru | ⭐️⭐️⭐️⭐️⭐️ |

| Project | Level | Links | Tools & Approach |

| ----------- | ----------- | ----------- | ----------- |

| [REST Countries API with color theme switcher](./countries/) | ⭐️⭐️⭐️⭐️ | [Live Demo]() / [Solution]() / [Project Brief](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca) | React, Next, Tailwind |

| [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 |

| [Calculator App](./calculator/) | ⭐️⭐️⭐️ | [Live Demo]() / [Solution]() / [Project Brief](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29) | React, Next, Tailwind |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |

| [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 |