Skip to content

SStranks/front-end-mentor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

119 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Repository Banner

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

Top Language Badge RepoSize Badge Last Commit Badge

CodeQL Badge Lint Badge Vitest Badge


Table of Contents


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.

Note: 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

TypeScript React Sass HTML5 Webpack

Backend

Express MongoDB

Infrastructure

Docker NGINX

Testing

Jest Testing Library Google Chrome Firefox Browser

Tools

Figma Postman Prettier ESLint Stylelint Git

Repository Management

PNPM Node.js GitHub Actions EditorConfig

Architecture

Architecture Diagram

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

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

Please refer to the corresponding README.md for each challenge for instructions on how to setup the local Dockerized environment.

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

License

Licensed under the MIT License – see LICENSE for details.

Acknowledgements

Frontend Mentor CSS-Tricks MDN Web Docs Stack Overflow Stack Exchange freeCodeCamp Udemy

About

Front-End-Mentor - Guru Level Challenges

Topics

Resources

License

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors