https://github.com/stackified/xktrading
A modern trading education and community platform built with React. Features academy courses, broker reviews, blogs, podcasts, and e-commerce functionality.
https://github.com/stackified/xktrading
broker-reviews crypto-trading e-commerce educational-platform framer-motion prop-trading react react-router redux tailwindcss trading trading-community trading-education trading-platform vite web-app
Last synced: 2 months ago
JSON representation
A modern trading education and community platform built with React. Features academy courses, broker reviews, blogs, podcasts, and e-commerce functionality.
- Host: GitHub
- URL: https://github.com/stackified/xktrading
- Owner: stackified
- License: apache-2.0
- Created: 2025-11-05T00:52:07.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-05T03:42:36.000Z (8 months ago)
- Last Synced: 2026-04-05T22:36:40.945Z (2 months ago)
- Topics: broker-reviews, crypto-trading, e-commerce, educational-platform, framer-motion, prop-trading, react, react-router, redux, tailwindcss, trading, trading-community, trading-education, trading-platform, vite, web-app
- Language: JavaScript
- Homepage: https://stackified.github.io/xktrading/
- Size: 14.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# XK Trading Floor
A comprehensive trading education and community platform built with React, featuring academy courses, broker reviews, blogs, podcasts, and merchandise.
## 🚀 Overview
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.
### Key Features
- **🏠 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
## 🛠️ Tech Stack
### Core Technologies
- **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
### Styling & UI
- **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
### Additional Libraries
- **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
## 📁 Project Structure
```
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
```
## 🚦 Getting Started
### Prerequisites
- **Node.js** (v16 or higher recommended)
- **npm** or **yarn** package manager
### Installation
1. Clone the repository:
```bash
git clone
cd xktrading
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
The application will be available at `http://localhost:5173` (or the port specified in `vite.config.js`).
### Build for Production
```bash
npm run build
```
This creates an optimized production build in the `dist` directory.
### Preview Production Build
```bash
npm run preview
```
This serves the production build locally for testing (default port: 5173).
## 🎯 Features Breakdown
### Authentication System
- User registration and login
- Role-based access control (user, operator, admin)
- Cookie-based session management
- Protected routes for authenticated users
### Academy Section
- Event listings with filtering and search
- Event registration modal
- Free resources section
- Podcast integration
- Educational content management
### Review System
- 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 System
- Blog post listings with categories
- Search functionality
- Individual blog post pages
- Author information
- Related posts
### Merchandise
- Product catalog with filtering
- Shopping cart functionality (Redux managed)
- Product detail pages
- Cart sidebar component
### Dashboards
- **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
## 🎨 Styling & Design
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.
## 🔐 Environment Variables
Currently, the application uses client-side data management. For production deployment, you may want to configure:
- API endpoints
- Authentication service URLs
- Environment-specific configurations
## 📱 Responsive Design
The application is fully responsive and optimized for:
- Desktop (1920px+)
- Laptop (1024px - 1919px)
- Tablet (768px - 1023px)
- Mobile (320px - 767px)
## 🧪 Development
### Key Development Features
- **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
### Code Organization
- **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)
## 🚀 Deployment
### Build Output
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
### Deployment Checklist
- [ ] 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
## 📝 Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build locally
## 🔧 Configuration Files
- **`vite.config.js`**: Vite build configuration
- **`tailwind.config.js`**: Tailwind CSS customization
- **`postcss.config.js`**: PostCSS configuration
- **`package.json`**: Project metadata and dependencies
## 🤝 Contributing
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
## 📄 License
This project is private and proprietary.
## 📞 Support
For support, please contact the development team or visit the contact page at `/contact`.
## 🔮 Future Enhancements
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.**