diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..4beffa3
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,26 @@
+# EditorConfig helps maintain consistent coding styles across different editors
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+max_line_length = off
+
+[*.{json,yml,yaml}]
+indent_size = 2
+
+[*.{js,jsx,ts,tsx,mjs}]
+indent_size = 2
+
+[*.mdx]
+indent_size = 2
+trim_trailing_whitespace = false
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..21305b2
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,37 @@
+---
+name: Bug Report
+about: Report a bug or issue with the project
+title: '[BUG] '
+labels: bug
+assignees: ''
+---
+
+## Bug Description
+
+
+## Location
+
+- File/Page:
+- Challenge/Concept number:
+
+## Expected Behavior
+
+
+## Actual Behavior
+
+
+## Steps to Reproduce
+1. Go to '...'
+2. Click on '...'
+3. See error
+
+## Screenshots
+
+
+## Environment
+- Browser:
+- OS:
+- Node version (if applicable):
+
+## Additional Context
+
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..f85d782
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,35 @@
+---
+name: Feature Request
+about: Suggest a new challenge, concept, or improvement
+title: '[FEATURE] '
+labels: enhancement
+assignees: ''
+---
+
+## Feature Type
+
+- [ ] New challenge/question
+- [ ] New concept explanation
+- [ ] Documentation improvement
+- [ ] Website enhancement
+- [ ] Other
+
+## Description
+
+
+## Proposed Solution
+
+
+## Challenge/Concept Details (if applicable)
+
+- **Topic/Category**:
+- **Difficulty Level**:
+- **Brief Example**:
+
+## Additional Context
+
+
+## Are you willing to work on this?
+
+- [ ] Yes, I can work on this feature
+- [ ] No, just suggesting the idea
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..031c5dd
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,32 @@
+# Pull Request
+
+## Description
+
+
+## Type of Change
+
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New challenge/question added
+- [ ] Documentation update
+- [ ] Code quality improvement
+- [ ] Other (please describe):
+
+## Checklist
+
+
+- [ ] I have read the [Contributing Guidelines](../contributing.md)
+- [ ] My code follows the project's code style and standards
+- [ ] I have tested my changes locally
+- [ ] The question/challenge is unambiguous and clear
+- [ ] Code examples work as expected
+- [ ] References are included (if applicable)
+- [ ] No spelling or grammatical errors
+- [ ] Changes are added to the appropriate section/file
+
+## Related Issue
+
+Fixes #
+
+## Additional Notes
+
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..b940919
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,45 @@
+name: CI
+
+on:
+ push:
+ branches: [main]
+ pull_request:
+ branches: [main]
+
+jobs:
+ lint-and-build:
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [20.x]
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node-version }}
+
+ - name: Install dependencies
+ working-directory: ./web
+ run: npm install
+
+ - name: Run ESLint
+ working-directory: ./web
+ run: npm run lint
+
+ - name: Build project
+ working-directory: ./web
+ run: npm run build
+
+ - name: Check for build artifacts
+ working-directory: ./web
+ run: |
+ if [ ! -d ".next" ]; then
+ echo "Build failed - .next directory not found"
+ exit 1
+ fi
+ echo "Build successful!"
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..5b43ff1
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,28 @@
+# Dependencies
+node_modules
+package-lock.json
+
+# Build outputs
+.next
+out
+dist
+build
+
+# Cache
+.cache
+.turbo
+
+# Logs
+*.log
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode
+.idea
+
+# Other
+coverage
+.env*
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..1fcda4c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,13 @@
+{
+ "semi": true,
+ "trailingComma": "es5",
+ "singleQuote": false,
+ "printWidth": 80,
+ "tabWidth": 2,
+ "useTabs": false,
+ "arrowParens": "always",
+ "endOfLine": "lf",
+ "bracketSpacing": true,
+ "jsxSingleQuote": false,
+ "proseWrap": "preserve"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..bbc579a
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+ "recommendations": [
+ "esbenp.prettier-vscode",
+ "dbaeumer.vscode-eslint",
+ "bradlc.vscode-tailwindcss",
+ "unifiedjs.vscode-mdx",
+ "editorconfig.editorconfig"
+ ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..cea7504
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,26 @@
+{
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": "explicit"
+ },
+ "files.eol": "\n",
+ "files.insertFinalNewline": true,
+ "files.trimTrailingWhitespace": true,
+ "[markdown]": {
+ "files.trimTrailingWhitespace": false
+ },
+ "[mdx]": {
+ "files.trimTrailingWhitespace": false,
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "typescript.tsdk": "web/node_modules/typescript/lib",
+ "search.exclude": {
+ "**/node_modules": true,
+ "**/package-lock.json": true,
+ "**/.next": true
+ },
+ "files.exclude": {
+ "**/.DS_Store": true
+ }
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..741b228
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+- GitHub Actions CI workflow for automated testing and building
+- Pull request template for better PR management
+- Issue templates for bugs and feature requests
+- EditorConfig for consistent coding style across editors
+- Prettier configuration for code formatting
+- Security policy (SECURITY.md)
+- Development guide (DEVELOPMENT.md)
+- Enhanced README with setup instructions and project structure
+- Improved contributing guidelines with detailed steps
+
+### Changed
+- Updated README.md with comprehensive documentation
+- Enhanced contributing.md with better structure and guidelines
+
+### Fixed
+- N/A
+
+### Removed
+- N/A
+
+---
+
+## How to Update This Changelog
+
+When contributing:
+1. Add your changes under the `[Unreleased]` section
+2. Choose the appropriate category: Added, Changed, Fixed, or Removed
+3. Write a brief, clear description of your change
+4. Maintainers will version the changes during releases
+
+---
+
+## Categories
+
+- **Added** for new features
+- **Changed** for changes in existing functionality
+- **Deprecated** for soon-to-be removed features
+- **Removed** for now removed features
+- **Fixed** for any bug fixes
+- **Security** in case of vulnerabilities
diff --git a/CONTRIBUTION_SUMMARY.md b/CONTRIBUTION_SUMMARY.md
new file mode 100644
index 0000000..04ebaed
--- /dev/null
+++ b/CONTRIBUTION_SUMMARY.md
@@ -0,0 +1,124 @@
+# Contribution Summary
+
+## Overview
+This document summarizes all the improvements made to the JavaScript Code Challenges repository.
+
+## Files Added
+
+### 1. GitHub Templates & Workflows
+- **`.github/pull_request_template.md`** - Standardized PR template for consistent contributions
+- **`.github/ISSUE_TEMPLATE/bug_report.md`** - Bug report template for structured issue reporting
+- **`.github/ISSUE_TEMPLATE/feature_request.md`** - Feature request template for new ideas
+- **`.github/workflows/ci.yml`** - GitHub Actions CI workflow for automated testing and building
+
+### 2. Configuration Files
+- **`.editorconfig`** - Editor configuration for consistent coding style across different editors
+- **`.prettierrc`** - Prettier configuration for consistent code formatting
+- **`.prettierignore`** - Files to exclude from Prettier formatting
+
+### 3. Documentation
+- **`SECURITY.md`** - Security policy and vulnerability reporting guidelines
+- **`DEVELOPMENT.md`** - Comprehensive development guide for contributors
+- **`CHANGELOG.md`** - Changelog template for tracking project changes
+
+### 4. VS Code Configuration
+- **`.vscode/extensions.json`** - Recommended VS Code extensions for the project
+- **`.vscode/settings.json`** - VS Code workspace settings for optimal development experience
+
+## Files Modified
+
+### 1. README.md
+**Improvements:**
+- Added table of contents for easy navigation
+- Added "About" section with project description
+- Added "Features" section highlighting key features
+- Added comprehensive "Getting Started" section with:
+ - Prerequisites
+ - Installation instructions
+ - Development setup
+ - Build commands
+- Added "Project Structure" section
+- Improved "Contributing" section with quick tips
+- Added "Support" section
+- Better organization with clear sections and emojis
+
+### 2. contributing.md
+**Improvements:**
+- Added "Ways to Contribute" section
+- Added detailed "Getting Started" steps with code examples
+- Added "File Structure" visualization
+- Added "Code Formatting" section with Prettier commands
+- Added "Submitting Your Contribution" step-by-step guide
+- Added "Pull Request Guidelines"
+- Better formatting and organization
+- Added helpful emojis for visual clarity
+
+### 3. web/package.json
+**Improvements:**
+- Added `format` script for automatic code formatting
+- Added `format:check` script to verify formatting
+- Added `prettier` as a dev dependency
+
+## Impact & Benefits
+
+### For Contributors
+1. **Easier Onboarding**: Clear setup instructions and development guide
+2. **Consistent Code Style**: EditorConfig and Prettier ensure uniformity
+3. **Better Templates**: Structured PR and issue templates guide contributions
+4. **VS Code Integration**: Recommended extensions and settings for optimal DX
+
+### For Maintainers
+1. **Automated CI/CD**: GitHub Actions workflow for testing and building
+2. **Quality Control**: Prettier and ESLint integration
+3. **Better Organization**: Clear templates help manage issues and PRs
+4. **Documentation**: Comprehensive guides reduce support burden
+
+### For the Project
+1. **Professional Setup**: Industry-standard tooling and configuration
+2. **Better Documentation**: Clear guides for all stakeholders
+3. **Improved Quality**: Automated checks ensure code quality
+4. **Easier Maintenance**: Changelog and structured contributions
+
+## Next Steps (Optional Improvements)
+
+### Potential Future Enhancements:
+1. **Testing Suite**: Add unit/integration tests for challenges
+2. **Automated Deployments**: Set up automated deployment to Vercel
+3. **Dependabot**: Enable automated dependency updates
+4. **Code Coverage**: Add code coverage reporting
+5. **More Templates**: Add templates for documentation improvements
+6. **Husky**: Add pre-commit hooks for automatic formatting/linting
+7. **Storybook**: Add component documentation (if applicable)
+
+## How to Use These Changes
+
+### For New Contributors:
+1. Read `DEVELOPMENT.md` for setup instructions
+2. Follow templates when creating issues or PRs
+3. Use `npm run format` before committing
+4. Install recommended VS Code extensions
+
+### For Existing Contributors:
+1. Install Prettier: `npm install` in the `web` directory
+2. Review updated `contributing.md`
+3. Use new templates for future PRs/issues
+
+### For Maintainers:
+1. Update `CHANGELOG.md` with each release
+2. Review CI workflow results on PRs
+3. Use templates to guide contributors
+4. Keep `SECURITY.md` updated
+
+## Testing Checklist
+
+Before submitting these changes, verify:
+- [ ] All files created successfully
+- [ ] No syntax errors in configuration files
+- [ ] README renders correctly on GitHub
+- [ ] CI workflow syntax is valid
+- [ ] Templates display properly on GitHub
+- [ ] Package.json scripts work correctly
+
+## Conclusion
+
+These improvements modernize the repository with industry-standard tooling and comprehensive documentation, making it easier for contributors to participate and maintainers to manage the project. The changes follow best practices for open-source projects and enhance the overall developer experience.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
new file mode 100644
index 0000000..7fabd89
--- /dev/null
+++ b/DEVELOPMENT.md
@@ -0,0 +1,208 @@
+# Development Guide
+
+This guide will help you set up and work on the JavaScript Code Challenges project.
+
+## Prerequisites
+
+- Node.js 18.x or higher
+- npm or yarn
+- Git
+- A code editor (VS Code recommended)
+
+## Setting Up Development Environment
+
+### 1. Fork and Clone
+
+```bash
+# Fork the repository on GitHub first, then:
+git clone https://github.com/YOUR_USERNAME/javascript-code-challenges.git
+cd javascript-code-challenges
+```
+
+### 2. Install Dependencies
+
+```bash
+cd web
+npm install
+```
+
+### 3. Run Development Server
+
+```bash
+npm run dev
+```
+
+The site will be available at `http://localhost:3000`
+
+## Project Structure
+
+```
+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
+```
+
+## Working with MDX Files
+
+Challenges and concepts are written in MDX (Markdown with JSX). Here's the structure:
+
+```mdx
+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...
+```
+
+## Available Scripts
+
+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
+
+## Code Style Guidelines
+
+### JavaScript/TypeScript
+
+- Use 2 spaces for indentation
+- Use semicolons
+- Use double quotes for strings
+- Follow ESLint rules
+
+### MDX/Markdown
+
+- Use proper heading hierarchy
+- Code blocks should have language specified
+- Add `copy` attribute to code blocks for copy button
+- Follow existing format for consistency
+
+### Commit Messages
+
+Use clear, descriptive commit messages:
+
+- `Add: New challenge for closures`
+- `Fix: Typo in async challenges`
+- `Update: Improve explanation for promises`
+- `Docs: Update contributing guide`
+
+## Testing Your Changes
+
+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
+
+## Adding New Challenges
+
+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
+
+## Common Issues
+
+### Port Already in Use
+
+If port 3000 is in use:
+```bash
+# Kill the process using port 3000 or
+# Specify a different port
+npm run dev -- -p 3001
+```
+
+### Module Not Found
+
+```bash
+# Clear node_modules and reinstall
+rm -rf node_modules package-lock.json
+npm install
+```
+
+### Build Errors
+
+```bash
+# Clear Next.js cache
+rm -rf .next
+npm run build
+```
+
+## Getting Help
+
+- Check existing [Issues](https://github.com/sadanandpai/javascript-code-challenges/issues)
+- Read the [Contributing Guide](../contributing.md)
+- Ask questions in [Discussions](https://github.com/sadanandpai/javascript-code-challenges/discussions)
+
+## Resources
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Nextra Documentation](https://nextra.site/)
+- [MDX Documentation](https://mdxjs.com/)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+
+Happy coding! 🚀
diff --git a/README.md b/README.md
index a7c54fe..8500a86 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,113 @@
---
+## 📚 Table of Contents
+
+- [About](#about)
+- [Features](#features)
+- [Getting Started](#getting-started)
+ - [Prerequisites](#prerequisites)
+ - [Installation](#installation)
+ - [Development](#development)
+ - [Build](#build)
+- [Project Structure](#project-structure)
+- [Contributing](#contributing)
+- [License](#license)
+- [Support](#support)
+
+---
+
+## 🎯 About
+
+JavaScript Code Challenges is a comprehensive collection of modern JavaScript interview questions and coding challenges. Whether you're preparing for technical interviews, testing your knowledge, or looking to practice your JavaScript skills, this repository has you covered.
+
+## ✨ Features
+
+- 📝 **Organized by Topics**: Challenges categorized into Primitives, Collections, Functions, Objects, Async, DOM, and Events
+- 💡 **Conceptual Explanations**: Detailed concept guides for better understanding
+- 🔍 **Multiple Solutions**: Many challenges include multiple approaches to solve the same problem
+- 📖 **Well Documented**: Each challenge includes examples, notes, and references
+- 🎨 **Modern UI**: Built with Next.js and Nextra for an excellent browsing experience
+- 🔎 **Searchable**: Integrated search functionality to find challenges quickly
+
+---
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+Before you begin, ensure you have the following installed:
+- **Node.js** (version 18.x or higher)
+- **npm** or **yarn** package manager
+
+### Installation
+
+1. **Clone the repository**
+ ```bash
+ git clone https://github.com/sadanandpai/javascript-code-challenges.git
+ cd javascript-code-challenges
+ ```
+
+2. **Navigate to the web directory**
+ ```bash
+ cd web
+ ```
+
+3. **Install dependencies**
+ ```bash
+ npm install
+ ```
+
+### Development
+
+To run the development server:
+
+```bash
+npm run dev
+```
+
+The application will be available at `http://localhost:3000`
+
+### Build
+
+To create a production build:
+
+```bash
+npm run build
+```
+
+To run the production build:
+
+```bash
+npm start
+```
+
+---
+
+## 📁 Project Structure
+
+```
+javascript-code-challenges/
+├── .github/ # GitHub configuration files
+│ ├── workflows/ # GitHub Actions CI/CD
+│ └── ISSUE_TEMPLATE/ # Issue templates
+├── web/ # Next.js application
+│ ├── src/
+│ │ └── app/
+│ │ ├── challenges/ # Challenge pages
+│ │ ├── concepts/ # Concept explanation pages
+│ │ └── interview_questions/
+│ ├── public/ # Static assets
+│ └── package.json
+├── CODE_OF_CONDUCT.md
+├── SECURITY.md
+├── contributing.md
+├── usageGuide.md
+└── README.md
+```
+
+---
+
### Stargazers
[](https://github.com/sadanandpai/javascript-code-challenges/stargazers)
@@ -25,11 +132,29 @@
---
+---
+
### Contributing Guide
If you want to contribute, improve or suggest changes to this repo, then check out the [Contributing Guide](./contributing.md)
+
+**Quick Contribution Tips:**
+- 🐛 Found a bug? [Report it](https://github.com/sadanandpai/javascript-code-challenges/issues/new?template=bug_report.md)
+- 💡 Have an idea? [Share it](https://github.com/sadanandpai/javascript-code-challenges/issues/new?template=feature_request.md)
+- 🔧 Want to contribute code? Check our [contribution guidelines](./contributing.md)
+
+### Support
+
+If you find this project helpful:
+- ⭐ Star the repository
+- 🐛 Report bugs and issues
+- 💡 Suggest new challenges or improvements
+- 📢 Share with others who might benefit
+
+---
+
### License
This repository is MIT licensed. [Read more](./LICENSE)
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..fa257f4
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,52 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+We take the security of the JavaScript Code Challenges project seriously. If you believe you have found a security vulnerability, please report it to us as described below.
+
+### How to Report a Security Vulnerability
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Instead, please report them via one of the following methods:
+
+1. **GitHub Security Advisories**: Use the [GitHub Security Advisory](https://github.com/sadanandpai/javascript-code-challenges/security/advisories/new) feature
+2. **Email**: Contact the project maintainer directly through their GitHub profile
+
+Please include the following information in your report:
+
+- Type of vulnerability
+- Location of the affected source code (file path, line numbers, etc.)
+- Step-by-step instructions to reproduce the issue
+- Proof-of-concept or exploit code (if possible)
+- Impact of the vulnerability
+- Suggested fix (if you have one)
+
+### What to Expect
+
+- We will acknowledge receipt of your vulnerability report within 48 hours
+- We will provide a more detailed response within 5 business days
+- We will work with you to understand and validate the issue
+- We will take action to fix confirmed vulnerabilities
+- We will publicly acknowledge your responsible disclosure (if you wish)
+
+## Supported Versions
+
+We release patches for security vulnerabilities in the following versions:
+
+| Version | Supported |
+| ------- | ------------------ |
+| latest | :white_check_mark: |
+| < latest | :x: |
+
+## Security Best Practices
+
+When contributing to this project:
+
+1. Keep dependencies up to date
+2. Do not commit sensitive information (API keys, credentials, etc.)
+3. Follow secure coding practices
+4. Review code changes carefully before submitting PRs
+5. Report any suspicious activity or potential security issues
+
+Thank you for helping keep JavaScript Code Challenges and its users safe!
diff --git a/contributing.md b/contributing.md
index 29c927b..e7c7a8f 100644
--- a/contributing.md
+++ b/contributing.md
@@ -1,21 +1,54 @@
### Contribution Guide
-- Feel free to contribute to this repo by raising the __pull request__
-- Spelling mistakes, improvement of answers, code comments, rephrasing the questions/points, additional details, quality references, and similar contributions are highly appreciated
+Thank you for considering contributing to JavaScript Code Challenges! We welcome contributions from the community.
-#### Question contribution
+#### Ways to Contribute
-- The question should be unambiguous and as generic as possible
-- Only JavaScript questions with coding solutions are allowed (No theoretical questions)
+- 💡 Add new challenges or questions
+- 📝 Improve existing solutions or explanations
+- 🐛 Fix bugs or issues
+- 📚 Enhance documentation
+- ✨ Suggest new features or improvements
+- 🔍 Fix spelling, grammar, or formatting issues
+
+---
+
+#### Getting Started
+
+1. **Fork the repository** to your GitHub account
+2. **Clone your fork** locally:
+ ```bash
+ git clone https://github.com/YOUR_USERNAME/javascript-code-challenges.git
+ cd javascript-code-challenges
+ ```
+3. **Create a new branch** for your changes:
+ ```bash
+ git checkout -b feature/your-feature-name
+ ```
+4. **Set up the development environment**:
+ ```bash
+ cd web
+ npm install
+ npm run dev
+ ```
+
+---
+
+#### Question/Challenge Contribution Guidelines
+
+- The question should be **unambiguous** and as **generic** as possible
+- Only JavaScript questions with **coding solutions** are allowed (No theoretical questions)
- Any coding hints to be provided along with the question can be included as an example
- This repo does not aim to solve algorithm questions in JavaScript
-- Answer can contain a maximum 4 parts
- - Important points related to solving the question or about the implementation logic - optional but recommended
- - Solution program (single or multiple solutions) - mandatory
- - Notes (additional detail about the answer) - optional
- - References - optional but recommended
+- Answer can contain a maximum of 4 parts:
+ - **Important points** related to solving the question or about the implementation logic - _optional but recommended_
+ - **Solution program** (single or multiple solutions) - _mandatory_
+ - **Notes** (additional detail about the answer) - _optional_
+ - **References** - _optional but recommended_
+
+---
-#### Standards Followed
+#### Standards to Follow
- No full stop at the end of the question or points
- Output of the code is mentioned in front of the statement with comments
@@ -23,9 +56,68 @@
- Driver codes are added only when necessary
- The difficulty level of the question in general increases with the question number
- Follow the existing format of markdown and code
+- Add new questions to the **end** of the respective section
+
+---
+
+#### File Structure
+
+Challenges are located in MDX files:
+```
+web/src/app/
+├── challenges/
+│ ├── primitives/page.mdx
+│ ├── collections/page.mdx
+│ ├── functions/page.mdx
+│ ├── objects/page.mdx
+│ ├── async/page.mdx
+│ ├── dom/page.mdx
+│ └── event/page.mdx
+└── concepts/
+ ├── primitives/page.mdx
+ ├── collections/page.mdx
+ └── ...
+```
+
+---
+
+#### Code Formatting
+
+We use Prettier for code formatting. Before submitting:
+
+```bash
+# Check formatting
+npm run format:check
+
+# Auto-format your code
+npm run format
+```
+
+---
+
+#### Submitting Your Contribution
+
+1. **Commit your changes** with a clear message:
+ ```bash
+ git add .
+ git commit -m "Add: New challenge for array manipulation"
+ ```
+2. **Push to your fork**:
+ ```bash
+ git push origin feature/your-feature-name
+ ```
+3. **Create a Pull Request** from your fork to the main repository
+4. Fill out the PR template with all required information
+5. Wait for review and address any feedback
+
+---
+
+#### Pull Request Guidelines
-#### Tech
+- Provide a clear description of what your PR does
+- Reference any related issues
+- Ensure all checks pass (linting, build)
+- Be responsive to feedback and questions
+- One PR per feature/fix (avoid combining multiple unrelated changes)
-- Website is built using Nextra
-- The challenges are in [mdx files](https://github.com/sadanandpai/javascript-code-challenges/tree/main/web/src/pages)
-- Add new questions to the end
+---
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 6861f0b..575ce0f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -7,6 +7,8 @@
"build": "next build",
"start": "next start",
"lint": "next lint",
+ "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,mdx,json}\"",
+ "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,mdx,json}\"",
"postbuild": "pagefind --site .next/server/app --output-path public/_pagefind"
},
"dependencies": {
@@ -24,6 +26,7 @@
"eslint": "^9.30.1",
"eslint-config-next": "^15.3.5",
"pagefind": "^1.3.0",
+ "prettier": "^3.4.2",
"typescript": "^5.8.3"
}
}