Frontend Mentor: My solutions to the 'Guru' level challenges available at https://www.frontendmentor.io/.

---

Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
  • Directory Structure
• Setup and Usage
  • Production Emulation
    • Quickstart
  • Development
• Live Demo
• License
• Acknowledgements

---

Overview

Frontend-mentor is a learning platform that provides professional design briefs and Figma files, challenging developers to build pixel-perfect implementations from the specifications.

This repository is a PNPM monorepo containing my solutions to the platform's most advanced (Guru level) challenges while simultaneously documenting my progression as a software engineer.

Showcasing my approach to building responsive, accessible, and maintainable applications. Although the primary focus is frontend development, several challenges also incorporate backend functionality, which allowed exploration of full-stack concepts, application and repository architecture.

Features

The frontend aspect of all designs centres around fully responsive layouts with breakpoints for key device sizes, including hover states and interactive changes, side-menus, and other requirements that match the Figma design file specifications.

Tip

See repsective challenge README.md for the unique feature requirements of that challenge

Each challenge contains a docker setup for both development and production; Nginx and MongoDB database implemented in the full-stack challenges.

Tech Stack

Click arrow-section markers to open list

Frontend

Backend

Infrastructure

Testing

Tools

Repository Management

Architecture

Note: This is a generalized architecture diagram and may vary depending on the challenge.

Directory Structure

./
├─ .github/                           # github workflows
├─ .husky/                            # commit workflows
├─ .vscode/                           # vscode settings
├─ apps/
│  ├─ audiophile-ecommerce/           # guru challenge 1 of 5
│  ├─ designo-agency/
│  ├─ invoice-app/
│  ├─ kanban-task-app/
│  ├─ project-feedback-app/
│  └─ z_archive/                      # archive of easy challenges
├─ logs/
├─ node_modules/
├─ packages/                          # mono-repo configurations
├─ scripts/                           # root package.json scripts
├─ package.json
└─ ...configuration files

Note

Please refer to the corresponding README.md for each challenge for instructions on how to setup the local Dockerized environment. z_archive challenges can be viewed online through respective Netlify and Frontend-Mentor links; see respective README.md

Setup and Usage

Each solution contains Docker Compose files, used during the development process, which offers a chance to explore the designs locally - solutions are also hosted online at Netlify (see Live Demos).

Important

• Please refer to the corresponding README.md for each challenge for instructions on how to view the solution, and setup the local Dockerized environment if applicable.
• For env and secrets configuration, refer to Environment Variables Setup

Audiophile Ecommerce - README.md

Designo Agency - README.md

Invoice App - README.md

Kanban Task App - README.md

Project Feedback App - README.md

Live Demos

Challenge solutions hosted at Netlify

Audiophile Ecommerce

Designo Agency

Invoice App

Kanban Task App

Project Feedback App

Archive

License

Licensed under the MIT License – see LICENSE for details.

Acknowledgements