Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/johnnygerard/fem-password-generator-app

Password generator app
https://github.com/johnnygerard/fem-password-generator-app

angular frontend-mentor sass

Last synced: 16 days ago
JSON representation

Password generator app

Awesome Lists containing this project

README

        

# Frontend Mentor | Password generator app

This is my solution to the [Password generator app challenge](https://www.frontendmentor.io/challenges/password-generator-app-Mr8CLycqjh) from [Frontend Mentor](https://www.frontendmentor.io/).

[![project status](https://img.shields.io/badge/status-solution%20published-success?style=for-the-badge)](https://www.frontendmentor.io/solutions/password-generator-app-eiK7vKKiCE)

## Links

- [Live website](https://fem-password-generator-app-jgerard.vercel.app/)
- [Solution](https://www.frontendmentor.io/solutions/password-generator-app-eiK7vKKiCE)
- [Challenge](https://www.frontendmentor.io/challenges/password-generator-app-Mr8CLycqjh)
- [Lighthouse report](https://googlechrome.github.io/lighthouse/viewer/?gist=49d5189fa9195e7f4861b24d2078e4d9)

## Tech Stack

### Frontend

- [Angular 17](https://blog.angular.io/introducing-angular-v17-4d7033312e4b)
- [Sass](https://sass-lang.com/)

### Backend

- [Vercel](https://vercel.com/) (static hosting)

## Key Features

- Custom controls (slider and checkboxes)
- Web Cryptography API
- Clipboard API
- Unit and integration testing with Jasmine

## Automated Tasks

- Project initialization with shell script (see [PR #1](https://github.com/johnnygerard/fem-password-generator-app/pull/1))
- Vercel deployments:
- [Preview](.github/workflows/vercel-preview.yaml)
- [Production](.github/workflows/vercel-production.yaml)
- [CodeQL analysis](https://codeql.github.com/) (see [workflow](.github/workflows/codeql.yaml))

## Environment & Tools

- System: [Ubuntu](https://ubuntu.com/) (GNU/Linux)
- IDE: [Visual Studio Code](https://code.visualstudio.com/)
- Design: [Figma](https://www.figma.com/)

## VS Code Extensions

- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=github.copilot) (active subscription required)

## Screenshots

### Mobile

![mobile screenshot](screenshots/mobile.avif)

## About Frontend Mentor

[Frontend Mentor](https://www.frontendmentor.io/) challenges help you improve your coding skills by building realistic projects.

## Copyright

© 2024 Johnny Gérard