FileSyncDrive
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 00:00:47

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

## What I Built
<!-- Tell us what your app does! -->
FileSyncDrive is an electron desktop app that listens for changes on a users local files and syncs to the cloud. it creates a folder "sync_folder" in the users home directory, any changes made to that folder will be reflected on the amplify storage.

## Demo
<!-- Share a link to your deployed solution on Amplify Hosting, and include some screenshots here. -->

Link to a shared file: https://main.d4c4zbq9x7suw.amplifyapp.com/?file=picture-submissions/70ec69fc-50d1-70f6-7731-0e68374df71b/sync_folder/New%20Text%20Document.txt

_i used the starter template for the shared file site, ran out of time_

[Desktop App Repo](https://github.com/Godwin9911/amplify_file_sync)
_*Building the .exe file was a challenge due to my limited hardware and time_

![Login Amplify Authenticator Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94ljyxbd6ndk6wbnbq1b.png)
<figcaption>Login Amplify Authenticator Component</figcaption>

![Editing a file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwyq6ogx4diu2wpvd36s.gif)
<figcaption>File Changes Synced, notice the time change.</figcaption>

![Screenshot 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voqg3hkh14hmb2notv8p.png)
<figcaption>Screenshot 1</figcaption>

![Screenshot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3uiaszkm6sou7rj6ldl.png)
<figcaption>Screenshot 2</figcaption>

![Screenshot 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hig4denbi0o4gh7j3hcn.png)
<figcaption>Screenshot 3</figcaption>


![A Share File Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpt7avtxhb73vnvgxkqj.png)
<figcaption>File link can be shared for users to access via the web</figcaption>

Tested on Windows 11

## Journey
<!-- Tell us about your process, the services you incorporated, what you learned, anything you are particularly proud of, what you hop to do next, etc. . -->

**Connected Components and/or Feature Full**

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four features: data, authentication, serverless functions, and file storage. -->

### Amplify UI Components
[Amplify UI Components](https://ui.docs.amplify.aws/react/components) was used to quickly scaffold our UI. it contains all the components you'll mostly need for a UI.

### Authentication
[Amplify Authenticator](https://ui.docs.amplify.aws/react/connected-components/authenticator) was used to setup our Auth flow. it was a straight forward setup with a single react Component.

### File Storage
[Amplify Storage](https://docs.amplify.aws/react/build-a-backend/storage/) enabled us to instantly upload our modified files on local, also we can easily get our uploaded files from the storage as well as the download url.

In the future the storage space will be limited for the user, also social authentication will be added for easy sign up.

<!-- 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). -->

[Desktop App Repo](https://github.com/Godwin9911/amplify_file_sync)
_*Building the  .exe file was a challenge due to my limited hardware and time_

[Repo for shared file on the web](https://github.com/Godwin9911/amplify-vite-react-template)


<!-- Thanks for participating! -->