ArkLinks
A modern, customizable link-in-bio solution built with React and Appwrite.
Features
- Setup Wizard - Easy first-time configuration
- Link Management - Add, edit, reorder your links
- Social Media - Connect all your social profiles
- Theme Customization - Colors, fonts, button styles
- Gallery - Showcase your past works
- App Downloads - iOS/Android app links with Coming Soon badge
- QR Code Generator - Custom QR codes with your logo
- Coming Soon - Mark links/apps as coming soon
- Mobile Responsive - Looks great on all devices
Quick Start
1. Setup Appwrite
Create a project on Appwrite Cloud or self-hosted instance.
The database, collections, and bucket are already created. Note your:
- Endpoint URL (e.g.,
https://cloud.appwrite.io/v1) - Project ID
2. Configure Environment
cp .env.example .env
Edit .env:
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your-project-id
3. Run Locally
npm install
npm run dev
4. Deploy with Docker
# Set environment variables
export VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
export VITE_APPWRITE_PROJECT_ID=your-project-id
# Build and run
docker-compose up -d --build
Project Structure
src/
├── components/
│ └── AdminLayout.jsx # Admin sidebar layout
├── lib/
│ └── appwrite.js # Appwrite SDK configuration
├── pages/
│ ├── Home.jsx # Public profile page
│ ├── ComingSoon.jsx # Coming soon page
│ └── admin/
│ ├── Setup.jsx # First-time setup wizard
│ ├── Dashboard.jsx # Admin dashboard
│ ├── Links.jsx # Manage links
│ ├── Social.jsx # Social media links
│ ├── Theme.jsx # Theme customization
│ ├── Gallery.jsx # Gallery management
│ ├── Apps.jsx # App download links
│ └── QRCode.jsx # QR code generator
├── App.jsx # Main router
├── main.jsx # Entry point
└── index.css # Tailwind CSS
Appwrite Database Structure
Database: arklinks
| Collection | Purpose |
|---|---|
clients |
Business profile info |
links |
Custom links |
socialLinks |
Social media profiles |
themes |
Color and style settings |
gallery |
Portfolio images |
apps |
App download links |
Bucket: arklinks-media - Stores logos and gallery images
Deployment for Each Client
- Clone the repo
- Set environment variables for Appwrite
- Deploy with Docker:
docker-compose up -d --build
- Visit the URL - the setup wizard will guide through configuration
- Each deployment creates its own records in the central Appwrite database
Tech Stack
- React 18 - UI framework
- Vite - Build tool
- Tailwind CSS - Styling
- React Router - Navigation
- Appwrite - Database & Storage
- qrcode.react - QR code generation
- Lucide React - Icons
- Docker + Nginx - Production deployment
License
MIT