How I built & deployed a Secure File Sharing website with Javascript, HTML & CSS
Tags: javascript, html, css, beginners
Published: 2022-10-10 18:27:28

- **Secure Files** - https://www.securefiles.cf

- Secure Files is a simple, lightweight, and fast file-sharing service. It is written in Javascript and uses the Firebase platform for storage & database. It is currently hosted by AWS Amplify.

- For Code & Project details visit my GitHub repository - https://github.com/Harsh-2002/SecureFiles

- You can build & create your own website by using this code.


![https://www.securefiles.cf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udt5siieevc6fg3rjstm.png)

**How to use ?**

1. Visit **[Securefiles](https://www.securefiles.cf)**.
2. Upload a file.
3. Wait for the file to be uploaded.
4. Share the unique ID of the file with the receiver.
5. Receiver can access the file using the unique ID of the file.
6. Once the file is received by the receiver, the file is automatically deleted from Firebase Storage.


**How it works?**

1. Secure Files uses **Firebase** to store files. It uses **Firebase Storage** to store files and **Firebase Realtime Database** to store metadata of files.

2. When a file is uploaded, it is stored in Firebase Storage and a **unique ID is generated** for the file. This ID is **used to access the file**.

3. The **metadata** of the file is **stored in Firebase Realtime Database.** This metadata **includes the url** to the file and the unique ID of the file.

4. When a file is shared, the unique ID of the file is shared. This **ID is used to access the file**.

5. Receiver of the file can **access the file** using the **unique ID** of the file.

6. When the file is **received** by the receiver using the unique ID, the file is downloaded from Firebase Storage and **displayed to the receiver**.

7. **Once** the file is received by the receiver, the file is **automatically deleted from Firebase Storage**.

8. This way the **file is shared securely**.

**How you can deploy this site?**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owcok3mo07c51hur96oh.png)
- 1. For deploy this site on cloud you **need** a **Hosting Service Provider & Storage for Database managemen**t.
- 2. Don't worry I will give you **free resources** to **deploy** this site. For hosting service **Vercel is free** and For **Storage & Database** we use **Google Firebase** (Basic plan is free).
- 3. You have to **edit** & **add Firebase Project Configuration details in javascript file to work**. Use a Code Editor like VS Code.
- 4. **Create a project** in firebase & give it a name anything then **create these resources "Storage", "Realtime Database", "Firestore Database"**.
- 5. You have to **change Project rules** in **Storage & Realtime Database** to **"true"** it **allows users** to upload & download file without any **restriction** & **authentication**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/916l3es4phwctjnzze1y.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fr6nsam4r64yclxtdikr.png)
- 6. **Run & Test project** locally on your pc to make sure everything works well!
- 7. **Create** a repository on **Github** and **upload all files there**. Make sure the project repository is **public** not private.
- 8. Go and create account on **vercel.com** to deploy your project **connect your GitHub account** and then **select repository** which you've created then continue... deploy. In AWS use **AWS Amplify** to deploy your project. Here for my project I'm using aws free tier.
- 9. **Open link** after successful deployment & **Done!**
- 10. You can also **connect** your project to a **custom domain**.


_Need help? Ask in comment section._


Thanks to Varshith V Hegde.

Keep reading & learning.
Remember, I'm on social media.

https://www.securefiles.cf