FansOnly is a decentralized loyalty platform that enables creators, artists, and influencers to connect directly with their fans in a transparent and rewarding way. The platform allows creators to offer exclusive content, experiences, or token-based rewards to their loyal supporters while maintaining full ownership and control over their digital identity.
FansOnly leverages blockchain technology to provide authenticity, trust, and verifiable engagement. Fans can earn rewards or special privileges for their support and participation, making interactions between creators and their audience meaningful and sustainable.
The goal of this frontend project is to design a clean, sleek, and modern user interface for FansOnly without the use of gradients. The UI emphasizes simplicity, clear structure, and strong iconography to deliver a visually appealing experience. It includes essential pages and components that define how fans and creators interact with the platform.
- Home Page: Introduces the FansOnly platform and its mission with a minimalist hero section and clear call-to-action buttons.
- Creator Dashboard: Displays creator stats, fan engagement metrics, and reward distribution in a simple, intuitive layout.
- Fan Profile Page: Allows fans to track their rewards, badges, and subscriptions.
- Navbar: Clean navigation bar with interactive icons and hover animations for smooth transitions.
- Footer: Minimalist footer with quick links, contact info, and copyright details.
- Animations: Subtle scroll-based animations using Framer Motion to enhance the viewing experience without clutter.
- Responsive Design: Fully responsive layout ensuring optimal experience on desktop, tablet, and mobile devices.
- Color Theme: Inspired by the uploaded reference — cool, modern tones with flat color usage (no gradients).
- Typography: Uses
Geist Sansfor a clean, geometric font aesthetic. - Icons: Extensive use of
lucide-reacticons to replace unnecessary text and improve UX clarity. - Motion: Controlled animations powered by Framer Motion for hover and scroll interactions.
- Layout: Balanced white space, consistent margins, and logical grouping of content.
- Accessibility: Focus on readable contrast, proper ARIA labeling, and keyboard navigation support.
| Tool | Purpose |
|---|---|
| Next.js 14 (App Router) | Core frontend framework for routing and page management |
| React 18 | Component-based UI architecture |
| Tailwind CSS | Utility-first CSS framework for styling |
| Framer Motion | Animation library for smooth transitions and scroll effects |
| Lucide React | Icon set for navigation, features, and visual indicators |
| Vercel Analytics | Tracks performance and engagement metrics |
fansOnly/
│
├── front-end/
│ ├── app/
│ │ ├── components/
│ │ │ ├── Navbar.tsx
│ │ │ ├── Footer.tsx
│ │ │ ├── HeroSection.tsx
│ │ │ ├── CreatorCard.tsx
│ │ │ ├── FanProfile.tsx
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── public/
│ ├── package.json
│ ├── tailwind.config.ts
│ ├── postcss.config.mjs
│ └── tsconfig.json
Users arrive at the home page and see a brief description of FansOnly’s purpose. They can click “Join as a Creator” or “Explore Fans” to continue.
- Creators can showcase their work and create reward tiers.
- They can manage fan engagement and view tokenized loyalty statistics.
- Creator dashboards present analytics like number of fans, interactions, and total rewards distributed.
- Fans sign up to follow creators they love.
- They can view creators’ pages, access exclusive content, and earn loyalty rewards.
- Fans can redeem or track rewards in their profile dashboard.
- The frontend simulates user interactions such as viewing content, liking posts, and unlocking tiers.
- All interactions are reflected visually through animations, cards, and progress indicators.
Ensure you have installed:
- Node.js v18 or higher
- npm or yarn
- Git (for version control)
-
Clone the repository
git clone https://github.com/yourusername/fansOnly.git
-
Navigate into the frontend directory
cd fansOnly/front-end -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser and visit
http://localhost:3000
- Integration with smart contracts for creator-fan reward logic.
- Wallet connection for decentralized identity management.
- NFT-based fan badges and verifiable support tokens.
- Decentralized content storage using IPFS or Arweave.
Contributions are welcome. Fork the repository, make your changes in a separate branch, and submit a pull request. Ensure your code is well-documented and follows the project’s formatting and linting rules.
This project is licensed under the MIT License. You are free to use, modify, and distribute the code with proper attribution.