Share Text Securely with AWS Amplify Gen 2
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-26 18:21:36

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/aws)*

## What I Built
<!-- Tell us what your app does! -->
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.
![capture of create snippet feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lab9k1iz0fgrnnt9ispx.gif)


### 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.

![capture of manage snippets view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fnz76t25kx5wj3xsqzq.gif)

### Inspiration
- [PrivateBin.io](https://privatebin.io/)
- [Pastebin.com](https://pastebin.com/)

## Demo and Code
<!-- Share a link to your Amplify App and source code. Include some screenshots as well. -->
- **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
<!-- Tell us which qualifying technologies you integrated, and how you used them. -->

<!-- Reminder: Qualifying technologies are data, authentication, serverless functions, and file storage as outlined in the guidelines -->
- **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!

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four integrations to qualify for the additional prize categories. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->


<!-- Thanks for participating! -->