Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content

stackified/xktradingfloor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

126 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

XK Trading Floor

A full-stack trading education and community platform featuring academy courses, broker reviews, blogs, podcasts, and merchandise.

🌐 Live Demo: https://stackified.github.io/xktradingfloor/

πŸ“¦ Project Structure

xktradingfloor/
β”œβ”€β”€ frontend/          # React + Vite frontend application
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ components/ # React components
β”‚   β”‚   β”œβ”€β”€ controllers/ # API controllers
β”‚   β”‚   β”œβ”€β”€ contexts/   # React contexts
β”‚   β”‚   β”œβ”€β”€ models/     # Data models/types
β”‚   β”‚   β”œβ”€β”€ pages/      # Page components
β”‚   β”‚   β”œβ”€β”€ redux/      # Redux store
β”‚   β”‚   └── routes/     # React Router
β”‚   └── package.json
β”œβ”€β”€ backend/           # Express.js backend application
β”‚   β”œβ”€β”€ controllers/   # Request handlers
β”‚   β”œβ”€β”€ helpers/       # Helper functions
β”‚   β”œβ”€β”€ middleware/    # Express middleware
β”‚   β”œβ”€β”€ models/        # Database models
β”‚   β”œβ”€β”€ routes/        # API routes
β”‚   β”œβ”€β”€ utils/         # Utility functions
β”‚   β”œβ”€β”€ views/         # EJS templates
β”‚   └── package.json
└── README.md

πŸš€ Features

  • 🏠 Home Page: Hero section, community information, featured events
  • πŸŽ“ Academy: Trading programs, workshops, bootcamps, and free resources
  • πŸ“ Blog: Educational articles with search and filtering
  • ⭐ Reviews: Review system for brokers, prop firms, and crypto exchanges
  • πŸŽ™οΈ Podcasts: Trading insights and educational content
  • πŸ›οΈ Merchandise: E-commerce functionality with shopping cart
  • πŸ‘€ Dashboards: Personalized dashboards for users, operators, and admins
  • πŸ” Authentication: User registration, login, and role-based access control
  • πŸ“§ Email Campaigns: Admin email campaign management with CSV upload, draft management, and campaign history
  • πŸ“§ Email Notifications: Automated emails via SendGrid
  • ☁️ Cloud Storage: Secure file upload and storage via AWS S3
  • πŸ›‘οΈ Error Monitoring: Real-time error tracking and performance monitoring via Sentry
  • πŸ“Š Analytics: Google Analytics 4 integration for tracking website performance and user behavior

πŸ› οΈ Tech Stack

Frontend

  • React 18.3.1
  • Vite 5.4.10
  • React Router DOM 6.26.2
  • Redux Toolkit 2.2.7
  • Tailwind CSS 3.4.14
  • Framer Motion 11.2.13
  • Lucide React 0.474.0
  • React Helmet Async 2.0.5
  • React Quill 2.0.0 (Rich text editor)
  • Recharts 2.15.4 (Charts)

Backend

  • Node.js
  • Express.js 4.16.1
  • MongoDB with Mongoose 8.18.1
  • JWT Authentication
  • AWS SDK (S3)
  • SendGrid (Email)
  • Sentry (Monitoring)
  • EJS (Templates)
  • File upload support

🚦 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • MongoDB (local or remote instance)

Installation

  1. Clone the repository:
git clone <repository-url>
cd xktradingfloor
  1. Frontend Setup:
cd frontend
npm install
  1. Backend Setup:
cd ../backend
npm install
  1. Environment Configuration:
    • Create .env files in both frontend/ and backend/ directories
    • Configure required environment variables (see .env.example files if available)

Running the Application

Start the Backend Server:

cd backend
npm run dev    # Development mode
# OR
npm start      # Production mode

Start the Frontend Development Server:

cd frontend
npm run dev

πŸ“ Available Scripts

Frontend

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

Backend

npm start            # Start production server
npm run dev          # Start development server with auto-reload

🎨 Styling

The application uses:

  • Tailwind CSS for utility-first styling
  • Framer Motion for animations
  • Modern dark theme with responsive design

πŸ“± Responsive Design

Fully responsive and optimized for:

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

πŸ“Š Analytics Integration

The application includes Google Analytics 4 (GA4) integration for comprehensive website analytics:

  • Measurement ID: G-GYPE81F8N8
  • Stream ID: 13130862580
  • Automatic Page View Tracking: All route changes are automatically tracked
  • Custom Event Tracking: Utility functions available for tracking button clicks, form submissions, searches, and user engagement

Analytics Features

  • Real-time page view tracking
  • Custom event tracking (button clicks, form submissions, link clicks)
  • Search query tracking
  • User engagement metrics
  • Automatic route change detection

Analytics utilities are available in frontend/src/utils/analytics.js for custom event tracking throughout the application.

🀝 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.


Built with ❀️ by Stackified.

Releases

No releases published

Packages

 
 
 

Contributors