Perpify is a high-performance, self-custodial decentralized exchange (DEX) frontend built for the Starknet ecosystem. It is designed to provide professional traders with a lightning-fast, secure, and visually immersive trading experience for perpetual swaps.
- Advanced Trading Interface: Professional-grade UI for perpetuals trading with real-time data.
- High Performance: Optimized for speed using Next.js 16 and Starknet's validity rollups.
- Starknet Integration: Seamless wallet connection (Argent, Braavos) via generic Starknet React hooks.
- Interactive Leaderboard: Real-time tracking of top traders and competitions.
- Comprehensive Dashboard: User portfolio management and performance analytics.
- Premium Design: "Deep Void" dark mode aesthetic with glassmorphism effects and smooth Framer Motion animations.
This project leverages the latest web and blockchain technologies:
- Next.js 16: React framework with App Router for server-side rendering and static generation.
- React 19: The latest version of the generic library for building user interfaces.
- TypeScript: Static typing for enhanced developer productivity and code safety.
- Tailwind CSS v4: Utility-first CSS framework configured with the new CSS-first configuration approach.
- Framer Motion: Production-ready animation library for React.
- Lucide React: Beautiful, consistent icon set.
- Sonner: An opinionated toast component for React.
- Starknet React: React hooks for Starknet.
- Starknet.js: JavaScript library for interacting with Starknet.
- StarknetKit: Modal library for wallet connections.
- Zustand: Small, fast and scalable bearbones state-management solution.
- TanStack Query: Powerful asynchronous state management.
- Headings: Sanchez (Serif) - Giving a premium, editorial feel.
- Body: Geist (Sans-serif) - Modern, legible, and crisp for UI text.
├── app/ # App Router directory
│ ├── components/ # Reusable UI components
│ │ ├── landing/ # Landing page specific components
│ │ └── ui/ # Generic UI elements (buttons, cards, etc.)
│ ├── dashboard/ # Dashboard page route
│ ├── leaderboard/ # Leaderboard page route
│ ├── trade/ # Trading interface route
│ ├── globals.css # Global styles & Tailwind entry
│ └── layout.tsx # Root layout with providers and fonts
├── lib/ # Utility functions and shared logic
├── hooks/ # Custom React hooks
├── public/ # Static assets (images, icons)
└── store/ # Zustand state stores- Node.js: Version 20 or higher is recommended (Project requires Node >= 18).
- NPM/Yarn/PNPM: Package manager of your choice.
-
Clone the repository:
git clone https://github.com/your-username/starkware-project.git cd starkware-project -
Install dependencies:
npm install # or yarn install # or pnpm install
Note: If you encounter peer dependency issues with React 19/18, use the legacy peer deps flag:
npm install --legacy-peer-deps
Run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
Build the application for production:
npm run buildStart the production server:
npm run startThis project uses the alpha/beta version of Tailwind CSS v4. Configuration is handled primarily through CSS variables in app/globals.css under the @theme directive, rather than a traditional tailwind.config.ts.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
Built with ❤️ for the Starknet Community.