Frontend Mentor Challenge Solutions

A showcase of my front-end skills. This collection features my solutions to various Frontend Mentor challenges, each providing a real-life workflow experience. From designs, assets, and style requirements, I have honed my skills in building responsive and visually appealing websites. Explore my solutions and see the live demos.

Homepage

Explore all my solutions here: avisek.github.io/frontend-mentor-solutions

Project structure and how it works

This is a monorepo that hosts all my Frontend Mentor solution source codes and their deployments.

• /homepage: The source code for the homepage is located in this directory. The dev server is configured to serve this directory as the base path (/frontend-mentor-solutions/).

• /solutions: The source codes of all my solutions are located in this directory. Each subdirectory in this directory is served as a subpath of the base path (/frontend-mentor-solutions/xxx/).

• /solutions.yaml: This file stores the declaration and data of all the solutions. During build and development this file is automatically converted and mounted as JSON at the path /frontend-mentor-solutions/solutions.json.

• /public: This directory has the common static files which are shared accross homepage and solution pages.

• /dist: This directory contains the production output, which is generated by running pnpm build.

Local setup and usage

• Clone the repository:

  git clone https://github.com/avisek/frontend-mentor-solutions.git
  cd frontend-mentor-solutions

• This project uses pnpm package manager. To install pnpm, run:

  npm install -g pnpm

• Install project dependencies:

  pnpm i

• Start the dev server:

  pnpm dev

• Access the Application:

  Press o to open the application on your web browser or navigate to this url: http://localhost:3368/frontend-mentor-solutions/

• Build the production package:

  pnpm build

• Build and preview with a static web server:

  pnpm preview

License

This project is licensed under the MIT License.