Share Text Securely with AWS Amplify Gen 2

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

SecureShare allows users to share text snippets securely. The user has the option to set a time for the snippet to expire, whether or not the snippet should be deleted ("burned") after being viewed, and a password for additional privacy.

When using a password, the snippet content is encrypted with the password (which isn't sent to the backend or stored anywhere), so even someone with access to the database can't decrypt it!

Sharing snippet

As a user, you can create a snippet and share it with someone else by sharing the link to it and, optionally, the password to view it. If there's no password set, then anyone with the link can view the snippet.

Managing snippets

The core functionality of the app is creating, sharing, and viewing shared snippets. While these features don't require an account, being logged allows the user to be able to manage their shared snippets.

Inspiration

• PrivateBin.io
• Pastebin.com

Demo and Code

• Demo app: https://main.d26ottewuge4ec.amplifyapp.com/
• Code: https://github.com/henryjw/secure-share-app

Journey

This was an interesting project for me because I've primarily focused on backend for most of my career. I hadn't implemented any significant frontend features in over a year and hadn't used react in even longer than that. So, I'm proud that I was able to implement as many features as I did for this project.

I had an initial list of features I wanted to implement and most of them were "nice-to-have" or "optional" to keep the scope realistic given my lack of frontend development experience. The only feature I didn't get to implement was adding the ability to add a file attachment to the snippet since it would have taken more time to implement and test.

Integrations

• Data: The snippets are stored in the database so they can be retrieved later
• Authentication: Used for login / signup and account management
• File storage: Not used
• Serverless functions: Not used

Connected Components and/or Feature Full: Connected components; not feature full

Used connected components for for login / sign up and account management. I later learned that Amplify can also generate connected components based on the data schemas to further simplify development. However, I had already created most of the UI by that time so I didn't get a chance to use them. Maybe next time!