🎨 WDC #10 Can you re-create Randall's password generator?

Wow! It’s our tenth #WeekendDesignChallenge and it only took 2 years to reach this milestone :joy:

The level of creativity from everyone these past few weeks has been so impressive and personally, I love seeing the support and constructive feedback that gets shared in each #wdc discussion.

The Memory Puzzle challenge last week was pretty “blocks intensive” so this week let’s try something more design/UI oriented - your challenge this week is to re-create a password (or passphrase) generator.

Password Generators

One of my favourite passphrase generators is called https://correcthorsebatterystaple.net/. It was actually inspired by one of my favourite webcomics:

So, I’ve found a couple of reference designs we can use as inspiration to build really beautiful password (or passphrase) generators.

Password Manager App

Check out this gorgeous Password Manager App by Eryk Piecuch over on dribbble:

All the passwords are stored in a “valut”, you have control over how many and what type of characters are used and there are screens for a user profile and app settings

Password Generator

This password generator by Amarjit Pramanik has a really clean, minimal design with just 5 colours in the palette. There is plenty of spacing around the icons and each section is clearly defined on the screen. I’m not quite sure how you gauge “pronounceability”, but apart from that everything else should be achievable in Thunkable.

Passnip

Passnip is actually a website designed by Hachi Studio but I thought it had a clever name and a nice UI so I’m including it too.

The colour palette is modern and the icons and checkboxes are really easy to use and to understand. Again, almost everything here (with the exception of “Copy to Clipboard”) should be comfortably within the capabilities of Thunkable.

The Challenge

Design a beautiful password (or passphrase) generator with as many, or as few, features as you like.

As you can see from the screenshots there are lots of different ways you can go with the design. If you really want to do a deep dive on the functionality of this one there are so many “stretch goals” you could set yourself like

  • adding options for number and symbols,
  • setting the delimiter,
  • regenerate the password,
  • “save” different passwords for different accounts,
  • share you password via SMS or email(?),
    *offer a Dark Mode version of your app…

That’s just the first few ideas that spring to mind, I’m sure you’ll come up with plenty of your own ingenious solutions.

Please Note: In this challenge we’re focusing on the design and logic of a password generator rather than building a replacement for something like LastPass or OnePassword. Any passwords generated should NOT be used in any of your online accounts.

Notification Squad

Tagging folks who have been following the challenges over the past couple of weeks, thank you for helping us spread the word!

@luv.ak.tech @manyone @roumak-coder @kartik14 @thg @tatiang @muhaeminz @krithikvasan6m1 @aanshi6 @jared @Chris @skulamester @muneer @cyberdriver @catsarisky @codeswept @codeemaker @eko.devs.apploroceo @japa6225a @jared @Chris @aanshi6 @muhaeminz @skulamester @jane @goutham @johnmc @Power_Thunkers @Joannie_Huang

Special Guest Thunker

Thanks a million to @jane for taking part in the challenge last week. This week the Special Guest Thunker will be our CEO @arun - looking forward to seeing what Arun and the rest of the Community comes up with for the tenth Weekend Design Challenge.

Best of luck!

4 Likes

Summary of Entries:

PassNerds by @codeswept


Pass Gen by @manyone


Random Password Generator by @codeemaker

image


EncryptText by @tatiang


CHBS by @domhnallohanlon


Design Challenge 10 by @arun


Password by @roumak-coder


Password Generator by @luv.ak.tech

3 Likes

Community Resources:

Links that are shared by the Community during the challenge.

2 Likes

@domhnallohanlon Can we use the drag and drop interface??

1 Like

@codeemaker, ideally everyone would use the Drag and Drop interface!

1 Like

OK so can we use it??

1 Like

yes, please use the DnD interface, thanks!

1 Like

hi @domhnallohanlon i really appreciate what you are doing but for the next challenge can we do thing that you can get ur ideas without referring to other ideas we can have a poll based on ur different ideas

1 Like

Absolutely @eko.devs.apploroceo thanks for the feedback! :smiley:

Just as an FYI the screenshots above are really for reference only and I was mainly trying to illustrate how vaired the designs can be for apps that have similar functionality. By all means feel free to work away on you own concept! :+1:

1 Like

:ok_hand:

1 Like

this might be fun

1 Like

Dom, I think it’s important to note that many of our solutions to this are not going to have an especially safe “vault”. It’s a fun challenge, but anyone thinking about developing this WDC into an in-production app needs to get some education on how to really secure any stored passwords first. :slight_smile:

Edit: Much better, thanks Dom!

4 Likes

I like nothing more than Friday, after you’ve started these WDCs! Will try this fun new challenge! Thanks for always sharing inspiration material…

4 Likes

100% agree @catsarisky, I’ve updated the “Challenge” section above to reflect we should focus on the design/logic of a demonstration app rather than the privacy/security requirements of a production app. Let me know if there’s anything else I can add to clarify this! :+1:

3 Likes

@domhnallohanlon How do I change A switch’s color?

I have been working on this project for the past few days,
Yesterday I finished coding it ,And I saved some passwords using stored variables I then re-opened the app It was there but when I open it today There are No passwords.
How do I fix this??

How are you testing the project? If you’re using a mobile device, the stored variables should keep their values.

1 Like

@tatiang I am using the preview on device feature

Thank you I tried it on my mobile and It worked!!

1 Like

Looks good…

2 Likes

Thanks but I thought it was not good enough so I deleted it

This is a known bug @codeemaker - we’re working on it at the moment and hopefully should have an update towards the end of next week.

For the time being I’d recommend sticking with the default switch colours for now.

Thanks!