Programming Problems Management System

A comprehensive full-stack web application for managing programming problems with Google Sheets integration. Built with Node.js/Express backend and Vanilla JavaScript frontend with Bootstrap 5.

🌟 Features

Core Functionality

• Problem Management: Create, read, update, delete programming problems
• Search & Filter: Advanced search with difficulty filtering and sorting
• Authentication: Secure JWT-based authentication system
• Export Options: Export problems to PDF, Markdown, or copy to clipboard
• Google Sheets Integration: Automatic synchronization with Google Sheets
• Responsive Design: Mobile-first design with Bootstrap 5
• Dark/Light Mode: Theme toggle with persistent settings
• Auto-save: Automatic saving during problem editing

Advanced Features

• Real-time Statistics: Dashboard with problem metrics
• Pagination: Efficient handling of large datasets
• Input Validation: Both client-side and server-side validation
• Error Handling: Comprehensive error handling with user feedback
• Keyboard Shortcuts: Quick navigation and actions
• Auto-refresh: Automatic token refresh for security

🏗️ Architecture

ProgrammingProblems/
├── backend/                 # Node.js/Express API
│   ├── middleware/         # Authentication, validation, error handling
│   ├── routes/            # API endpoints
│   ├── services/          # Google Sheets integration
│   └── server.js          # Main server file
├── frontend/              # Vanilla JavaScript frontend
│   ├── css/              # Custom styles
│   ├── js/               # Application modules
│   └── index.html        # Main HTML file
└── README.md             # This file

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm
• Google Cloud Project with Sheets API enabled
• Google Service Account credentials

Backend Setup

1. Install Dependencies

   cd backend
   npm install

2. Environment Configuration

   cp .env.example .env

   Configure the following variables in .env:

   # Server Configuration
   PORT=3001
   NODE_ENV=development
   
   # JWT Configuration
   JWT_SECRET=your-super-secret-jwt-key-here
   JWT_EXPIRES_IN=24h
   
   # Google Sheets API Configuration
   GOOGLE_SHEET_ID=1q7GSsDZx6MLB8qQoFyEgqWkFzo5K77G34uvhR4XJ-I
   GOOGLE_SERVICE_ACCOUNT_EMAIL=your-service-account@your-project.iam.gserviceaccount.com
   GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n"
   
   # Authentication
   ADMIN_USERNAME=admin
   ADMIN_PASSWORD=admin123
   
   # CORS Settings
   FRONTEND_URL=http://localhost:3000

3. Google Sheets Setup

   • Create a Google Cloud Project
   • Enable Google Sheets API
   • Create a Service Account
   • Download service account credentials
   • Share your Google Sheet with the service account email
   • Update the GOOGLE_SHEET_ID in your .env file

4. Start Backend Server

   npm run dev

   The API will be available at http://localhost:3001

Frontend Setup

1. Navigate to Frontend Directory

   cd frontend

2. Serve Frontend

   Option A: Using Live Server (Recommended)

   • Install Live Server extension in VS Code
   • Right-click on index.html and select "Open with Live Server"

   Option B: Using Python

   python -m http.server 3000

   Option C: Using Node.js serve

   npx serve -p 3000

3. Access Application Open http://localhost:3000 in your browser

Default Credentials

• Username: admin
• Password: admin123

📊 Google Sheets Structure

The system expects the following columns in your Google Sheet:

Column	Field	Description
A	Title	Problem title
B	Description	Problem description
C	Input Format	Input format description
D	Output Format	Output format description
E	Constraints	Problem constraints
F	Examples	Example inputs/outputs
G	Difficulty	Easy/Medium/Hard
H	Tags	Comma-separated tags
I	Time Limit	Time limit (e.g., "1 second")
J	Memory Limit	Memory limit (e.g., "256 MB")
K	Created At	Timestamp

🔧 API Endpoints

Authentication

• POST /api/auth/login - User login
• POST /api/auth/verify - Token verification
• POST /api/auth/refresh - Token refresh

Problems

• GET /api/problems - Get all problems (with filters)
• GET /api/problems/:id - Get specific problem
• POST /api/problems - Create new problem
• PUT /api/problems/:id - Update problem
• DELETE /api/problems/:id - Delete problem
• POST /api/problems/:id/duplicate - Duplicate problem
• GET /api/problems/stats/summary - Get statistics

Query Parameters for GET /api/problems

• search - Search in title, description, tags
• filter - Filter by difficulty (Easy/Medium/Hard)
• sort - Sort by (date_desc, date_asc, title_asc, title_desc, difficulty_asc, difficulty_desc)
• page - Page number (default: 1)
• limit - Items per page (default: 10, max: 50)

🎨 Frontend Features

Responsive Design

• Mobile-first approach with Bootstrap 5
• Responsive navigation and tables
• Touch-friendly interface
• Optimized for all screen sizes

User Interface

• Clean, modern design with gradient backgrounds
• Smooth animations and transitions
• SweetAlert2 for elegant notifications
• Bootstrap icons for consistent iconography

Dark/Light Mode

• System preference detection
• Manual toggle with persistent storage
• Smooth theme transitions
• All components support both themes

Keyboard Shortcuts

• Ctrl/Cmd + D - Dashboard
• Ctrl/Cmd + P - Problems
• Ctrl/Cmd + N - Create New
• Ctrl/Cmd + / - Focus Search
• Esc - Cancel/Close
• ? - Show help

📤 Export Features

PDF Export

• Professional formatting with jsPDF
• Includes all problem details
• Difficulty badges with color coding
• Automatic page breaks
• Custom styling and branding

Markdown Export

• Clean Markdown formatting
• Code blocks for examples
• Proper heading structure
• Compatible with GitHub/GitLab

Copy to Clipboard

• JSON format for easy data transfer
• Complete problem data included
• Browser clipboard API integration

🔒 Security Features

Backend Security

• JWT token authentication
• Request rate limiting
• Input validation and sanitization
• CORS configuration
• Helmet.js security headers
• Environment variable protection

Frontend Security

• XSS prevention
• Secure token storage
• Input validation
• HTTPS enforcement (production)

🛠️ Development

Project Structure

Backend

backend/
├── middleware/
│   ├── auth.js           # JWT authentication
│   ├── errorHandler.js   # Global error handling
│   └── validation.js     # Input validation
├── routes/
│   ├── auth.js          # Authentication routes
│   └── problems.js      # Problem CRUD routes
├── services/
│   └── googleSheets.js  # Google Sheets integration
├── .env.example         # Environment template
├── package.json         # Dependencies and scripts
└── server.js           # Main server file

Frontend

frontend/
├── css/
│   └── styles.css       # Custom styles
├── js/
│   ├── config.js        # Configuration and utilities
│   ├── auth.js          # Authentication management
│   ├── api.js           # API client and error handling
│   ├── ui.js            # UI management and themes
│   ├── problems.js      # Problem management
│   ├── export.js        # Export functionality
│   └── app.js           # Main application coordination
└── index.html          # Single-page application

Development Scripts

Backend

npm run dev      # Start with nodemon (auto-reload)
npm start        # Start production server
npm test         # Run tests

Code Style

• ESLint configuration for consistent code style
• Prettier for code formatting
• JSDoc comments for documentation

🚀 Deployment

Backend Deployment (Render/Heroku)

1. Prepare for Production

   # Set NODE_ENV to production
   NODE_ENV=production

2. Environment Variables Set all required environment variables on your hosting platform

3. Build Command

   npm install

4. Start Command

   npm start

Frontend Deployment (Netlify/Vercel)

1. Build Settings

   • Build command: Not required (static files)
   • Publish directory: /frontend

2. Update API URL Update API_BASE_URL in config.js to point to your deployed backend

3. Deploy

   • Connect your GitHub repository
   • Configure build settings
   • Deploy automatically on push

Production Checklist

• Update JWT_SECRET to a secure random string
• Set NODE_ENV=production
• Configure CORS for your production domain
• Set up HTTPS (recommended)
• Update API_BASE_URL in frontend config
• Test all functionality in production environment
• Set up monitoring and logging
• Configure backup for Google Sheets data

🤝 Contributing

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

📄 License

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

🐛 Troubleshooting

Common Issues

Backend Issues

1. Google Sheets API Errors

   • Verify service account credentials
   • Check if Sheets API is enabled
   • Ensure sheet is shared with service account email

2. JWT Token Errors

   • Verify JWT_SECRET is set
   • Check token expiration settings

3. CORS Errors

   • Update FRONTEND_URL in backend .env
   • Check CORS configuration in server.js

Frontend Issues

1. API Connection Failed

   • Verify backend is running on correct port
   • Check API_BASE_URL in config.js
   • Ensure CORS is properly configured

2. Authentication Issues

   • Clear browser localStorage
   • Check default credentials
   • Verify JWT token handling

Debug Mode

For development, open browser console and use:

// Check application status
window.debug.status()

// View current configuration
window.debug.config()

// Check authentication status
window.debug.auth()

// Clear all local storage
window.debug.clearStorage()

// Restart application
window.debug.restart()

📞 Support

For support, please create an issue in the GitHub repository or contact the development team.

🙏 Acknowledgments

• Bootstrap team for the excellent CSS framework
• Google for the Sheets API
• SweetAlert2 for beautiful alerts
• jsPDF for PDF generation capabilities
• Express.js and Node.js communities