JOIN OUR TELEGRAM CHANNEL FOR EASY COMMUNICATION
https://t.me/+h1HGgfpGn_5hYTVk
The frontend application for Renaissance, a revolutionary platform where football fans can immerse themselves in real-time team updates, exclusive player content, and transparent decentralized betting powered by Starknet.
Renaissance is built as a microservices architecture with three main repositories:
- Frontend (This repo): Next.js 14 with TypeScript - User interface and Web3 interactions
- Backend: NestJS with TypeScript - API services and business logic
- Smart Contracts: Cairo on Starknet - Decentralized betting and content access
- 📱 Responsive design optimized for all devices
- ⚡ Real-time updates with WebSocket connections
- 🎨 Modern UI with Tailwind CSS and custom components
- 🌙 Dark/Light theme support
- 🔄 Progressive Web App (PWA) capabilities
- 🔗 Stellar wallet connection (lobster)
- 📝 Smart contract interactions for betting
- 🔐 Zero-knowledge proof verification
- 💰 Token balance and transaction management
- 🎫 NFT-based access to premium content
- ⚽ Live scores and match updates
- 📊 Team statistics and analytics dashboard
- 🎥 Exclusive player lifestyle content viewer
- 🏆 Tournament brackets and fixtures
- 📈 Betting interface with real-time odds
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe JavaScript
- React 18 - UI library with concurrent features
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Lucide React - Icon library
- Radix UI - Headless UI components
- Zustand - Lightweight state management
- TanStack Query - Server state management
- WebSocket - Real-time data connections
- ESLint - Code linting
- Prettier - Code formatting
- Husky - Git hooks
- Lint-staged - Staged file linting
- Node.js 18.x or later
- npm/yarn/pnpm package manager
- Git
- Clone the frontend repository:
git clone https://github.com/renaissance-org/renaissance-frontend.git
cd renaissance-frontend- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Set up environment variables:
cp .env.example .env.localConfigure your environment:
# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
NEXT_PUBLIC_WS_URL=ws://localhost:3001
# Starknet Configuration
NEXT_PUBLIC_STARKNET_NETWORK=goerli-alpha
NEXT_PUBLIC_STARKNET_RPC_URL=your_starknet_rpc_url
# Smart Contract Addresses
NEXT_PUBLIC_BETTING_CONTRACT=0x...
NEXT_PUBLIC_CONTENT_CONTRACT=0x...
NEXT_PUBLIC_TOKEN_CONTRACT=0x...
# External APIs
NEXT_PUBLIC_FOOTBALL_API_KEY=your_football_api_key- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run type-check # Run TypeScript checking
npm run format # Format code with Prettier
# Testing
npm run test # Run tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Run tests with coverage
# Web3 Development
npm run compile # Compile contract ABIs
npm run deploy:local # Deploy to local testnetWalletConnect.tsx- Wallet connection interfaceContractInteraction.tsx- Smart contract interaction wrapperTransactionStatus.tsx- Transaction status display
LiveScore.tsx- Real-time score displayMatchCard.tsx- Match information cardPlayerProfile.tsx- Player profile componentTeamStats.tsx- Team statistics display
BettingSlip.tsx- Betting slip interfaceOddsDisplay.tsx- Live odds componentBetHistory.tsx- User bet history
The frontend communicates with the NestJS backend through:
// Authentication
POST /auth/login
POST /auth/register
GET /auth/profile
// Football Data
GET /matches/live
GET /teams/:id
GET /players/:id
// Betting
POST /bets/place
GET /bets/history
GET /odds/live// Real-time updates
'match:update' // Live score updates
'odds:change' // Betting odds changes
'bet:placed' // Bet confirmation
'content:unlock' // Premium content access- Custom color palette for brand identity
- Responsive breakpoints optimized for mobile-first
- Dark mode support with CSS variables
- Use
cn()utility for conditional classes - Follow atomic design principles
- Implement proper TypeScript props interfaces
- Component testing with React Testing Library
- Hook testing with custom render utilities
- Utility function testing
- API integration testing
- Web3 interaction testing
- User flow testing
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prodSet these in your deployment platform:
NEXT_PUBLIC_API_BASE_URL=https://api.renaissance.football
NEXT_PUBLIC_STARKNET_NETWORK=mainnet-alpha
# ... other production variablesWe welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes following our coding standards
- Write tests for new functionality
- Run linting and tests:
npm run lint && npm run test - Commit with conventional commits:
feat: add amazing feature - Push and create a Pull Request
- Use TypeScript for all new code
- Follow ESLint and Prettier configurations
- Write unit tests for components and utilities
- Use semantic commit messages
- Update documentation for new features
- Backend API: renaissance-backend - NestJS API server
- Smart Contracts: renaissance-contracts - Cairo smart contracts
This project is open source and available under the MIT License.
- 🐛 Issues: Report bugs and request features
- 💬 Discussions: Join community discussions
- 🔀 Pull Requests: Contribute code improvements
- ⭐ Star: Show your support
Built with ❤️ for the football community. Powered by Starknet and Only Dust.