InterviewJS

Master JavaScript & TypeScript Through Interactive Challenges

Features • Demo • Get Started • Tech Stack • Contributing

---

✨ Features

💻 Interactive Coding Challenges 🎯 70+ Curated Problems Basics • Async JS • DOM Manipulation Event Handling • TypeScript Fundamentals ⚡ Instant Feedback Real-time code execution Comprehensive test suites Detailed error messages 📊 Smart Progress Tracking Solved / Attempted / Todo status Star your favorites Personal notes on each problem	🎓 Interactive Quizzes 📝 Multiple Choice Questions Instant validation Detailed explanations Score tracking 🏆 Achievement System Track your improvement Challenge yourself daily Build your streak 📈 Performance Analytics Quiz history Score trends Areas to improve
👤 Personalized Experience 🔐 Secure Authentication Google OAuth integration Email/Password option Protected user data 📊 Rich Dashboard Activity contribution graph Difficulty-based progress Complete submission history Personal statistics	🎨 Modern Interface 🌓 Dark/Light Theme Seamless theme switching Eye-friendly color schemes Persistent preferences ✨ Smooth Animations Framer Motion effects Lottie illustrations Polished interactions 📱 Fully Responsive Mobile-first design Tablet optimized Desktop enhanced

---

🛠️ Tech Stack

Frontend

Backend & Database

UI & Design

Developer Tools

---

🚀 Getting Started

Quick Start Guide - Get InterviewJS running locally in under 5 minutes!

📋 Prerequisites

Node.js 18.x or higher
MongoDB (local or Atlas)
Google OAuth credentials (optional)

🔧 Installation

1️⃣ Clone the repository

git clone https://github.com/shridmishra/interviewjs.git
cd interviewjs

2️⃣ Install dependencies

npm install

3️⃣ Configure environment variables

Create a .env.local file in the root directory:

# MongoDB Connection
MONGO_URI=mongodb://localhost:27017/interviewjs
# or use MongoDB Atlas:
# MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/interviewjs

# NextAuth Configuration
NEXTAUTH_SECRET=your-secret-key-here-generate-with-openssl
NEXTAUTH_URL=http://localhost:3000

# Google OAuth (optional - for Google login)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

Generate a secure secret:

openssl rand -base64 32

4️⃣ Start the development server

npm run dev

5️⃣ Open your browser

Navigate to http://localhost:3000 🎉

🎊 You're all set! Happy coding! 🚀

---

📁 Project Structure

src/
├── 📱 app/                   # Next.js 15 App Router
│   ├── 🔌 api/              # API routes
│   │   ├── auth/           # Authentication endpoints
│   │   ├── problems/       # Problem data + user progress
│   │   ├── quiz/           # Quiz submission
│   │   └── user/           # User profile & problem data
│   ├── 💪 challenges/       # Coding challenge pages
│   ├── 👤 profile/          # User profile page
│   └── 📝 quiz/             # Quiz page
├── 🎨 components/           # React components
│   ├── common/             # Shared components
│   ├── modals/             # Modal components
│   ├── problems/           # Problem list & detail views
│   └── ui/                 # shadcn/ui components
├── 🔐 context/              # React Context (Auth)
├── 📊 data/                 # Static data (70+ problems)
├── 🪝 hooks/                # Custom React hooks
├── ⚙️ lib/                  # Utilities & configurations
├── 🗄️ models/               # Mongoose models
└── 🎯 types/                # TypeScript types

---

🏗️ Architecture Highlights

📊 Data Flow Static Definitions Problems in src/data/problems/*.ts Immutable source of truth User Metadata MongoDB storage Status, stars, notes Smart Hydration useChallenges hook Merges static + user data

🔐 Authentication Multi-Provider Google OAuth Email/Password JWT sessions Middleware Pattern authMiddleware() helper Protected API routes useAuth() hook

🧪 Problem System Test Execution Isolated code evaluation Real-time feedback Comprehensive test suites User Progress Overlay data pattern Never modifies source MongoDB persistence

---

⚡ Available Scripts

npm run dev      # 🚀 Start development server on :3000
npm run build    # 📦 Build for production (standalone output)
npm run start    # ▶️  Start production server
npm run lint     # 🔍 Run ESLint

---

📝 Adding New Problems

Want to contribute new challenges? Follow this guide:

Note: Also see the detailed workflow guide at .agent/workflows/add-problem-step.md

📖 Step-by-Step Tutorial

When adding a new problem set (step), you need to update 3 files:

File	Purpose
src/data/topics/{topic}/problems/{N}-{name}.ts	Problem definitions
src/lib/problemUtils.ts	Used by sitemap and API
src/hooks/useChallenges.ts	Critical - Used by practice page UI

1️⃣ Create a new problem file

// src/data/topics/javascript/problems/8-mini-projects.ts
import { Problem, Difficulty } from '@/types';

export const miniProjects: Omit<Problem, 'status' | 'isStarred' | 'notes'>[] = [
  {
    id: 'unique-problem-id',
    title: 'Problem Title',
    difficulty: Difficulty.Easy,   // Easy, Medium, or Hard
    category: 'Mini Projects',
    group: 'Step 8: Mini Projects', // Section header in UI
    description: 'Problem description...',
    starterCode: `function solution() {\n  // Your code here\n}`,
    testCases: [],
    solutionCheck: (userCode: string) => [{
      input: 'Code Check',
      expected: 'Expected behavior',
      actual: userCode.includes('solution') ? 'Correct' : 'Missing',
      passed: userCode.includes('solution'),
    }],
  },
];

2️⃣ Register in useChallenges.ts ⚠️ Critical

// src/hooks/useChallenges.ts

// Add import at top
import { miniProjects } from '../data/topics/javascript/problems/8-mini-projects';

// Add to staticProblems array (JavaScript section)
...[
    ...learnTheBasics,
    ...arrayManipulation,
    // ... other modules,
    ...miniProjects  // Add here
].map(p => ({ ...p, slug: 'js' })),

3️⃣ Register in problemUtils.ts

// src/lib/problemUtils.ts

// Add import
import { miniProjects } from '@/data/topics/javascript/problems/8-mini-projects';

// Add to topicMapping
{ modules: [...existingModules, miniProjects], topic: 'JavaScript', slug: 'js' },

4️⃣ Test your changes 🧪

npm run build

• Verify test cases work correctly
• Check starter code compiles
• Ensure solution validation logic is accurate

---

🤝 Contributing

We love contributions! ❤️

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

How to Contribute

1. 🍴 Fork the project
2. 🌿 Create your 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

Contribution Ideas

• 🐛 Report bugs
• 💡 Suggest new features
• 📝 Add new problems
• 🎨 Improve UI/UX
• 📖 Enhance documentation
• ⚡ Optimize performance

---

📄 License

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

---

👨‍💻 Author

Shrid Mishra

---

🙏 Acknowledgments

Special thanks to these amazing projects and communities:

• 🎨 shadcn/ui - Beautiful component library
• ⚡ Next.js - The React framework for production
• 🔷 Vercel - Deployment and hosting platform
• 💚 MongoDB - Database solution
• 🎭 Framer Motion - Animation library
• 🌈 Tailwind CSS - Utility-first CSS framework

And all the contributors who help make InterviewJS better! 🎉

---

⭐ Star this repo if you find it helpful!

Made with ❤️ and ☕ by Shrid Mishra

_{© 2025 InterviewJS. All rights reserved.}