Building a React Password Manager

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px) - No Passwords View
• Extra Small (Size < 576px) and Small (Size >= 576px) - Masked Passwords View
• Extra Small (Size < 576px) and Small (Size >= 576px) - Show Passwords View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Passwords View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Masked Passwords View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Show Passwords View

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/password-manager-logo-img.png alt should be app logo
• https://assets.ccbp.in/frontend/react-js/password-manager-sm-img.png alt should be password manager
• https://assets.ccbp.in/frontend/react-js/password-manager-lg-img.png alt should be password manager
• https://assets.ccbp.in/frontend/react-js/password-manager-website-img.png alt should be website
• https://assets.ccbp.in/frontend/react-js/password-manager-username-img.png alt should be username
• https://assets.ccbp.in/frontend/react-js/password-manager-password-img.png alt should be password
• https://assets.ccbp.in/frontend/react-js/password-manager-search-img.png alt should be search
• https://assets.ccbp.in/frontend/react-js/no-passwords-img.png alt should be no passwords
• https://assets.ccbp.in/frontend/react-js/password-manager-stars-img.png alt should be stars
• https://assets.ccbp.in/frontend/react-js/password-manager-delete-img.png alt should be delete

Colors

Hex: #9ba9eb

Hex: #c3caea

Hex: #5763a5

Hex: #f8fafc

Hex: #454f84

Hex: #0b69ff

Hex: #94a3b8

Hex: #b6c3ca

Hex: #7683cb

Hex: #f59e0b

Hex: #10b981

Hex: #f97316

Hex: #14b8a6

Hex: #b91c1c

Hex: #ffffff

Hex: #0ea5e9

Hex: #64748b

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.