Warning
The Arctica app is still in prototyping and early development.
๐บ๐ธ English | ๐จ๐ณ ็ฎไฝไธญๆ
Decentralized Platform for Fandoms - Ship and Preserve Your Fanworks On-Chain
Arctica is a decentralized fandom portal that provides creators with a secure, open environment to share and preserve fan works. As an alternative to Tumblr, Pixiv, and Lofter, Arctica leverages blockchain technology to ensure long-term preservation and complete ownership of creative works.
- ๐ข On-Chain Storage: long-term content storage powered by Lens Protocol - Grove
- ๐ช Creator Tools: Text editor with image and text composition support
- ๐ Decentralized: Censorship-resistant with full creator ownership
- ๐ฅ Social Interaction: Follow, like, comment, and share functionality
- ๐ Content Discovery: Smart recommendations and tag-based categorization
- ๐ Multilingual: Multilingual interface support
- ๐ฑ Responsive Design: Optimized mobile and desktop experience
- ๐ฉต Fanac Culture: Features specifically designed for fannish activities
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Next.js 14.2.16 + TypeScript 5.0 + App Router | Modern React app with server-side rendering |
| Blockchain | Lens Protocol + Grove Storage | Decentralized content storage and social graph |
| Web3 Integration | Wagmi v2.15 + Viem v2.29 + ConnectKit | Wallet connection and blockchain interaction |
| State Management | Zustand 5.0 + TanStack Query v5.75 | Application state and server data management |
| UI Components | TailwindCSS 3.4 + Radix UI + shadcn/ui + Mantine UI | Component library and design system |
| Internationalization | next-intl 4.3 | Multi-language support |
| Real-time Communication | XMTP React SDK | messaging |
| Theme System | next-themes 0.4 + Mantine 8.2 | Dark/light theme switching |
Click the "Connect Wallet" button in the top right corner. Supports mail-login or and other major wallets.
- Navigate to "Upload" button
- Use the text editor to edit content
- Add images, tags, and descriptions
- Publish to on-chain storage
- Browse popular content on home page
- Use tags to filter content of interest
- Follow favorite creators
- Interact with content (like, comment, share)
- Edit profile and avatar
- View creation history
- Manage follow list
- Configure personal preferences
Arctica/
โโโ src/
โ โโโ app/ # Next.js App Router pages
โ โ โโโ [locale]/ # Internationalized routes
โ โ โ โโโ about/ # About page
โ โ โ โโโ feed/ # Home page
โ โ โ โโโ profile/ # User profile
โ โ โ โโโ p/[postid]/ # Post details
โ โ โ โโโ u/[user]/ # User profile pages
โ โ โ โโโ what-is-chip/ # onchain explanation page
โ โ โ โโโ ClientLayout.tsx # Client-side layout
โ โ โ โโโ layout.tsx # Root layout
โ โ โ โโโ page.tsx # Home page
โ โ โโโ Web3Provider.tsx # Web3 context provider
โ โ โโโ globals.css # Global styles
โ โ โโโ manifest.json # PWA manifest
โ โ โโโ favicon.ico # Site favicon
โ โโโ components/
โ โ โโโ auth/ # Authentication components
โ โ โโโ comment/ # Comment system
โ โ โโโ dialogs/ # Dialog components
โ โ โโโ editer/ # Rich text editor
โ โ โโโ feed/ # Feed components
โ โ โโโ footer.tsx # Site footer
โ โ โโโ global-modals.tsx # Global modal components
โ โ โโโ header.tsx # Site header
โ โ โโโ home/ # Home page components
โ โ โโโ loading.tsx # Loading components
โ โ โโโ post/ # Post-related components
โ โ โโโ providers/ # Context providers
โ โ โโโ search/ # Search functionality
โ โ โโโ token-id-display.tsx # Token ID display component
โ โ โโโ ui/ # Reusable UI components
โ โ โโโ user/ # User-related components
โ โ โโโ user-avatar.tsx # User avatar component
โ โโโ contexts/ # React contexts
โ โโโ hooks/ # Custom React hooks
โ โโโ i18n/ # Internationalization config
โ โโโ lib/ # Utility libraries and config
โ โโโ middleware.ts # Next.js middleware
โ โโโ stores/ # State management
โ โโโ styles/ # Additional styles
โ โโโ types/ # TypeScript type definitions
โ โโโ utils/ # Utility functions
โโโ messages/ # Internationalization messages
โโโ public/ # Static assets
โโโ txt/ # Documentation and config
โโโ components.json # shadcn/ui configuration
โโโ next.config.mjs # Next.js configuration
โโโ package.json # Project dependencies
โโโ postcss.config.mjs # PostCSS configuration
โโโ tailwind.config.ts # Tailwind CSS configuration
โโโ tsconfig.json # TypeScript configuration
โโโ README.md
- Node.js 22+ and pnpm 9.7+
- Git version control
# Clone repository
git clone https://github.com/fae-foundation/app.git
cd app
# Install dependencies
pnpm install
# Start development server
pnpm devVisit http://localhost:3000 to view the application.
# Copy environment template
cp .env.example .env.local
# Configure environment variables
# .env.local
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
NEXT_PUBLIC_ALCHEMY_ID=kkkkkkkkkkkkkkkkkkkkk
NEXT_PUBLIC_ENVIRONMENT=development
NEXT_PUBLIC_APP_ADDRESS_TESTNET=0xDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
LENS_API_KEY_TESTNET=bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb # Development
pnpm dev # Start development serverpnpm build # Build production version
pnpm start # Start production server
pnpm lint # Code linting
# Type checking
pnpm type-check # TypeScript type checking
# Code formatting
pnpm format # Code formatting
pnpm format:check # Check code formatArctica currently supports the following languages:
- ๐บ๐ธ English
- ๐จ๐ณ Chinese Simplified
Language switching is available in the language selector at the left of the page.
We welcome community contributions! Please see our Contributing Guide for detailed information on how to get started.
For detailed todo items, please see todos.md.
This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.
- ๐ฎ Mail:
[email protected] - ๐พ Reports: Issues
- ๐ฌ Discussion: Discussions
โญ If this project helps you, please give us a Star!
Made with ๐ฉต by the FAE Foundation