A comprehensive collection of C++ solutions for LeetCode problems with a modern, responsive web interface. Clean, efficient code with detailed complexity analysis and multiple approaches.
- Modern Homepage with Tailwind CSS styling
- Solution Pages with copy-to-clipboard functionality
- Responsive Design that works on all devices
- Professional Styling with dark code blocks and clean typography
- Easy Navigation between problems and home page
- Developer Profile with social links
- Backend: Node.js + Express
- Frontend: EJS templating + Tailwind CSS
- Styling: Custom CSS + Tailwind CSS
- JavaScript: Vanilla JS for copy functionality
- Build Tools: PostCSS + Autoprefixer
- Node.js 18+ recommended
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd letcpp
-
Install dependencies
npm install
-
Build CSS (Development)
npm run build:css
-
Start the server
npm start
- Homepage:
http://localhost:3000- Modern landing page with project overview - LeetCode 1:
http://localhost:3000/1- Two Sum solution - LeetCode 2:
http://localhost:3000/2- Add Two Numbers solution
npm run build:cssWatches for changes and rebuilds CSS automatically.
npm run build:css:prodCreates minified CSS for production deployment.
letcpp/
├── server.js # Express server and routes
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── render.yaml # Render deployment configuration
├── DEPLOYMENT.md # Complete deployment guide
├── .gitignore # Git ignore rules
│
├── views/
│ ├── home.ejs # Modern homepage with Tailwind
│ ├── 1.ejs # LeetCode 1 solution page
│ ├── 2.ejs # LeetCode 2 solution page
│ ├── 404.ejs # 404 error page
│ └── solution-template.ejs # Template for new solutions
│
├── public/
│ ├── styles.css # Custom CSS for solution pages
│ ├── styles.min.css # Compiled Tailwind CSS (generated)
│ ├── tailwind.css # Tailwind source file
│ ├── solution.js # Shared JavaScript for copy functionality
│ └── Developer.jpeg # Developer profile image
│
└── node_modules/ # Dependencies (not in git)
-
Create a new file in
views/(e.g.,views/3.ejs) -
Use the solution template structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LeetCode 3 - Problem Name</title> <link rel="stylesheet" href="/styles.css" /> <script src="/solution.js"></script> </head> <body> <main> <h1>LeetCode 3: Problem Name (C++)</h1> <div class="problem-description"> <p><strong>Problem:</strong> Problem description...</p> <p><strong>Example:</strong> Example with code...</p> </div> <div class="code-container"> <button class="copy-button" onclick="copyCode(this)">Copy Code</button> <pre><code class="language-cpp">Your C++ solution here</code></pre> </div> <a href="/" class="back-link">← Back to Home</a> </main> </body> </html>
-
Add a route in
server.js:app.get('/3', (req, res) => { res.render('3', { title: 'LeetCode 3 - Problem Name' }); });
You can modify the server to use dynamic templates with data.
- One-click code copying from solution pages
- Visual feedback with button state changes
- Cross-browser compatibility with fallback support
- Automatic reset after 2 seconds
- Mobile-first approach with Tailwind CSS
- Clean typography and spacing
- Professional color scheme
- Smooth hover effects and transitions
- Dark theme code blocks for better readability
- Syntax highlighting support
- Proper font families for code
- Inline code styling for problem descriptions
When displaying C++ code with template syntax in HTML, use HTML entities to prevent browser interpretation:
<→<(less than)>→>(greater than)&→&(ampersand)
Example: vector<vector<char>>& should be written as vector<vector<char>>& in HTML source to display correctly.
- Modify
public/styles.cssfor solution page styles - Update
public/tailwind.cssfor Tailwind customizations - Edit
tailwind.config.jsfor theme configuration
- Update
public/solution.jsfor shared functionality - All solution pages automatically use the shared script
npm startnpm run build:css:prod
npm startPORT: Set custom port (default: 3000)- PowerShell:
($env:PORT = 4000); npm start - Bash:
PORT=4000 npm start
- Follow the complete deployment guide: DEPLOYMENT.md
- Quick deployment:
- Push your code to GitHub
- Connect to Render using the
render.yamlblueprint - Your app will be live at
https://your-app-name.onrender.com
- Vercel: Use the
vercel.jsonconfiguration - Netlify: Use the
netlify.tomlconfiguration - Railway: Direct deployment from GitHub
- Heroku: Use
Procfile(if you have one)
This project is open source and available under the MIT License.
Rishi Tiwari - Full Stack Developer & Competitive Programmer
- Fork the repository
- Create a feature branch
- Add your solution page
- Submit a pull request
Use this script to find which solution EJS files exist but are not yet added to solutions.json:
// search.js - Find missing solutions
const fs = require('fs');
const path = require('path');
// Read solutions.json
const solutions = JSON.parse(fs.readFileSync('solutions.json', 'utf8'));
const existingIds = new Set(solutions.solutions.map(s => s.id));
// Get all numeric EJS files from views directory
const viewsDir = 'views';
const files = fs.readdirSync(viewsDir).filter(f => /^\d+\.ejs$/.test(f));
const fileIds = files.map(f => parseInt(f.replace('.ejs', '')));
// Find missing solution IDs
const missing = fileIds.filter(id => !existingIds.has(id)).sort((a, b) => a - b);
console.log('TotalCount field in JSON:', solutions.totalCount);
console.log('Actual solutions array length:', solutions.solutions.length);
console.log('EJS files found:', files.length);
console.log('Missing solution IDs:', JSON.stringify(missing));
console.log('Total missing:', missing.length);
// Also show which IDs are in solutions.json but don't have EJS files
const solutionIds = new Set(solutions.solutions.map(s => s.id));
const missingFiles = Array.from(solutionIds).filter(id => !fileIds.includes(id)).sort((a, b) => a - b);
if (missingFiles.length > 0) {
console.log('\nSolutions in JSON but missing EJS files:', JSON.stringify(missingFiles));
}Run with: node search.js
To automatically sync and validate solution metadata (like missing difficulties or complexities) across the repository, use the included sync script:
node scripts/sync-solutions.jsThis ensures solutions.json correctly reflects all the solutions available in the views/ directory.
LetCpp - Making LeetCode solutions accessible and beautiful! 🚀