Blueprint Sports Betting

A full-stack sports betting web application built with React, Node.js, Express, and MongoDB. This application provides a foundation for building a sports betting platform with real-time features, user authentication, and socket-based communication.

Architecture

This project follows a modern full-stack architecture:

• Frontend: React 18 with React Router for client-side routing
• Backend: Node.js with Express.js server
• Database: MongoDB with Mongoose ODM
• Authentication: Google OAuth 2.0 integration
• Real-time Communication: Socket.io for live updates
• Build Tool: Webpack with Babel for transpilation

Features

• User Authentication: Google OAuth 2.0 login/logout
• Real-time Updates: Socket.io integration for live data
• Session Management: Express sessions for user persistence
• Responsive Design: Modern CSS with utility classes
• Development Tools: Hot reloading with Webpack Dev Server
• API Integration: RESTful API endpoints with proper error handling

📁 Project Structure

blueprint-sportsbetting/
├── client/                    # Frontend React application
│   ├── dist/                 # Built/compiled files
│   └── src/
│       ├── components/       # React components
│       │   ├── App.js       # Main app component
│       │   └── pages/       # Page components
│       │       ├── Skeleton.js    # Main landing page
│       │       └── NotFound.js    # 404 page
│       ├── client-socket.js # Socket.io client setup
│       ├── utilities.js     # API helper functions
│       └── utilities.css    # Utility CSS classes
├── server/                   # Backend Express server
│   ├── models/              # Mongoose data models
│   │   └── user.js          # User schema
│   ├── api.js               # API routes
│   ├── auth.js              # Authentication logic
│   ├── server-socket.js     # Socket.io server setup
│   ├── server.js            # Main server file
│   └── validator.js         # Setup validation
├── package.json             # Dependencies and scripts
└── webpack.config.js        # Webpack configuration

🛠️ Setup Instructions

Prerequisites

• Node.js 18.x or higher
• MongoDB Atlas account (or local MongoDB)
• Google Cloud Console project for OAuth

Installation

1. Clone the repository

   git clone <repository-url>
   cd blueprint-sportsbetting

2. Install dependencies

   npm install

3. Environment Configuration

   Create a .env file in the root directory:

   MONGO_SRV=your_mongodb_connection_string
   SESSION_SECRET=your_session_secret_key

4. Configure Google OAuth

   Update the Google Client ID in:

   • client/src/components/pages/Skeleton.js (line 8)
   • server/auth.js (line 7)

5. Database Configuration

   Update the MongoDB connection in server/server.js:

   • Replace mongoConnectionURL with your MongoDB Atlas connection string
   • Update databaseName to your preferred database name

Running the Application

1. Development Mode (with hot reloading)

   # Terminal 1: Start the backend server
   npm start
   
   # Terminal 2: Start the frontend with hot reloading
   npm run hotloader

2. Production Build

   npm run build

3. Access the Application

   • Development: http://localhost:5050
   • Backend API: http://localhost:3000

🔧 Available Scripts

• npm start - Start the backend server with nodemon
• npm run hotloader - Start webpack dev server with hot reloading
• npm run build - Build the production bundle

🔌 API Endpoints

Authentication

• POST /api/login - User login with Google OAuth
• POST /api/logout - User logout
• GET /api/whoami - Get current user information
• POST /api/initsocket - Initialize socket connection for user

Socket Events

• Connection management for real-time features
• User-to-socket mapping for targeted updates

Database Schema

User Model

{
  name: String,        // User's display name
  googleid: String     // Google OAuth subject ID
}

Security Features

• Google OAuth 2.0 authentication
• Session-based user management
• JWT token verification
• Secure socket connections
• Input validation and sanitization

Frontend Features

• React Router: Client-side routing
• Google OAuth: Seamless login/logout
• Socket.io Client: Real-time communication
• Utility Functions: API request helpers
• Responsive Design: Mobile-friendly interface

Development Notes

Key Files to Customize

1. Authentication: Update Google Client IDs in both frontend and backend
2. Database: Configure MongoDB connection string
3. API Routes: Add your custom endpoints in server/api.js
4. Frontend Components: Build your betting interface in client/src/components/

Socket.io Integration

The application includes a complete Socket.io setup for real-time features:

• User connection management
• Automatic cleanup on disconnect
• Support for targeted user messaging

Adding New Features

1. Backend: Add routes in server/api.js
2. Frontend: Create components in client/src/components/
3. Database: Define schemas in server/models/
4. Real-time: Use socket events in server/server-socket.js

License

This project is licensed under the ISC License - see the LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request