FourBelieve Documentation
Complete guide to building with FourBelieve - A token discovery and launch portal
What is FourBelieve?
FourBelieve is a modern web3 dashboard for discovering and launching tokens via Twitter bot. The platform provides a seamless experience for creators to launch tokens and for users to discover trending launches.
Key Features:
- X/Twitter OAuth authentication
- Token launch discovery and exploration
- Real-time engagement metrics from Twitter
- Creator dashboard for managing launches
- Token creation and configuration
- Trading volume tracking
- Responsive design with dark mode
Tech Stack
Core
- Next.js 16 (App Router)
- TypeScript
- React 19
UI & Styling
- TailwindCSS v4
- shadcn/ui
- Framer Motion
- Lucide Icons
State & Data
- Zustand (Auth state)
- React Query (Data fetching)
- Axios (API client)
Other
- next-themes (Dark mode)
- date-fns (Date formatting)
- Sonner (Toast notifications)
Getting Started
Installation
Clone the repository and install dependencies:
npm installRunning the Development Server
npm run devOpen http://localhost:3000 in your browser.
API Reference
Authentication
Required
Most API endpoints require authentication via Bearer token. The token is automatically included in requests via axios interceptors.
Authorization: Bearer <access_token>Endpoints
GET /login
Public
Redirects to X/Twitter OAuth login page.
Query Parameters:
redirect_url(optional): URL to redirect after login
const loginUrl = api.login('http://localhost:3000/dashboard');
window.location.href = loginUrl;GET /auth/callback
Public
Handles OAuth callback from X/Twitter.
Query Parameters:
code(required): OAuth authorization codestate(required): OAuth state parameter
const response = await api.authCallback(code, state);
// Tokens are automatically stored in localStorageGET /users/me
Protected
Get current authenticated user profile.
const user = await api.getMe();
// Returns: { id, username, avatar, email, createdAt }GET /launches
Public
List token launches with filtering and sorting options.
Query Parameters:
filter: "all" | "not_launched" | "launched"order_by: Column to sort by (e.g., "created_at", "favorite_count")desc_order: Boolean, default truelimit: Number of results (max 500)offset: Pagination offset
const launches = await api.getLaunches({
filter: 'launched',
order_by: 'favorite_count',
desc_order: true,
limit: 50,
offset: 0
});POST /create_token
Protected
Create a new token launch request.
Required Fields:
token_name: Token nametoken_symbol: Token symboldesc: Descriptionmedia_url: Image URLx_mode: Boolean, use X mode launch
const launch = await api.createToken({
token_name: "My Token",
token_symbol: "MTK",
desc: "Token description",
media_url: "https://example.com/logo.png",
x_mode: true,
website: "https://example.com",
twitter: "@mytoken",
telegram: "https://t.me/mytoken",
raisedTokenSymbol: "BNB",
// ... optional fields
});POST /notifications
Protected
Get user notifications from X/Twitter timeline.
Request Body:
cursor(optional): Pagination cursorcount(optional): Number of notifications, default 40
const notifications = await api.getNotifications({
cursor: null,
count: 40
});POST /refresh
Public
Refresh access token using refresh token.
Query Parameters:
refresh_token(required): Refresh token
const tokens = await api.refreshToken(refreshToken);
// Returns: { access_token, refresh_token }Components
LaunchCard
Displays a token launch in a horizontal card format with image, details, and engagement metrics.
import { LaunchCard } from "@/components/LaunchCard";
<LaunchCard launch={launchData} />Props:
launch: Launch object (see Type Definitions)
Features:
- Square thumbnail image with network logo overlay
- Token name, symbol, and description
- Trading volume display with smart formatting (K/M/B)
- Twitter engagement metrics (likes, views)
- Clickable token address and tweet links
- Hover animations with Framer Motion
- Responsive design for mobile and desktop
LaunchTable
Table view for displaying multiple launches with sortable columns.
import { LaunchTable } from "@/components/LaunchTable";
<LaunchTable launches={launchesArray} />Header
Main navigation header with authentication state and user menu.
import { Header } from "@/components/Header";
<Header />Features:
- Sticky header with backdrop blur
- Navigation links (Discovery, Dashboard, Create Token)
- Login/Logout buttons
- User profile display when authenticated
- Responsive mobile menu
GlobalStats
Display global statistics cards (total launches, volume, fees).
import { GlobalStats } from "@/components/GlobalStats";
<GlobalStats
totalLaunches={100}
totalVolume={5000000}
totalCreatorFees={50000}
isLoading={false}
/>Type Definitions
Launch
export interface Launch {
id: string | number;
name?: string; // Legacy field
token_name?: string; // Token name from backend
token_symbol?: string; // Token symbol
token_address?: string; // Contract address
shortName?: string; // Legacy short name
symbol?: string; // Legacy symbol
desc?: string; // Description
text?: string; // Tweet text content
imgUrl?: string; // Token logo URL
media_url?: string; // Image from tweet
network?: string; // Network (BSC, ETH, etc.)
mode?: "standard" | "x_mode"; // Launch mode
creator?: {
username: string;
avatar?: string;
};
user_name?: string; // Twitter username
tweet_id?: string; // Twitter tweet ID
created_at?: string; // ISO timestamp
createdAt?: string; // Legacy timestamp
is_launch?: number; // 0 or 1
volume?: number; // Legacy volume
trading_usd?: number | string; // Trading volume in USD
currentPrice?: number;
totalSupply?: number;
favorite_count?: number; // Twitter likes
retweet_count?: number; // Twitter retweets
reply_count?: number; // Twitter replies
quote_count?: number; // Twitter quotes
bookmark_count?: number; // Twitter bookmarks
view_count?: string | number; // Twitter views
marketCap?: number;
priceChange?: number;
progress?: number;
}User
export interface User {
id: number | string;
twitter_info: {
id: string;
avatar: string;
name: string;
username: string;
followers_count: number;
};
wallet: {
address: string;
created_at: string;
balance?: string;
balance_usd?: string;
};
mentions?: Launch[];
}CreateTokenRequest
export interface CreateTokenRequest {
// Required fields
token_name: string;
token_symbol: string;
desc: string;
media_url: string;
x_mode: boolean;
// Optional fields
website?: string;
twitter?: string;
telegram?: string;
tag?: string;
raisedTokenSymbol?: string; // e.g., "BNB"
// Legacy fields (for backward compatibility)
name?: string;
shortName?: string;
imgUrl?: string;
launchTime?: number;
label?: string;
lpTradingFee?: number;
dexType?: string;
totalSupply?: number;
saleRate?: number;
// ... additional optional fields
}Notification
export interface Notification {
id?: string;
type?: string;
title?: string;
message?: string;
text?: string;
read?: boolean;
created_at?: string;
createdAt?: string;
// Twitter engagement metrics
favorite_count?: number;
retweet_count?: number;
reply_count?: number;
quote_count?: number;
bookmark_count?: number;
view_count?: string | number;
// Launch data
name?: string;
user_name?: string;
tweet_id?: string;
media_url?: string;
token_symbol?: string;
token_name?: string;
token_address?: string;
}FourBelieve Documentation v1.0.0