This guide will help you set up and work on the JavaScript Code Challenges project.

• Node.js 18.x or higher
• npm or yarn
• Git
• A code editor (VS Code recommended)

# Fork the repository on GitHub first, then:
git clone https://github.com/YOUR_USERNAME/javascript-code-challenges.git
cd javascript-code-challenges

cd web
npm install

npm run dev

The site will be available at http://localhost:3000

javascript-code-challenges/
├── .github/                    # GitHub configuration
│   ├── workflows/              # CI/CD workflows
│   │   └── ci.yml             # Automated testing and building
│   ├── ISSUE_TEMPLATE/         # Issue templates
│   └── pull_request_template.md
├── web/                        # Next.js application
│   ├── src/
│   │   └── app/
│   │       ├── challenges/     # Challenge pages by category
│   │       │   ├── primitives/
│   │       │   ├── collections/
│   │       │   ├── functions/
│   │       │   ├── objects/
│   │       │   ├── async/
│   │       │   ├── dom/
│   │       │   └── event/
│   │       ├── concepts/       # Concept explanations
│   │       ├── interview_questions/
│   │       ├── layout.tsx      # Root layout
│   │       └── page.mdx        # Home page
│   ├── public/                 # Static assets
│   ├── eslint.config.mjs       # ESLint configuration
│   ├── next.config.mjs         # Next.js configuration
│   ├── tsconfig.json           # TypeScript configuration
│   └── package.json
├── .editorconfig               # Editor configuration
├── .prettierrc                 # Prettier configuration
├── CODE_OF_CONDUCT.md
├── SECURITY.md
├── contributing.md
├── usageGuide.md
└── README.md

Challenges and concepts are written in MDX (Markdown with JSX). Here's the structure:

export const metadata = {
  title: "Category Name | Challenges",
}

### 1. Question Title

- Important point about the question
- Another important point

\`\`\`js copy
// Example code
const example = "value";
\`\`\`

- Solution explanation

\`\`\`js copy
function solution() {
  // Solution code
  return result;
}
\`\`\`

**Notes**

Additional details about the solution

**References**

- https://link-to-reference.com

---

### 2. Next Question...

In the web directory:

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

• Use 2 spaces for indentation
• Use semicolons
• Use double quotes for strings
• Follow ESLint rules

• Use proper heading hierarchy
• Code blocks should have language specified
• Add copy attribute to code blocks for copy button
• Follow existing format for consistency

Use clear, descriptive commit messages:

• Add: New challenge for closures
• Fix: Typo in async challenges
• Update: Improve explanation for promises
• Docs: Update contributing guide

1. Visual Testing: Run npm run dev and check your changes in the browser
2. Build Testing: Run npm run build to ensure no build errors
3. Lint Testing: Run npm run lint to check for code issues
4. Format Testing: Run npm run format:check to verify formatting

1. Choose the appropriate category file in web/src/app/challenges/
2. Add your challenge at the end of the file
3. Follow the existing format
4. Include code examples, notes, and references
5. Test locally
6. Submit a PR

If port 3000 is in use:

# Kill the process using port 3000 or
# Specify a different port
npm run dev -- -p 3001

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear Next.js cache
rm -rf .next
npm run build

• Check existing Issues
• Read the Contributing Guide
• Ask questions in Discussions

• Next.js Documentation
• Nextra Documentation
• MDX Documentation
• TypeScript Documentation

Happy coding! 🚀