Clip Castle is a video sharing platform focused on making it easier to share gaming clips within my friend group. We previously used other sites to upload and share our clips with one another but limitations like filesize, length and resolution made it quite frustrating at time.
All of this paired with auto deletion making it almost impossible to look back at older clips made me take things into my own hands.
Clip Castle is currently still under development and is likely to stay as a private app unless there is enough public interest to possibly fund potential costs.
- NPM 9.6.2
- Vite 4.2.0
- React 18.0.28
- Firebase 9.19.1
- Registration and Login via Email & Password or Google account.
- Setting of display name and avatar.
- Ability to upload videos with an easy to use interface with drag and drop capability.
- Clips can be given a Title, Tags and a category.
- Users can view clips from other users.
- Profile page with basic user info and list of the users clips.
- Improving modularity and future proofing.
- Video conversion and compression to safe on storage without losing quality.
- Evaluating possiblity of public release.
- Clone the project.
- run
npm ito install dependencies. - Open up the
example.envin the root.
To have your own version of this project running locally we will have to do some setup for firebase.
- Create your own firebase project at console.firebase.google.com
- Once you're done creating the project you should see a banner like the one below.
- Select the web option to add a new web app to the project.
- Provide a name for the app and press register app.
- Now you should see a quick guide on how to add the firebase SDK to your project. Take note of the firebaseConfig object, this holds all the info we need to connect to our newly created app.
- Let's open the
example.envfile in the root of our project and set the values from the firebaseConfig to their corresponding variables in theexample.envfile. When we are done with this ourexample.envshould looks something like this.
- IMPORTANT: Make sure to rename the
example.envfile to.envotherwise our code won't be able to find and read it.
- Make sure you ran
npm i - Run
npm run dev - Once the app is up you will see a link in the terminal that brings you to the local address it's running on.
If you encontered any issues feel free to open an issue report or send me an e-mail to: [email protected]
Note: This app is still under active development, these screenshot reflect the current state and are not indicative of the final product and are subject to change.
