A comprehensive trading education and community platform built with React, featuring academy courses, broker reviews, blogs, podcasts, and merchandise.

XK Trading Floor is a modern web application designed to empower traders through education, data, and community. The platform provides a complete ecosystem for traders to learn, review trading companies, access educational resources, and connect with a supportive trading community.

• 🏠 Home Page: Engaging hero section, community information, and "How It Works" guide
• 🎓 Academy: Expert-led programs, live workshops, strategy sessions, and trading bootcamps
• 📝 Blog: Educational articles covering trading strategies, psychology, risk management, and more
• ⭐ Reviews: Comprehensive review system for brokers, prop firms, and crypto exchanges
• 🎙️ Podcasts: Trading insights and educational content in audio format
• 🛍️ Merchandise: E-commerce functionality for trading-related products
• 👤 User Dashboards: Personalized dashboards for users, operators, and admins
• 🔐 Authentication: Secure user registration, login, and role-based access control
• 📊 Analytics: Dashboard with charts and analytics for admins and operators

• React 18.3.1 - UI library
• Vite 5.4.10 - Build tool and dev server
• React Router DOM 6.26.2 - Client-side routing
• Redux Toolkit 2.2.7 - State management
• React Redux 9.1.2 - React bindings for Redux

• Tailwind CSS 3.4.14 - Utility-first CSS framework
• Framer Motion 11.2.13 - Animation library
• Lucide React 0.474.0 - Icon library
• @heroicons/react 2.1.5 - Additional icons

• Axios 1.7.7 - HTTP client
• Recharts 2.15.4 - Chart library for analytics
• React Helmet Async 2.0.5 - SEO and document head management

xktrading/
├── public/
│   └── assets/              # Static assets (images, logos, etc.)
│       ├── blogs/           # Blog post images
│       ├── events/          # Event images
│       ├── leadership/      # Team member photos
│       ├── merch/           # Product images
│       ├── podcasts/        # Podcast episode images
│       └── users/           # User avatars
├── src/
│   ├── components/          # Reusable React components
│   │   ├── academy/        # Academy-related components
│   │   ├── blog/           # Blog components
│   │   ├── dashboard/      # Dashboard components
│   │   ├── home/           # Home page components
│   │   ├── merch/          # Merchandise components
│   │   ├── reviews/        # Review system components
│   │   ├── shared/         # Shared/common components
│   │   └── ui/             # UI components
│   ├── controllers/        # API controllers and business logic
│   ├── models/             # Data models and mock data
│   ├── pages/              # Page components
│   ├── redux/              # Redux store and slices
│   │   └── slices/         # Redux slices (auth, cart, analytics)
│   ├── routes/             # Routing configuration
│   ├── styles/             # Global styles
│   ├── utils/              # Utility functions
│   ├── App.jsx             # Main App component
│   └── main.jsx            # Application entry point
├── index.html              # HTML template
├── package.json            # Dependencies and scripts
├── tailwind.config.js      # Tailwind CSS configuration
├── vite.config.js          # Vite configuration
└── postcss.config.js       # PostCSS configuration

• Node.js (v16 or higher recommended)
• npm or yarn package manager

1. Clone the repository:

git clone <repository-url>
cd xktrading

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173 (or the port specified in vite.config.js).

npm run build

This creates an optimized production build in the dist directory.

npm run preview

This serves the production build locally for testing (default port: 5173).

• User registration and login
• Role-based access control (user, operator, admin)
• Cookie-based session management
• Protected routes for authenticated users

• Event listings with filtering and search
• Event registration modal
• Free resources section
• Podcast integration
• Educational content management

• Company listings (brokers, prop firms, crypto exchanges)
• Filtering by type, rating, and status
• Pagination for large datasets
• Review submission and moderation
• Company detail pages with reviews
• Operator dashboard for managing companies

• Blog post listings with categories
• Search functionality
• Individual blog post pages
• Author information
• Related posts

• Product catalog with filtering
• Shopping cart functionality (Redux managed)
• Product detail pages
• Cart sidebar component

• User Dashboard: Personal analytics and activity
• Operator Dashboard: Company and review management
• Admin Dashboard: Full platform administration
• Analytics charts and widgets
• Recent activity tracking
• Quick actions panel

The application uses a dark theme with a modern, professional design:

• Primary Color: #2B6EF2 (Blue)
• Background: #0B0F19 (Dark blue-black)
• Card Background: #0E1422
• Typography: Inter and Poppins fonts

Custom Tailwind configuration extends the default theme with project-specific colors and utilities.

Currently, the application uses client-side data management. For production deployment, you may want to configure:

• API endpoints
• Authentication service URLs
• Environment-specific configurations

The application is fully responsive and optimized for:

• Desktop (1920px+)
• Laptop (1024px - 1919px)
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

• Hot Module Replacement (HMR): Fast development with instant updates
• React Fast Refresh: Preserves component state during development
• ESLint: Code linting (if configured)
• TypeScript Support: Can be added if needed

• Component-based Architecture: Modular, reusable components
• Separation of Concerns: Controllers, models, and views separated
• Redux State Management: Centralized state for auth, cart, and analytics
• Custom Hooks: Reusable logic extraction (where applicable)

The npm run build command generates optimized static files in the dist directory, ready for deployment to:

• Static Hosting: Netlify, Vercel, GitHub Pages
• CDN: Cloudflare, AWS CloudFront
• Traditional Servers: Nginx, Apache

• Update API endpoints for production
• Configure environment variables
• Set up authentication backend
• Configure CORS if needed
• Set up analytics tracking
• Optimize images and assets
• Test all features in production environment

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally

• vite.config.js: Vite build configuration
• tailwind.config.js: Tailwind CSS customization
• postcss.config.js: PostCSS configuration
• package.json: Project metadata and dependencies

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is private and proprietary.

For support, please contact the development team or visit the contact page at /contact.

Potential features for future development:

• Real-time chat or Discord integration
• Advanced trading tools and calculators
• Mobile app version
• Enhanced analytics and reporting
• Integration with trading APIs
• Payment gateway integration for merchandise
• Email notifications system
• Advanced search and filtering

Built with ❤️ by Stackified.