├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc.json ├── LICENSE ├── README.md ├── assets ├── download.gif ├── thumbnail.svg └── upload.gif ├── index.html ├── package.json ├── public └── icons │ ├── icon-128x128.png │ ├── icon-144x144.png │ ├── icon-152x152.png │ ├── icon-192x192.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── icon-72x72.png │ └── icon-96x96.png ├── src ├── App.tsx ├── ViewController.tsx ├── assets │ ├── apple-touch-icon.png │ └── favicon.png ├── components │ ├── Footer.tsx │ ├── Hero.tsx │ ├── HostedFileItem.tsx │ ├── LoaderScreen.tsx │ ├── Navbar.tsx │ └── icons │ │ ├── apple.tsx │ │ ├── download.tsx │ │ ├── file-magnifying-glass.tsx │ │ ├── github.tsx │ │ ├── google.tsx │ │ ├── heart.tsx │ │ ├── logo-color.tsx │ │ ├── logo-white.tsx │ │ ├── moon-stars.tsx │ │ ├── server.tsx │ │ ├── sun.tsx │ │ ├── upload.tsx │ │ └── user.tsx ├── main.tsx ├── preact.d.ts ├── services │ ├── auth.ts │ ├── error-handling.ts │ ├── file.ts │ ├── firebase.ts │ └── user-data.ts ├── util │ ├── base.css │ ├── file-info.ts │ ├── firebase-config.ts │ ├── theme.ts │ └── toast.ts ├── views │ ├── auth.tsx │ ├── download.tsx │ ├── file.tsx │ ├── server.tsx │ └── upload.tsx └── vite-env.d.ts ├── tsconfig.json ├── vite.config.ts ├── webmanifest.config.ts └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: ['https://www.buymeacoffee.com/colegawin'] 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .idea -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "embeddedLanguageFormatting": "auto", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxBracketSameLine": false, 8 | "jsxSingleQuote": false, 9 | "printWidth": 120, 10 | "proseWrap": "always", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": true, 14 | "singleQuote": false, 15 | "tabWidth": 2, 16 | "trailingComma": "es5", 17 | "useTabs": false, 18 | "vueIndentScriptAndStyle": false, 19 | "importOrder": [ 20 | "(^(preact\\/))(.*)", 21 | "^[^~.]", 22 | "^(~|[.])(.*)$", 23 | "^[./]" 24 | ], 25 | "importOrderSeparation": true 26 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Cole Gawin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | LIGHTNING SHARE 4 | 5 | 6 | 7 |
8 |
9 | 10 |

11 | 12 | 13 | 14 | Hosted on Vercel 15 | 16 | 17 | 18 | 19 | 20 | MIT License 21 | 22 | 23 | 24 |

25 | 26 |
27 | 28 |
29 | 30 | # ⚡️ LIGHTNING SHARE 31 | 32 | **a project created by [Cole Gawin](https://github.com/chroline)** 33 | 34 |
35 | 36 | ### [Check it out](https://lightning-share.vercel.app) | [Learn how it's made](/#) | [Support the project](https://github.com/chroline/lightning-share#%EF%B8%8F-support-this-project) 37 | 38 |
39 | 40 |
41 | 42 | --- 43 | 44 |
45 | 46 | # 👋 Introduction 47 | 48 | LIGHTNING SHARE is a file hosting and sharing service powered by [Firebase](https://firebase.google.com). Users can upload files under 20MB and download hosted files using a "share code" (a short 3 word code provided by [words-aas](https://github.com/chroline/words-aas)). After uploading a file, the file uploader can retrieve the share code and share it with others or delete the file at any time. Files will automatically be deleted after 21 days (WIP). 49 | 50 | # 🚀 Usage 51 | 52 | |**Upload** | **Download** | 53 | |---|---| 54 | |![Uploading a file](https://raw.githubusercontent.com/chroline/lightning-share/main/assets/upload.gif)|![Downloading a file](https://raw.githubusercontent.com/chroline/lightning-share/main/assets/download.gif)| 55 | 56 | # 🧑‍💻 Development 57 | 58 | 1. 📂 Clone this repo 59 | 60 | 2. 📦 Install dependencies with `yarn` 61 | 62 | 3. 🏃 Start the Vite dev server with `yarn dev` 63 | 64 | 4. 🌎 Visit the provided link in your browser 65 | 66 | ## Firebase 67 | 68 | Firebase is used to power the authentication, database, and file storage for LIGHTNING SHARE. For security reasons, the production LIGHTING SHARE Firebase project is not available for local development on `localhost`. As such, you will need to create your own Firebase project for local development purposes. 69 | 70 | On your development Firebase project: 71 | 72 | 1. Enable anonymous authentication. 73 | 2. Ensure `localhost` is an authorized domain for authentication. 74 | 3. Enable Firestore Database and Storage features. 75 | 76 | Replace the [`firebaseConfig` variable](https://github.com/chroline/lightning-share/blob/main/src/util/firebase-config.ts#L1) in [`src/util/firebase-config.ts`](https://github.com/chroline/lightning-share/blob/main/src/util/firebase-config.ts) with the config for your Firebase project. 77 | 78 | # ❤️ Support this project 79 | 80 | If you want to say thank you and/or support active development of LIGHTNING SHARE: 81 | 82 | - Add a GitHub Star to the project! 83 | - Tweet about the project on your Twitter! 84 | - Tag [@colegawin_](https://twitter.com/colegawin_) and mention "LIGHTNING SHARE" 85 | - Leave a comment or a reaction on the tutorial of how this project was built! 86 | 87 | Thanks so much for your interest in supporting LIGHTNING SHARE! 88 | 89 | _**PS:** consider sponsoring me ([Cole Gawin](https://colegaw.in)) to continue the development of this project on [BuyMeACoffee](https://buymeacoffee.com/colegawin) :)_ 90 | -------------------------------------------------------------------------------- /assets/download.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/assets/download.gif -------------------------------------------------------------------------------- /assets/thumbnail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/upload.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/assets/upload.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | LIGHTNING SHARE 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lighting-share-vite", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "tsc && vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@chakra-ui/react": "^1.6.5", 11 | "@emotion/react": "^11.4.0", 12 | "@emotion/styled": "^11.3.0", 13 | "@heroicons/react": "^2.0.15", 14 | "constate": "^3.3.0", 15 | "filepond": "^4.28.2", 16 | "filepond-plugin-image-preview": "^4.6.11", 17 | "firebase": "9.0.0-beta.7", 18 | "framer-motion": "^4.1.17", 19 | "preact": "^10.5.13", 20 | "react-filepond": "^7.1.1", 21 | "react-helmet": "^6.1.0", 22 | "react-use": "^17.2.4", 23 | "rxjs": "^7.3.0" 24 | }, 25 | "devDependencies": { 26 | "@preact/preset-vite": "^2.5.0", 27 | "@trivago/prettier-plugin-sort-imports": "^2.0.2", 28 | "@types/react-helmet": "^6.1.2", 29 | "prettier": "^2.3.2", 30 | "tslib": "^2.3.0", 31 | "typescript": "^4.3.2", 32 | "vite": "^4.1.2", 33 | "vite-plugin-pwa": "^0.14.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-128x128.png -------------------------------------------------------------------------------- /public/icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-144x144.png -------------------------------------------------------------------------------- /public/icons/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-152x152.png -------------------------------------------------------------------------------- /public/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-192x192.png -------------------------------------------------------------------------------- /public/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-384x384.png -------------------------------------------------------------------------------- /public/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-512x512.png -------------------------------------------------------------------------------- /public/icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-72x72.png -------------------------------------------------------------------------------- /public/icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chroline/lightning-share/8f5a6b90e0c991d9ff5812a99efe21b43d03d64b/public/icons/icon-96x96.png -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ChakraProvider, ColorModeScript, extendTheme, VStack } from "@chakra-ui/react"; 2 | import "filepond/dist/filepond.min.css"; 3 | import { Helmet } from "react-helmet"; 4 | import { useAsync, useObservable } from "react-use"; 5 | 6 | import { ViewController, ViewControllerProvider } from "./ViewController"; 7 | import { Footer } from "./components/Footer"; 8 | import { Hero } from "./components/Hero"; 9 | import { LoaderScreen } from "./components/LoaderScreen"; 10 | import { Navbar } from "./components/Navbar"; 11 | import AuthService from "./services/auth"; 12 | import ErrorHandlingService from "./services/error-handling"; 13 | import FirebaseService from "./services/firebase"; 14 | import "./util/base.css"; 15 | import theme from "./util/theme"; 16 | 17 | function App() { 18 | const setupState = useAsync(async () => { 19 | try { 20 | await FirebaseService.I.init(); 21 | } catch (e) { 22 | ErrorHandlingService.I.notifyUserOfError("Error while initializing Firebase", e); 23 | return; 24 | } 25 | try { 26 | await AuthService.I.authenticate(); 27 | } catch (e) { 28 | ErrorHandlingService.I.notifyUserOfError("Error during anonymous authorization", e); 29 | return; 30 | } 31 | }); 32 | 33 | const userId = useObservable(AuthService.I.userId$); 34 | 35 | return ( 36 | 37 | 38 | 39 | 40 | 41 | {(setupState.loading || setupState.error) && } 42 | 43 | 44 | 45 |