29 |
31 | );
32 |
33 | return (
34 |
35 | {/*
38 |
69 |
70 | );
71 | };
72 |
73 | export default App;
74 |
--------------------------------------------------------------------------------
/frontend/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/components/AddToPlaylist.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { X, Plus, Loader } from 'lucide-react';
3 | import { usePlaylistStore } from '../store/usePlaylistStore';
4 |
5 | const AddToPlaylistModal = ({ isOpen, onClose, problemId }) => {
6 | const { playlists, getAllPlaylists, addProblemToPlaylist, isLoading } = usePlaylistStore();
7 | const [selectedPlaylist, setSelectedPlaylist] = useState('');
8 |
9 | useEffect(() => {
10 | if (isOpen) {
11 | getAllPlaylists();
12 | }
13 | }, [isOpen]);
14 |
15 | const handleSubmit = async (e) => {
16 | e.preventDefault();
17 | if (!selectedPlaylist) return;
18 |
19 | await addProblemToPlaylist(selectedPlaylist, [problemId]);
20 | onClose();
21 | };
22 |
23 | if (!isOpen) return null;
24 |
25 | return (
26 |
27 |
71 | );
72 | };
73 |
74 | export default AddToPlaylistModal;
--------------------------------------------------------------------------------
/frontend/src/components/AdminRoute.jsx:
--------------------------------------------------------------------------------
1 | import { Navigate, Outlet } from "react-router-dom";
2 | import { useAuthStore } from "../store/useAuthStore";
3 |
4 | const AdminRoute = () => {
5 | const { authUser, isCheckingAuth } = useAuthStore();
6 |
7 | if (isCheckingAuth) {
8 | return
28 |
70 |
29 |
34 |
35 |
69 | Add to Playlist
30 | 33 |
73 | {/* Animated code symbols in background */}
74 |
131 | )
132 | }
133 |
134 | export default CodeBackground
135 |
--------------------------------------------------------------------------------
/frontend/src/components/CreatePlaylistModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useForm } from 'react-hook-form';
3 | import { X } from 'lucide-react';
4 |
5 | const CreatePlaylistModal = ({ isOpen, onClose, onSubmit }) => {
6 | const { register, handleSubmit, formState: { errors }, reset } = useForm();
7 |
8 | const handleFormSubmit = async (data) => {
9 | await onSubmit(data);
10 | reset();
11 | onClose();
12 | };
13 |
14 | if (!isOpen) return null;
15 |
16 | return (
17 |
75 |
94 |
95 |
76 |
78 |
79 |
81 |
82 |
84 |
85 |
87 |
88 |
90 |
91 |
93 |
96 | {/* Code editor mockup */}
97 |
130 |
98 | {/* Editor header */}
99 |
118 |
119 | {/* Logo */}
120 |
100 |
107 |
108 | {/* Code content */}
109 |
101 |
102 |
103 |
104 |
105 | problem.js
106 |
110 |
117 |
111 | {codeSnippets[activeIndex]}
112 |
113 |
114 | {/* Blinking cursor */}
115 |
116 |
121 |
125 |
126 | {/* Text content */}
127 |
122 |
124 | {title}
128 |{subtitle}
129 |
18 |
66 | );
67 | };
68 |
69 | export default CreatePlaylistModal;
--------------------------------------------------------------------------------
/frontend/src/components/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Outlet } from 'react-router-dom'
3 | import Navbar from './Navbar'
4 |
5 | const Layout = () => {
6 | return (
7 |
19 |
65 |
20 |
25 |
26 |
64 | Create New Playlist
21 | 24 |
8 |
11 | )
12 | }
13 |
14 | export default Layout
--------------------------------------------------------------------------------
/frontend/src/components/LogoutButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useAuthStore } from '../store/useAuthStore'
3 | const LogoutButton = ({children}) => {
4 | const {logout} = useAuthStore();
5 |
6 | const onLogout = async() => {
7 | await logout();
8 | }
9 |
10 | return (
11 |
12 | )
13 | }
14 |
15 | export default LogoutButton
--------------------------------------------------------------------------------
/frontend/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { User, Code, LogOut } from "lucide-react";
3 | import { useAuthStore } from "../store/useAuthStore";
4 | import LogoutButton from "./LogoutButton";
5 | import { Link } from "react-router-dom";
6 |
7 | const Navbar = () => {
8 |
9 | const { authUser } = useAuthStore();
10 |
11 | return (
12 |
85 | );
86 | };
87 |
88 | export default Navbar;
89 |
--------------------------------------------------------------------------------
/frontend/src/components/PlaylistProfile.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { usePlaylistStore } from '../store/usePlaylistStore';
3 | import { Link } from 'react-router-dom';
4 | import { BookOpen, ChevronDown, ChevronUp, Clock, List, Tag, ExternalLink } from 'lucide-react';
5 |
6 | const PlaylistProfile = () => {
7 | const { getAllPlaylists, playlists , deletePlaylist } = usePlaylistStore();
8 | const [expandedPlaylist, setExpandedPlaylist] = useState(null);
9 |
10 | useEffect(() => {
11 | getAllPlaylists();
12 | }, [getAllPlaylists]);
13 |
14 | const togglePlaylist = (id) => {
15 | if (expandedPlaylist === id) {
16 | setExpandedPlaylist(null);
17 | } else {
18 | setExpandedPlaylist(id);
19 | }
20 | };
21 |
22 | const handleDelete = async (id) => {
23 | await deletePlaylist(id);
24 | };
25 |
26 | const getDifficultyBadge = (difficulty) => {
27 | switch (difficulty) {
28 | case 'EASY':
29 | return Easy;
30 | case 'MEDIUM':
31 | return Medium;
32 | case 'HARD':
33 | return Hard;
34 | default:
35 | return Unknown;
36 | }
37 | };
38 |
39 | const formatDate = (dateString) => {
40 | const date = new Date(dateString);
41 | return new Intl.DateTimeFormat('en-US', {
42 | year: 'numeric',
43 | month: 'short',
44 | day: 'numeric'
45 | }).format(date);
46 | };
47 |
48 | return (
49 |
50 |
170 | );
171 | };
172 |
173 | export default PlaylistProfile;
--------------------------------------------------------------------------------
/frontend/src/components/ProblemCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { motion } from "framer-motion";
3 | import { Code, ArrowRight } from "lucide-react";
4 |
5 |
6 |
7 |
8 | const difficultyColors = {
9 | EASY: "bg-success",
10 | MEDIUM: "bg-warning",
11 | HARD: "bg-error",
12 | };
13 |
14 | const difficultyText = {
15 | EASY: "Easy",
16 | MEDIUM: "Medium",
17 | HARD: "Hard",
18 | };
19 |
20 | const ProblemCard = ({ problem, onSelect }) => {
21 | return (
22 |
51 |
169 |
52 |
57 |
58 | {playlists.length === 0 ? (
59 | My Playlists
53 | 56 |
60 |
68 | ) : (
69 |
61 |
67 | No playlists found
62 |Create your first playlist to organize problems!
63 |
64 |
65 |
66 |
70 | {playlists.map((playlist) => (
71 |
167 | )}
168 |
72 |
165 | ))}
166 |
73 | {/* Playlist Header */}
74 |
164 | togglePlaylist(playlist.id)}
77 | >
78 |
102 |
103 | {/* Description */}
104 |
79 |
98 |
101 |
80 |
84 |
81 |
83 |
85 |
97 | {playlist.name}
86 |
87 |
96 |
88 |
91 |
92 |
95 | {playlist.description}
105 | 106 | {/* Expanded Problems List */} 107 | {expandedPlaylist === playlist.id && ( 108 |
109 |
162 | )}
163 | Problems in this playlist
110 | 111 | {playlist.problems.length === 0 ? ( 112 |
113 | No problems added to this playlist yet.
114 |
115 | ) : (
116 |
117 |
118 |
119 |
154 |
155 | )}
156 |
157 | | Problem | 121 |Difficulty | 122 |Tags | 123 |Action | 124 |
|---|---|---|---|
| {item.problem.title} | 130 |{getDifficultyBadge(item.problem.difficulty)} | 131 |
132 |
133 | {item.problem.tags && item.problem.tags.map((tag, idx) => (
134 |
140 |
135 |
138 | ))}
139 | |
141 |
142 |
146 | |
150 |
158 |
159 |
160 |
161 |
27 |
64 |
28 |
29 | {difficultyText[problem.difficulty]}
30 |
31 |
47 |
48 |
32 | {problem.tags.slice(0, 2).map((tag, index) => (
33 |
37 | {tag}
38 |
39 | ))}
40 | {problem.tags.length > 2 && (
41 |
42 | +{problem.tags.length - 2}
43 |
44 | )}
45 |
46 | 49 | {problem.title} 50 |
51 | 52 |53 | {problem.description} 54 |
55 | 56 | 63 |
19 |
22 | );
23 | case 'MEDIUM':
24 | return (
25 |
26 |
29 | );
30 | case 'HARD':
31 | return (
32 |
33 |
36 | );
37 | default:
38 | return (
39 |
40 | Unknown
41 |
42 | );
43 | }
44 | };
45 |
46 | return (
47 |
48 |
145 | );
146 | };
147 |
148 | export default ProblemSolvedByUser;
--------------------------------------------------------------------------------
/frontend/src/components/SampleProblemSelector.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { motion, AnimatePresence } from "framer-motion";
3 | import { X, ChevronRight, Search } from "lucide-react";
4 | import ProblemCard from "./ProblemCard";
5 |
6 |
7 |
8 |
9 |
10 |
11 | const categories = [
12 | { id: "all", name: "All Problems", icon: null },
13 | { id: "array", name: "Arrays & Strings", icon: null },
14 | { id: "linkedlist", name: "Linked Lists", icon: null },
15 | { id: "tree", name: "Trees & Graphs", icon: null },
16 | { id: "dp", name: "Dynamic Programming", icon: null },
17 | { id: "other", name: "Other Algorithms", icon: null },
18 | ];
19 |
20 | const SampleProblemSelector = ({
21 | isOpen,
22 | onClose,
23 | onSelectProblem,
24 | problems,
25 | }) => {
26 | const [selectedCategory, setSelectedCategory] = useState("all");
27 | const [searchQuery, setSearchQuery] = useState("");
28 | const [filteredProblems, setFilteredProblems] = useState(problems);
29 |
30 | useEffect(() => {
31 | if (isOpen) {
32 | document.body.style.overflow = "hidden";
33 | } else {
34 | document.body.style.overflow = "auto";
35 | }
36 | return () => {
37 | document.body.style.overflow = "auto";
38 | };
39 | }, [isOpen]);
40 |
41 | useEffect(() => {
42 | let filtered = problems;
43 |
44 | // Filter by category
45 | if (selectedCategory !== "all") {
46 | filtered = filtered.filter((p) => p.category === selectedCategory);
47 | }
48 |
49 | // Filter by search
50 | if (searchQuery) {
51 | const lowerQuery = searchQuery.toLowerCase();
52 | filtered = filtered.filter(
53 | (p) =>
54 | p.title.toLowerCase().includes(lowerQuery) ||
55 | p.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))
56 | );
57 | }
58 |
59 | setFilteredProblems(filtered);
60 | }, [selectedCategory, searchQuery, problems]);
61 |
62 | return (
63 |
49 |
144 | Problems Solved
50 | 51 | {solvedProblems.length === 0 ? ( 52 |
53 |
63 | ) : (
64 |
54 |
62 | No problems solved yet
55 |Start solving problems to see them listed here!
56 |
57 |
58 | View Problems
59 |
60 |
61 |
65 |
118 | )}
119 |
120 | {/* Stats Cards */}
121 | {solvedProblems.length > 0 && (
122 |
66 |
67 |
68 |
105 |
106 |
107 | | Problem | 70 |Difficulty | 71 |Tags | 72 |Actions | 73 |
|---|---|---|---|
| {problem.title} | 79 |{getDifficultyBadge(problem.difficulty)} | 80 |
81 |
82 | {problem.tags && problem.tags.map((tag, index) => (
83 |
89 |
84 |
87 | ))}
88 | |
90 |
91 |
92 |
96 |
100 | |
101 |
108 |
117 |
109 |
110 | Total problems solved: {solvedProblems.length}
111 |
112 |
113 | Solve more problems
114 |
115 |
116 |
123 |
142 | )}
143 |
124 |
129 | Easy
125 |
126 | {solvedProblems.filter(p => p.difficulty === 'EASY').length}
127 |
128 |
130 |
135 | Medium
131 |
132 | {solvedProblems.filter(p => p.difficulty === 'MEDIUM').length}
133 |
134 |
136 |
141 | Hard
137 |
138 | {solvedProblems.filter(p => p.difficulty === 'HARD').length}
139 |
140 |
81 |
91 |
92 | 82 | Sample Problems 83 |
84 | 90 |
93 | {/* Categories Sidebar */}
94 |
151 |
95 |
114 |
115 | {/* Problems List */}
116 |
96 | {categories.map((category) => (
97 |
111 | ))}
112 |
113 |
117 |
150 |
118 |
129 |
130 |
119 | setSearchQuery(e.target.value)}
125 | />
126 |
128 |
131 | {filteredProblems.length === 0 ? (
132 |
149 |
133 |
137 | ) : (
138 | 134 | No problems found matching your criteria. 135 |
136 |
139 | {filteredProblems.map((problem) => (
140 | onSelectProblem(problem.id)}
144 | />
145 | ))}
146 |
147 | )}
148 |
24 | {/* Overall Status */}
25 |
114 | );
115 | };
116 |
117 | export default SubmissionResults;
118 |
--------------------------------------------------------------------------------
/frontend/src/components/SubmissionList.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | CheckCircle2,
4 | XCircle,
5 | Clock,
6 | MemoryStick as Memory,
7 | Calendar,
8 | } from "lucide-react";
9 |
10 | const SubmissionsList = ({ submissions, isLoading }) => {
11 | // Helper function to safely parse JSON strings
12 | const safeParse = (data) => {
13 | try {
14 | return JSON.parse(data);
15 | } catch (error) {
16 | console.error("Error parsing data:", error);
17 | return [];
18 | }
19 | };
20 |
21 | // Helper function to calculate average memory usage
22 | const calculateAverageMemory = (memoryData) => {
23 | const memoryArray = safeParse(memoryData).map((m) =>
24 | parseFloat(m.split(" ")[0])
25 | );
26 | if (memoryArray.length === 0) return 0;
27 | return (
28 | memoryArray.reduce((acc, curr) => acc + curr, 0) / memoryArray.length
29 | );
30 | };
31 |
32 | // Helper function to calculate average runtime
33 | const calculateAverageTime = (timeData) => {
34 | const timeArray = safeParse(timeData).map((t) =>
35 | parseFloat(t.split(" ")[0])
36 | );
37 | if (timeArray.length === 0) return 0;
38 | return timeArray.reduce((acc, curr) => acc + curr, 0) / timeArray.length;
39 | };
40 |
41 | // Loading state
42 | if (isLoading) {
43 | return (
44 |
26 |
70 |
71 | {/* Test Cases Results */}
72 |
27 |
36 |
37 |
28 |
35 | Status
29 |
32 | {submission.status}
33 |
34 |
38 |
45 |
46 |
39 |
44 | Success Rate
40 |
41 | {successRate.toFixed(1)}%
42 |
43 |
47 |
57 |
58 |
48 |
49 |
52 |
56 |
49 |
52 |
53 | {avgTime.toFixed(3)} s
54 |
55 |
59 |
69 |
60 |
61 |
64 |
68 |
61 |
64 |
65 | {avgMemory.toFixed(0)} KB
66 |
67 |
73 |
113 |
74 |
112 | Test Cases Results
75 |
76 |
77 |
78 |
110 |
111 | | Status | 80 |Expected Output | 81 |Your Output | 82 |Memory | 83 |Time | 84 |
|---|---|---|---|---|
|
90 | {testCase.passed ? (
91 |
92 |
95 | ) : (
96 |
97 |
100 | )}
101 | |
102 | {testCase.expected} | 103 |{testCase.stdout || 'null'} | 104 |{testCase.memory} | 105 |{testCase.time} | 106 |
45 |
46 |
47 | );
48 | }
49 |
50 | // No submissions state
51 | if (!submissions?.length) {
52 | return (
53 |
54 |
56 | );
57 | }
58 |
59 | return (
60 | No submissions yet
55 |
61 | {submissions.map((submission) => {
62 | const avgMemory = calculateAverageMemory(submission.memory);
63 | const avgTime = calculateAverageTime(submission.time);
64 |
65 | return (
66 |
111 | );
112 | };
113 |
114 | export default SubmissionsList;
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @plugin "daisyui";
3 |
4 | @keyframes blink {
5 | 0%,
6 | 100% {
7 | opacity: 1;
8 | }
9 | 50% {
10 | opacity: 0;
11 | }
12 | }
13 |
14 | .animate-blink {
15 | animation: blink 1s infinite;
16 | }
17 |
18 | .animate-pulse {
19 | animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
20 | }
21 |
22 | .delay-100 {
23 | animation-delay: 1s;
24 | }
25 |
26 | .delay-200 {
27 | animation-delay: 2s;
28 | }
29 |
30 | .delay-300 {
31 | animation-delay: 3s;
32 | }
33 |
34 | .delay-500 {
35 | animation-delay: 5s;
36 | }
37 |
38 | .delay-700 {
39 | animation-delay: 7s;
40 | }
41 |
42 | @keyframes pulse {
43 | 0%,
44 | 100% {
45 | opacity: 0.3;
46 | transform: scale(1);
47 | }
48 | 50% {
49 | opacity: 0.8;
50 | transform: scale(1.05);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/frontend/src/libs/axios.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | export const axiosInstance = axios.create({
4 | baseURL: import.meta.env.MODE === "development" ? "http://localhost:8080/api/v1" : "/api/v1",
5 | withCredentials: true,
6 | });
7 |
--------------------------------------------------------------------------------
/frontend/src/libs/utils.js:
--------------------------------------------------------------------------------
1 | function getLanguageName(languageId) {
2 | const LANGUAGE_NAMES = {
3 | 74: "TypeScript",
4 | 63: "JavaScript",
5 | 71: "Python",
6 | 62: "Java",
7 | };
8 | return LANGUAGE_NAMES[languageId] || "Unknown";
9 | }
10 |
11 | export { getLanguageName };
12 |
13 |
14 | export function getLanguageId(language) {
15 | const languageMap = {
16 | "PYTHON": 71,
17 | "JAVASCRIPT": 63,
18 | "JAVA": 62,
19 | "TypeScript": 74,
20 | };
21 | return languageMap[language.toUpperCase()];
22 | }
--------------------------------------------------------------------------------
/frontend/src/main.jsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import { BrowserRouter } from "react-router-dom";
4 |
5 | import "./index.css";
6 |
7 | import App from "./App.jsx";
8 |
9 | createRoot(document.getElementById("root")).render(
10 |
70 |
108 | );
109 | })}
110 |
71 |
107 |
72 | {/* Left Section: Status and Language */}
73 |
106 |
74 | {submission.status === "Accepted" ? (
75 |
87 |
88 | {/* Right Section: Runtime, Memory, and Date */}
89 |
76 |
79 | ) : (
80 |
81 |
84 | )}
85 | {submission.language}
86 |
90 |
105 |
91 |
94 |
95 |
98 |
99 |
104 |
7 |
9 | )
10 | }
11 |
12 | export default AddProblem
--------------------------------------------------------------------------------
/frontend/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 |
3 | import { useProblemStore } from "../store/useProblemStore";
4 | import ProblemsTable from "../components/ProblemTable";
5 | import { Loader } from "lucide-react";
6 |
7 | const HomePage = () => {
8 | const { getAllProblems ,problems , isProblemsLoading} = useProblemStore();
9 |
10 | useEffect(() => {
11 | getAllProblems();
12 | }, [getAllProblems]);
13 |
14 | console.log(problems);
15 |
16 | if (isProblemsLoading) {
17 | return (
18 |
19 |
21 | );
22 | }
23 |
24 | return (
25 | 28 | Welcome to LeetLab 29 |
30 |31 | A Platform Inspired by Leetcode which helps you to prepare for coding interviews and helps you to improve your coding skills by solving coding problems 32 |
33 | 34 | { 35 | problems.length > 0 ?37 | No problems found 38 |
39 | ) 40 | } 41 |
49 | {/* Left Side - Form */}
50 |
159 | );
160 | };
161 |
162 | export default LoginPage;
163 |
--------------------------------------------------------------------------------
/frontend/src/pages/Profile.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import { ArrowLeft, Mail, User, Shield, Image } from "lucide-react";
4 | import { useAuthStore } from "../store/useAuthStore";
5 | import ProfileSubmission from "../components/ProfileSubmission";
6 | import ProblemSolvedByUser from "../components/ProblemSolvedByUser";
7 | import PlaylistProfile from "../components/PlaylistProfile";
8 |
9 | const Profile = () => {
10 | const { authUser } = useAuthStore();
11 |
12 | return (
13 |
51 |
150 |
151 | {/* Right Side - Image/Pattern */}
152 |
52 | {/* Logo */}
53 |
149 |
54 |
62 |
63 | {/* Form */}
64 |
138 |
139 | {/* Footer */}
140 |
55 |
61 |
56 |
58 | Welcome Back
59 |Sign in to your account
60 |
141 |
148 | 142 | Don't have an account?{" "} 143 | 144 | Create account 145 | 146 |
147 |
14 | {/* Header with back button */}
15 |
118 | );
119 | };
120 |
121 | export default Profile;
--------------------------------------------------------------------------------
/frontend/src/pages/SignUpPage.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useForm } from "react-hook-form";
3 | import { zodResolver } from "@hookform/resolvers/zod";
4 | import { z } from "zod";
5 | import AuthImagePattern from "../components/AuthImagePattern";
6 | import { Link } from "react-router-dom";
7 | import {
8 | Code,
9 | Eye,
10 | EyeOff,
11 | Loader2,
12 | Lock,
13 | Mail,
14 | } from "lucide-react";
15 | import { useAuthStore } from "../store/useAuthStore";
16 |
17 | // ✅ Zod schema
18 | const SignUpSchema = z.object({
19 | email: z.string().email("Enter a valid email"),
20 | password: z.string().min(6, "Password must be at least 6 characters"),
21 | name: z.string().min(3, "Name must be at least 3 characters"),
22 | });
23 |
24 |
25 |
26 | const SignUpPage = () => {
27 | const [showPassword, setShowPassword] = useState(false);
28 |
29 | const {signup , isSigninUp} = useAuthStore();
30 |
31 | const {
32 | register,
33 | handleSubmit,
34 | formState: { errors },
35 | } = useForm({
36 | resolver: zodResolver(SignUpSchema),
37 | });
38 |
39 | const onSubmit = async (data) => {
40 |
41 | try {
42 | await signup(data); // your auth logic here
43 | console.log("SignUp Data:", data);
44 | } catch (error) {
45 | console.error("SignUp failed:", error);
46 | }
47 | };
48 |
49 | return (
50 |
16 |
23 |
24 |
17 |
18 |
22 | Profile
21 |
25 | {/* Profile Card */}
26 |
107 |
27 |
104 |
105 |
106 |
28 | {/* Profile Header */}
29 |
103 |
30 | {/* Avatar */}
31 |
47 |
48 |
49 |
50 | {/* User Information */}
51 |
32 |
40 |
41 | {/* Name and Role Badge */}
42 |
33 | {authUser.image ? (
34 | 
35 | ) : (
36 | {authUser.name ? authUser.name.charAt(0) : "U"}
37 | )}
38 |
39 |
43 |
46 | {authUser.name}
44 |{authUser.role}
45 |
52 | {/* Email */}
53 |
96 |
97 | {/* Action Buttons */}
98 |
54 |
60 |
61 | {/* User ID */}
62 |
55 |
57 | Email
58 | {authUser.email}
59 |
63 |
69 |
70 | {/* Role Status */}
71 |
64 |
66 | User ID
67 | {authUser.id}
68 |
72 |
81 |
82 | {/* Profile Image Status */}
83 |
73 |
75 | Role
76 | {authUser.role}
77 |
78 | {authUser.role === "ADMIN" ? "Full system access" : "Limited access"}
79 |
80 |
84 |
95 |
85 |
87 | Profile Image
88 |
89 | {authUser.image ? "Uploaded" : "Not Set"}
90 |
91 |
92 | {authUser.image ? "Image available" : "Upload a profile picture"}
93 |
94 |
99 |
100 |
101 |
102 |
108 |
109 |
115 |
116 | {/* PLaylist created by the user and their actions */}
117 |
51 | {/* Left Side - Form */}
52 |
185 | );
186 | };
187 |
188 | export default SignUpPage;
189 |
--------------------------------------------------------------------------------
/frontend/src/store/useActions.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../libs/axios.js";
3 | import toast from "react-hot-toast";
4 |
5 |
6 | export const useActions = create((set) => ({
7 | isDeletingProblem: false,
8 | onDeleteProblem: async (id) => {
9 | try {
10 | set({ isDeletingProblem: true });
11 | const res = await axiosInstance.delete(`/problems/delete-problem/${id}`);
12 | toast.success(res.data.message);
13 | } catch (error) {
14 | console.log("Error deleting problem", error);
15 | toast.error("Error deleting problem");
16 | }
17 | finally{
18 | set({ isDeletingProblem: false });
19 | }
20 | }
21 | }));
--------------------------------------------------------------------------------
/frontend/src/store/useAuthStore.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../libs/axios.js";
3 | import toast from "react-hot-toast";
4 |
5 |
6 | export const useAuthStore = create((set , get)=>({
7 | authUser: null,
8 | isSigninUp: false,
9 | isLoggingIn: false,
10 | isCheckingAuth: false,
11 |
12 | checkAuth: async () => {
13 | set({ isCheckingAuth: true }); // ✅ FIXED
14 |
15 | try {
16 | const res = await axiosInstance.get("/auth/check");
17 | console.log("✅ checkAuth response:", res.data);
18 | set({ authUser: res.data.user });
19 | } catch (error) {
20 | console.log("❌ Error checking auth:", error);
21 | set({ authUser: null });
22 | } finally {
23 | set({ isCheckingAuth: false });
24 | }
25 | }
26 | ,
27 |
28 |
29 | signup:async(data)=>{
30 | set({isSigninUp:true});
31 | try {
32 | const res = await axiosInstance.post("/auth/register" , data);
33 |
34 | set({authUser:res.data.user});
35 |
36 | toast.success(res.data.message);
37 | } catch (error) {
38 | console.log("Error signing up",error);
39 | toast.error("Error signing up");
40 | }
41 | finally{
42 | set({isSigninUp:false});
43 | }
44 | },
45 |
46 | login:async(data)=>{
47 | set({isLoggingIn:true});
48 | try {
49 | const res = await axiosInstance.post("/auth/login" , data);
50 |
51 | set({authUser:res.data.user});
52 |
53 | toast.success(res.data.message);
54 |
55 | } catch (error) {
56 | console.log("Error logging in",error);
57 | toast.error("Error logging in");
58 | }
59 | finally{
60 | set({isLoggingIn:false});
61 | }
62 | },
63 |
64 | logout:async()=>{
65 | try {
66 | await axiosInstance.post("/auth/logout");
67 | set({authUser:null});
68 |
69 | toast.success("Logout successful");
70 | } catch (error) {
71 | console.log("Error logging out",error);
72 | toast.error("Error logging out");
73 | }
74 | }
75 |
76 |
77 | }))
--------------------------------------------------------------------------------
/frontend/src/store/useExecution.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../libs/axios.js";
3 | import toast from "react-hot-toast";
4 |
5 |
6 | export const useExecutionStore = create((set, get) => ({
7 | isExecuting: false,
8 | submission: null,
9 |
10 |
11 | executeCode:async ( source_code, language_id, stdin, expected_outputs, problemId)=>{
12 | try {
13 | set({isExecuting:true});
14 | console.log("Submission:",JSON.stringify({
15 | source_code,
16 | language_id,
17 | stdin,
18 | expected_outputs,
19 | problemId
20 | }));
21 | const res = await axiosInstance.post("/execute-code" , { source_code, language_id, stdin, expected_outputs, problemId });
22 |
23 | set({submission:res.data.submission});
24 |
25 | toast.success(res.data.message);
26 | } catch (error) {
27 | console.log("Error executing code",error);
28 | toast.error("Error executing code");
29 | }
30 | finally{
31 | set({isExecuting:false});
32 | }
33 | }
34 | }));
--------------------------------------------------------------------------------
/frontend/src/store/usePlaylistStore.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../libs/axios";
3 | import toast from "react-hot-toast";
4 |
5 | export const usePlaylistStore = create((set, get) => ({
6 | playlists: [],
7 | currentPlaylist: null,
8 | isLoading: false,
9 | error: null,
10 |
11 | createPlaylist: async (playlistData) => {
12 | try {
13 | set({ isLoading: true });
14 | const response = await axiosInstance.post(
15 | "/playlist/create-playlist",
16 | playlistData
17 | );
18 |
19 | set((state) => ({
20 | playlists: [...state.playlists, response.data.playList],
21 | }));
22 |
23 | toast.success("Playlist created successfully");
24 | return response.data.playList;
25 | } catch (error) {
26 | console.error("Error creating playlist:", error);
27 | toast.error(error.response?.data?.error || "Failed to create playlist");
28 | throw error;
29 | } finally {
30 | set({ isLoading: false });
31 | }
32 | },
33 |
34 | getAllPlaylists: async () => {
35 | try {
36 | set({ isLoading: true });
37 | const response = await axiosInstance.get("/playlist");
38 | set({ playlists: response.data.playLists });
39 | } catch (error) {
40 | console.error("Error fetching playlists:", error);
41 | toast.error("Failed to fetch playlists");
42 | } finally {
43 | set({ isLoading: false });
44 | }
45 | },
46 |
47 | getPlaylistDetails: async (playlistId) => {
48 | try {
49 | set({ isLoading: true });
50 | const response = await axiosInstance.get(`/playlist/${playlistId}`);
51 | set({ currentPlaylist: response.data.playList });
52 | } catch (error) {
53 | console.error("Error fetching playlist details:", error);
54 | toast.error("Failed to fetch playlist details");
55 | } finally {
56 | set({ isLoading: false });
57 | }
58 | },
59 |
60 | addProblemToPlaylist: async (playlistId, problemIds) => {
61 | try {
62 | set({ isLoading: true });
63 | await axiosInstance.post(`/playlist/${playlistId}/add-problem`, {
64 | problemIds,
65 | });
66 |
67 | toast.success("Problem added to playlist");
68 |
69 | // Refresh the playlist details
70 | if (get().currentPlaylist?.id === playlistId) {
71 | await get().getPlaylistDetails(playlistId);
72 | }
73 | } catch (error) {
74 | console.error("Error adding problem to playlist:", error);
75 | toast.error("Failed to add problem to playlist");
76 | } finally {
77 | set({ isLoading: false });
78 | }
79 | },
80 |
81 | removeProblemFromPlaylist: async (playlistId, problemIds) => {
82 | try {
83 | set({ isLoading: true });
84 | await axiosInstance.post(`/playlist/${playlistId}/remove-problems`, {
85 | problemIds,
86 | });
87 |
88 | toast.success("Problem removed from playlist");
89 |
90 | // Refresh the playlist details
91 | if (get().currentPlaylist?.id === playlistId) {
92 | await get().getPlaylistDetails(playlistId);
93 | }
94 | } catch (error) {
95 | console.error("Error removing problem from playlist:", error);
96 | toast.error("Failed to remove problem from playlist");
97 | } finally {
98 | set({ isLoading: false });
99 | }
100 | },
101 |
102 | deletePlaylist: async (playlistId) => {
103 | try {
104 | set({ isLoading: true });
105 | await axiosInstance.delete(`/playlist/${playlistId}`);
106 |
107 | set((state) => ({
108 | playlists: state.playlists.filter((p) => p.id !== playlistId),
109 | }));
110 |
111 | toast.success("Playlist deleted successfully");
112 | } catch (error) {
113 | console.error("Error deleting playlist:", error);
114 | toast.error("Failed to delete playlist");
115 | } finally {
116 | set({ isLoading: false });
117 | }
118 | },
119 | }));
120 |
--------------------------------------------------------------------------------
/frontend/src/store/useProblemStore.js:
--------------------------------------------------------------------------------
1 |
2 | import { create } from "zustand";
3 | import { axiosInstance } from "../libs/axios.js";
4 | import toast from "react-hot-toast";
5 |
6 | export const useProblemStore = create((set, get) => ({
7 | isProblemLoading: false,
8 | isProblemsLoading: false,
9 | problems: [],
10 | problem: null,
11 | solvedProblems: [],
12 |
13 | getAllProblems: async () => {
14 | try {
15 | set({ isProblemsLoading: true });
16 | const res = await axiosInstance.get("/problems/get-all-problems");
17 |
18 | set({ problems: res.data.problems });
19 |
20 |
21 | } catch (error) {
22 | console.log("Error getting all problems", error);
23 | toast.error("Error getting all problems");
24 | } finally {
25 | set({ isProblemsLoading: false });
26 | }
27 | },
28 |
29 | getProblemById: async (id) => {
30 | try {
31 | set({ isProblemLoading: true });
32 | const res = await axiosInstance.get(`/problems/get-problem/${id}`);
33 |
34 | set({ problem: res.data.problem });
35 |
36 | toast.success(res.data.message);
37 | } catch (error) {
38 | console.log("Error getting problem", error);
39 | toast.error("Error getting problem");
40 | } finally {
41 | set({ isProblemLoading: false });
42 | }
43 | },
44 |
45 | getSolvedProblemByUser: async () => {
46 | try {
47 | const res = await axiosInstance.get("/problems/get-solved-problem");
48 |
49 | set({ solvedProblems: res.data.problems });
50 | } catch (error) {
51 | console.log("Error getting solved problems", error);
52 | toast.error("Error getting solved problems");
53 | }
54 | },
55 |
56 | }));
57 |
--------------------------------------------------------------------------------
/frontend/src/store/useSubmissionStore.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../libs/axios.js";
3 | import toast from "react-hot-toast";
4 |
5 | export const useSubmissionStore = create((set, get) => ({
6 | isLoading: false,
7 | submissions: [],
8 | submission: null,
9 | submissionCount: null,
10 |
11 | getAllSubmissions: async () => {
12 | try {
13 | set({ isLoading: true });
14 | const res = await axiosInstance.get("/submissions/get-all-submissions");
15 |
16 | set({ submissions: res.data.submissions });
17 |
18 | toast.success(res.data.message);
19 | } catch (error) {
20 | console.log("Error getting all submissions", error);
21 | toast.error("Error getting all submissions");
22 | } finally {
23 | set({ isLoading: false });
24 | }
25 | },
26 |
27 | getSubmissionForProblem: async (problemId) => {
28 | try {
29 | const res = await axiosInstance.get(
30 | `/submissions/get-submissions/${problemId}`
31 | );
32 |
33 | set({ submission: res.data.submissions });
34 |
35 |
36 |
37 | } catch (error) {
38 | console.log("Error getting submissions for problem", error);
39 |
40 | toast.error("Error getting submissions for problem");
41 |
42 | } finally {
43 | set({ isLoading: false });
44 | }
45 | },
46 |
47 | getSubmissionCountForProblem: async (problemId) => {
48 | try {
49 | const res = await axiosInstance.get(
50 | `/submissions/get-submissions-count/${problemId}`
51 | );
52 |
53 | set({ submissionCount: res.data.count });
54 | } catch (error) {
55 | console.log("Error getting submission count for problem", error);
56 | toast.error("Error getting submission count for problem");
57 | }
58 | },
59 | }));
60 |
--------------------------------------------------------------------------------
/frontend/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 | import tailwindcss from '@tailwindcss/vite'
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 | plugins: [react() , tailwindcss(),],
7 | })
8 |
--------------------------------------------------------------------------------
/judge0-installation-guide.md:
--------------------------------------------------------------------------------
1 | https://organic-citipati-da4.notion.site/Judge0-installation-1dae8b262f2680399590d92a04a90e3d
2 |
3 |
4 | # 🚀 Setting Up WSL, Docker, and Judge0 on Windows
5 |
6 | ---
7 |
8 | ## **Step 1: Install WSL and Ubuntu**
9 |
10 | 1. **Enable WSL**
11 | - Open **PowerShell** as **Administrator** and run:
12 | ```powershell
13 | wsl --install
14 | ```
15 | - This will install **WSL** (Windows Subsystem for Linux) along with the default **Ubuntu** distribution.
16 |
17 | 2. **Restart Your Computer**
18 | - After the installation, you’ll be prompted to **restart your computer**.
19 | - Restart to complete the WSL setup.
20 |
21 | 3. **Complete Ubuntu Setup**
22 | - Open the **Ubuntu terminal** from the Start menu.
23 | - Follow the promp
24 | ts to **create a UNIX username and password**.
25 |
26 | 4. **Update Ubuntu**
27 | - Once Ubuntu is set up, run the following commands to update all packages:
28 | ```bash
29 | sudo apt update && sudo apt upgrade -y
30 | ```
31 |
32 | 5. *(Optional)* **Adjust cgroup settings for better Docker compatibility**
33 | - Open the GRUB config file:
34 | ```bash
35 | sudo nano /etc/default/grub
36 | ```
37 | - Find the line starting with `GRUB_CMDLINE_LINUX` and change it to:
38 | ```bash
39 | GRUB_CMDLINE_LINUX="systemd.unified_cgroup_hierarchy=0"
40 | ```
41 | - Save and exit (`Ctrl + O`, `Enter`, `Ctrl + X`).
42 | - Update GRUB and reboot:
43 | ```bash
44 | sudo update-grub
45 | sudo reboot
46 | ```
47 |
48 | ---
49 |
50 | ## **Step 2: Install Docker and Docker Compose**
51 |
52 | 1. **Install Docker**
53 | - Open the **Ubuntu terminal** and run:
54 | ```bash
55 | sudo apt update && sudo apt install -y docker.io
56 | ```
57 | - (Note: It's better to install `docker.io` package for Ubuntu.)
58 |
59 | 2. **Install Docker Compose**
60 | - Still in the Ubuntu terminal, install Docker Compose:
61 | ```bash
62 | sudo apt install -y docker-compose
63 | ```
64 |
65 | ---
66 |
67 | ## **Step 3: Install and Set Up Judge0**
68 |
69 | 1. **Download and Extract Judge0**
70 | - Download the Judge0 release archive:
71 | ```bash
72 | wget https://github.com/judge0/judge0/releases/download/v1.13.1/judge0-v1.13.1.zip
73 | ```
74 | - Unzip the downloaded archive:
75 | ```bash
76 | unzip judge0-v1.13.1.zip
77 | ```
78 |
79 | 2. **Set Up Secure Passwords**
80 | - **Generate random passwords** for Redis and Postgres:
81 | - Visit [Random Password Generator](https://www.random.org/passwords/?num=1&len=32&format=plain&rnd=new) and copy the first password.
82 | - Open the `judge0.conf` file:
83 | ```bash
84 | nano judge0-v1.13.1/.env
85 | ```
86 | - Update the `REDIS_PASSWORD` with the generated password.
87 | - Repeat the process for `POSTGRES_PASSWORD` using a new random password.
88 |
89 | 3. **Start Judge0 Services**
90 | - Navigate to the Judge0 folder:
91 | ```bash
92 | cd judge0-v1.13.1
93 | ```
94 | - Start the database and Redis services:
95 | ```bash
96 | docker-compose up -d db redis
97 | ```
98 | - Wait for a few seconds:
99 | ```bash
100 | sleep 10s
101 | ```
102 | - Start the remaining services:
103 | ```bash
104 | docker-compose up -d
105 | ```
106 | - Wait a few more seconds:
107 | ```bash
108 | sleep 5s
109 | ```
110 |
111 | 4. **Verify the Installation**
112 | - Open your browser and visit:
113 | ```
114 | http://localhost:2358/docs
115 | ```
116 | - You should see the Judge0 API documentation page, meaning your Judge0 instance is running successfully!
117 |
118 | ---
119 |
120 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | ```bash
2 | npx prisma init
3 | ```
4 |
5 | This will create a new `prisma/` folder with a `schema.prisma` file inside, and also add a `.env` file at the root of your project.
6 |
7 | If you haven't installed Prisma yet, first install it with:
8 |
9 | ```bash
10 | npm install prisma --save-dev
11 | ```
12 |
13 | And if you also want the Prisma Client to query your database:
14 |
15 | ```bash
16 | npm install @prisma/client
17 | ```
18 |
19 |
20 | docker run --name my-postgres -e POSTGRES_USER=myuser -e POSTGRES_PASSWORD=mypassword -p 5432:5432 -d postgres
21 |
22 |
23 | # LeetCode Clone - Problem Solving Platform
24 |
25 | ---
26 | 
27 |
28 | ## 🌟 About the Project
29 |
30 | This is a **LeetLab - A Leetcode Inspired Product** designed to help developers practice coding challenges in multiple programming languages (JavaScript, Python, Java). The platform includes features such as:
31 |
32 | - **Dynamic Code Editor**: Powered by Monaco Editor, allowing users to write and test code in real-time.
33 | - **Problem Descriptions**: Detailed problem descriptions, examples, constraints, and hints.
34 | - **Test Cases**: Predefined test cases for each problem to validate solutions.
35 | - **Multi-Language Support**: Write solutions in JavaScript, Python, or Java.
36 | - **Submission Tracking**: View submission history, memory usage, runtime, and status (Accepted, Wrong Answer, etc.).
37 | - **Responsive Design**: Built with modern UI/UX principles for a seamless experience on all devices.
38 |
39 | ---
40 |
41 | ## 🚀 Features
42 |
43 | ### 1. **Interactive Code Editor**
44 |
45 | - Real-time syntax highlighting using the Monaco Editor.
46 | - Supports JavaScript, Python, and Java.
47 |
48 | ### 2. **Dynamic Input Parsing**
49 |
50 | - Users can submit input dynamically via `readline` or predefined test cases.
51 |
52 | ### 3. **Problem Details**
53 |
54 | - Each problem includes:
55 | - Description
56 | - Examples with inputs, outputs, and explanations
57 | - Constraints
58 | - Editorial (hints and optimal solutions)
59 |
60 | ### 4. **Execution and Submission**
61 |
62 | - Run code directly in the browser and get instant feedback.
63 | - View execution results, including runtime, memory usage, and error messages.
64 |
65 | ### 5. **User Authentication**
66 |
67 | - Secure login and registration for tracking user progress and submissions.
68 |
69 | ### 6. **Admin Panel**
70 |
71 | - Admins can add new problems, manage submissions.
72 |
73 | ---
74 |
75 | ## 🛠️ Tech Stack
76 |
77 | - **Frontend**: React.js, Tailwind CSS, Monaco Editor
78 | - **Backend**: Node.js, Express.js
79 | - **Database**: PostgreSQL (or Prisma ORM)
80 | - **Authentication**: JWT (JSON Web Tokens)
81 | - **Code Execution**: Judge0 API (for running and validating code submissions)
82 | - **State Management**: Zustand (React state management library)
83 | - **Version Control**: Git, GitHub
84 |
85 | ---
86 |
87 | ## 📦 Installation and Setup
88 |
89 | ### Prerequisites
90 |
91 | - Node.js (v16 or higher)
92 | - npm or yarn
93 | - PostgreSQL database
94 | - Judge0 API
95 | ### Steps to Run Locally
96 |
97 | 1. **Clone the Repository**
98 |
99 | ```bash
100 | git clone https://github.com/Aestheticsuraj234/chai-or-leetcode.git
101 | cd backend
102 | cd frontend
103 | ```
104 |
105 | 2. **Install Dependencies**
106 |
107 | ```bash
108 | npm install
109 | ```
110 |
111 | 3. **Set Up Environment Variables**
112 | Create a `.env` file in the root directory and add the following variables:
113 | ```env
114 | PORT =
115 | DATABASE_URL=
116 | JWT_SECRET=
117 | JUDGE0_API_URL=http://localhost:2358/
118 | ```
119 |
120 | 4. **Run the Development Server**
121 | ```bash
122 | npm run dev
123 | ````
124 |
125 |
126 |
127 | ---
128 |
129 |
130 | ## 📝 Contributing
131 |
132 | We welcome contributions from the community! Here’s how you can help:
133 |
134 | 1. **Fork the Repository**
135 | 2. **Create a New Branch**
136 | ```bash
137 | git checkout -b feature/your-feature-name
138 | ```
139 | 3. **Commit Your Changes**
140 | ```bash
141 | git commit -m "Add your feature description"
142 | ```
143 | 4. **Push to the Branch**
144 | ```bash
145 | git push origin feature/your-feature-name
146 | ```
147 | 5. **Open a Pull Request**
148 |
149 |
150 |
151 | Here’s the categorized table for the tasks you’ve listed, organized into **Bug Fixes**, **Enhancements**, and **New Features**:
152 |
153 | ---
154 |
155 | ### **Categorized Tasks**
156 |
157 | | **Category** | **Task Description** | **Focus Area** |
158 | |---------------------|---------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
159 | | **Bug Fixes** | On problem load, there is an issue with the editor. | Debugging and fixing editor initialization issues. |
160 | | | Fix the profile page current UI. | Improving UI/UX consistency on the profile page. |
161 | | | Fix the syntax highlighting of My Submissions in the profile. | Ensuring proper syntax highlighting for code submissions. |
162 | | | Not handled empty states properly. | Adding proper error handling and placeholder content for empty states. |
163 | | | Fix the proper indentation issue while creating a question in the add problem section. | Ensuring clean formatting and validation for problem creation. |
164 | | **Enhancements** | Add Syntax Highlighting for Output. | Enhancing UI/UX by improving readability of outputs (e.g., JSON, arrays). |
165 | | | Add Light and Dark Mode Toggle Functionality. | Improving user experience with theme preferences. |
166 | | | Enhance Our Code Editor (e.g., Code Formatting, Auto-completion, Add Custom Test Cases). | Upgrading the editor with advanced features for better usability. |
167 | | | Proper Profile Tracking (like LeetCode) with Contribution Graph. | Adding detailed tracking and visualization for user progress. |
168 | | | A Great Landing Page and Proper Navigation Routes. | Improving the first impression and navigation flow of the platform. |
169 | | **New Features** | Add Code Submit and Code Running Logic. | Implementing core functionality for running and submitting code. |
170 | | | Make a dynamic function to handle `readline` for dynamic input handling. | Supporting interactive input for coding challenges. |
171 | | | Integrate Free AI Models into This Application. | Adding AI-powered features like hints, suggestions, or explanations. |
172 | | | Like, Unlike, Save, Mark for Revision. | Adding social and study-tracking features for problems. |
173 |
174 | ---
175 |
176 |
--------------------------------------------------------------------------------
/realine.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | // Add readline for dynamic input handling
3 | const readline = require('readline');
4 | ```
5 | **👉** This line **imports** Node.js's built-in `readline` module.
6 | It helps you **read user input** (like when someone types something in the console).
7 |
8 | ---
9 |
10 | ```javascript
11 | const rl = readline.createInterface({
12 | input: process.stdin,
13 | output: process.stdout,
14 | terminal: false
15 | });
16 | ```
17 | **👉** This creates an object `rl` (short for **readline interface**).
18 | It **connects** to the input (keyboard/console) and output (terminal screen).
19 | - `input: process.stdin` → Reads **user typing**.
20 | - `output: process.stdout` → Writes output to **terminal**.
21 | - `terminal: false` → Tells it **not** to treat the input like a fancy terminal (just plain reading).
22 |
23 | ---
24 |
25 | ```javascript
26 | rl.on('line', (line) => {
27 | ```
28 | **👉** This listens for a **'line'** event — whenever a user **types something and presses Enter**.
29 | The typed **line** is passed into the function as a parameter called `line`.
30 |
31 | ---
32 |
33 | ```javascript
34 | const result = isPalindrome(line);
35 | ```
36 | **👉** It **calls** a function `isPalindrome`, passing the user input (`line`) to check if it's a **palindrome**.
37 | (*Palindrome = word that reads same forward and backward, like "madam" or "racecar".*)
38 |
39 | > ⚡ Note: You must have a function `isPalindrome` defined somewhere else.
40 |
41 | ---
42 |
43 | ```javascript
44 | console.log(result ? "true" : "false");
45 | ```
46 | **👉** Prints **"true"** if the result is `true`, otherwise prints **"false"`.
47 | - `result ? "true" : "false"` → This is a **ternary operator** (shortcut if-else).
48 |
49 | ---
50 |
51 | ```javascript
52 | rl.close();
53 | });
54 | ```
55 | **👉** After processing one line, it **closes** the `readline` interface.
56 | Means: No more inputs are accepted, program will finish.
57 |
58 | ---
59 |
60 | # 💡 Quick Summary:
61 | | Step | What Happens |
62 | |:---|:---|
63 | | 1. | Import `readline`. |
64 | | 2. | Create a way to read user input (`rl`). |
65 | | 3. | Wait for user to type and press Enter. |
66 | | 4. | Send what user typed into `isPalindrome()`. |
67 | | 5. | Print "true" or "false" based on whether it's a palindrome. |
68 | | 6. | Close input after one entry. |
69 |
70 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | function getJudge0LanguageId(language) {
2 | const languageMap = {
3 | PYTHON: 71,
4 | JAVASCRIPT: 63,
5 | JAVA: 62,
6 | CPP: 54,
7 | GO: 60,
8 | };
9 | return languageMap[language.toUpperCase()];
10 | }
11 |
12 | const sampleStringProblem = {
13 | referenceSolutions: {
14 | JAVASCRIPT: `/**
15 | * @param {string} s
16 | * @return {boolean}
17 | */
18 | function isPalindrome(s) {
19 | // Convert to lowercase and remove non-alphanumeric characters
20 | s = s.toLowerCase().replace(/[^a-z0-9]/g, '');
21 |
22 | // Check if it's a palindrome
23 | let left = 0;
24 | let right = s.length - 1;
25 |
26 | while (left < right) {
27 | if (s[left] !== s[right]) {
28 | return false;
29 | }
30 | left++;
31 | right--;
32 | }
33 |
34 | return true;
35 | }
36 |
37 | // Add readline for dynamic input handling
38 | const readline = require('readline');
39 | const rl = readline.createInterface({
40 | input: process.stdin,
41 | output: process.stdout,
42 | terminal: false
43 | });
44 |
45 | // Process input line
46 | rl.on('line', (line) => {
47 | // Call solution with the input string
48 | const result = isPalindrome(line);
49 |
50 | // Output the result
51 | console.log(result ? "true" : "false");
52 | rl.close();
53 | });`,
54 | PYTHON: `class Solution:
55 | def isPalindrome(self, s: str) -> bool:
56 | # Convert to lowercase and keep only alphanumeric characters
57 | filtered_chars = [c.lower() for c in s if c.isalnum()]
58 |
59 | # Check if it's a palindrome
60 | return filtered_chars == filtered_chars[::-1]
61 |
62 | # Input parsing
63 | if __name__ == "__main__":
64 | import sys
65 | # Read the input string
66 | s = sys.stdin.readline().strip()
67 |
68 | # Call solution
69 | sol = Solution()
70 | result = sol.isPalindrome(s)
71 |
72 | # Output result
73 | print(str(result).lower()) # Convert True/False to lowercase true/false`,
74 | JAVA: `import java.util.Scanner;
75 |
76 | public class Main {
77 | public static String preprocess(String s) {
78 | return s.replaceAll("[^a-zA-Z0-9]", "").toLowerCase();
79 | }
80 |
81 | public static boolean isPalindrome(String s) {
82 | s = preprocess(s);
83 | int left = 0, right = s.length() - 1;
84 |
85 | while (left < right) {
86 | if (s.charAt(left) != s.charAt(right)) return false;
87 | left++;
88 | right--;
89 | }
90 |
91 | return true;
92 | }
93 |
94 | public static void main(String[] args) {
95 | Scanner sc = new Scanner(System.in);
96 | String input = sc.nextLine();
97 |
98 | boolean result = isPalindrome(input);
99 | System.out.println(result ? "true" : "false");
100 | }
101 | }
102 | `,
103 | },
104 | testCases: [
105 | {
106 | input: "A man, a plan, a canal: Panama",
107 | output: "true",
108 | },
109 | {
110 | input: "race a car",
111 | output: "false",
112 | },
113 | {
114 | input: " ",
115 | output: "true",
116 | },
117 | ],
118 | };
119 |
120 | const { referenceSolutions, testCases } = sampleStringProblem;
121 |
122 | for (const [language, solutionCode] of Object.entries(referenceSolutions)) {
123 |
124 | console.log(`Language: ${language}`);
125 | console.log(`Solution Code:\n${solutionCode}`);
126 |
127 | console.log("Test Cases:");
128 | testCases.forEach(({ input, output }, index) => {
129 | console.log(`Test Case ${index + 1}:`);
130 | console.log(`Input: ${input}`);
131 | console.log(`Expected Output: ${output}`);
132 | });
133 |
134 | console.log("-----------------------------------");
135 | }
136 |
--------------------------------------------------------------------------------
53 |
176 |
177 | {/* Right Side - Image/Pattern */}
178 |
54 | {/* Logo */}
55 |
175 |
56 |
64 |
65 | {/* Form */}
66 |
164 |
165 | {/* Footer */}
166 |
57 |
63 |
58 |
60 | Welcome Back
61 |Sign in to your account
62 |
167 |
174 | 168 | Already have an account?{" "} 169 | 170 | Sign in 171 | 172 |
173 |