Generatify is an open source Angular 14 SPA (Single Page Application) written in Typescript and built with TailwindCSS.
The main purpose of the application is to generate strong and secure passwords by randomly combining letters, numbers and characters.
In this way, the application prevents patterns that can make the password an easy target for brute force attacks.
You can visit a LIVE Demo here: Generatify LIVE Website
If you prefer to run this application locally you must first make sure you have the latest LTS version of nodejs installed.
By the time you have already installed a version of nodejs :
-
Open your IDE
-
Clone this repository
git clone https://github.com/rafitajaen/generatify.git -
IMPORTANT: Do no skip this step because npm < v7 don't install peerDependencies by default. More info.
npm install --legacy-peer-deps -
Build and serve your application. Run the following command on your console:
ng serve -
Open your browser http://localhost:4200
The source code follows a feature-driven structure proposed by Shijin Nath to make medium-sized applications easily scalable and maintainable. You can read more about his vision here.
src
├───app
│ ├───core
│ │ ├───components
│ │ │ ├───footer
│ │ │ └───navbar
│ │ ├───models
│ │ └───services
│ ├───features
│ │ ├───generator
│ │ │ └───components
│ │ │ ├───password-input
│ │ │ ├───password-strength
│ │ │ └───strength-score-badge
│ │ ├───hero
│ │ │ └───components
│ │ └───illustration
│ │ └───components
│ │ ├───larry-good
│ │ ├───larry-secure
│ │ ├───larry-strong
│ │ ├───larry-vulnerable
│ │ └───larry-weak
│ └───shared
│ └───components
│ ├───logo-icon
│ └───logo-text
├───assets
└───environmentsThis is the main service of the application. It depends on two npm packages:
-
generate-password-ts: This library was forked from the original Node.js version generate-password. This forked version was totally re-written in TypeScript from the original JS version and supports not only Node.js but also browsers without need of crypto-browserify. It generates random and unique passwords. -
@zxcvbn-ts: It is a password strength estimator inspired by password crackers. It recognizes and analyzes over 40 thousand common passwords using pattern matching and conservative estimation and filters out common first names, last names, popular words from Wikipedia and common words in many cultures, and recognizes common patterns like dates, repetitions (e.g. 'aaa'), sequences (e.g. 'abcd'), keyboard smashes (e.g. 'qwertyuiop'), and l33t speak.
The password service encapsulates in a single object all the necessary information obtained from the packages mentioned above:
interface Password {
value: string;
crackTime: string;
score: number;
}This service is also responsible of the state management and is consumed by the components through an observable.
Many people have contacted me asking me if they can use this code for their own website, and the answer to that question is usually yes, with attribution.
I value keeping this site open source, but as you all know, plagiarism is bad. I spent a non-trivial amount of effort building and designing this app for my portfolio, and I am proud of it!
All I ask of you is to not claim this effort as your own.
Yes, you can fork this repository. Please give me proper credit by linking back to my github account. Thanks!
Angular File Structure and Best Practices by Shijin Nath
Larry Character Illustrations.
I look forward to gaining new knowledge, sharing my experiences, collaborating and creating amazing products to make the world a better place!
🧠🏭🤝🌍