A modern, user-friendly decentralized application (DApp) for uploading, managing, and sharing files using Storacha (decentralized IPFS storage). Built with React and the @storacha/client library.
- ✅ Email-based Authentication - Secure login via Storacha
- ✅ Create Storage Spaces - Create unique, personal storage namespaces
- ✅ Use Existing Spaces - Join and collaborate on shared spaces
- ✅ File Upload - Upload any file type (images, documents, videos, etc.)
- ✅ IPFS Gateway Links - Instant shareable links for uploaded content
- ✅ File History - Persistent file tracking with localStorage
- ✅ File Management - Copy CIDs, view on gateway, delete from history
- 🌐 Built with React and Storacha Client
- 📦 IPFS/Content Addressing - Cryptographic file identification
- 🔐 Decentralized - No centralized servers, truly peer-to-peer
- 💾 Persistent Storage - Browser localStorage for file history
- 📱 Responsive Design - Works on desktop and mobile
- 🎨 Beautiful UI - Modern dark theme with smooth animations
- Node.js version 22 or higher
- npm version 7 or higher
- A Storacha account (free at storacha.network)
Check your versions:
node --version && npm --version- Clone the repository:
git clone https://github.com/aeemayo/airacha.git
cd airacha- Install dependencies:
npm install- Start the development server:
npm startThe app will open automatically at http://localhost:3000
1. Click "Create New Space"
2. Enter your email address
3. Check your email and click the verification link
4. Select a payment plan (if prompted)
5. Enter a space name (e.g., "my-storage")
6. Click "Create Space"
Once created, you'll see your Space DID - this is your unique identifier you can share with others.
1. Click "Use Existing Space"
2. Paste the Space DID shared by another user
3. Click "Use Space"
4. You can now upload and manage files in this shared space
1. Select a file from your device
2. Click "Upload File"
3. Wait for the upload to complete
4. View your file in the "Uploaded Files" section
Each uploaded file has:
- CID (Content IDentifier) - The cryptographic hash of your file
- Gateway Link - View button to access on IPFS gateway
- Copy CID - Share the hash with anyone
Gateway URL format:
https://{CID}.ipfs.storacha.link
airacha/
├── public/
│ ├── index.html
│ ├── manifest.json
│ ├── robots.txt
│ └── airacha.png # Background image
├── src/
│ ├── App.js # Main DApp component
│ ├── App.css # Styling
│ ├── index.js # React entry point
│ ├── App.test.js # Tests
│ └── setupTests.js
├── package.json
└── README.md
npm startRuns the app in development mode with hot reload.
npm run buildCreates an optimized production build in the build/ folder.
npm testLaunches the test runner in interactive watch mode.
Deploy your DApp to the web using any of these services:
npm install --save-dev gh-pages
npm run build
# Follow GitHub Pages setup in package.json# Install Vercel CLI
npm i -g vercel
# Deploy
vercel# Build first
npm run build
# Drag and drop 'build' folder to Netlify
# Or use Netlify CLIA unique storage namespace identified by a DID (Decentralized Identifier). Think of it as a personal or shared folder in the cloud.
A cryptographic hash of your file content. It's unique to the file data and can never change. Share CIDs to let others retrieve your files.
A server that retrieves content from the IPFS network using a CID. Storacha provides a default gateway at storacha.link.
A unique identifier for your space. Format: did:key:z6MkhaXgBZDvotDtL5M7bs...
- Storacha Docs: docs.storacha.network
- JS Client Guide: docs.storacha.network/js-client
- Awesome Storacha: github.com/storacha/awesome-storacha
Contributions are welcome! Please feel free to submit pull requests or open issues.
This project is open source and available under the MIT License.
- Storacha Network - Decentralized storage infrastructure
- IPFS - InterPlanetary File System
- React - UI library
- Create React App - Project bootstrapping
Need help? Check out:
Built with ❤️ using Storacha
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify