Skip to content

Commit fccfec4

Browse files
SyntaxSidekickSyntaxSidekick
committed
Initial commit: JS Learning Lab with 40+ questions and admin interface
0 parents  commit fccfec4

24 files changed

Lines changed: 9511 additions & 0 deletions

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎DEPLOYMENT.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Deployment Guide for JS Challenge Lab
2+
3+
## Quick Deployment Options
4+
5+
### 1. Vercel (Recommended)
6+
```bash
7+
# Install Vercel CLI
8+
npm install -g vercel
9+
10+
# Deploy
11+
vercel
12+
13+
# Follow the prompts to connect your project
14+
```
15+
16+
### 2. Netlify
17+
```bash
18+
# Build the project
19+
npm run build
20+
21+
# Drag and drop the 'dist' folder to Netlify's deploy interface
22+
# Or use Netlify CLI:
23+
npm install -g netlify-cli
24+
netlify deploy --prod --dir=dist
25+
```
26+
27+
### 3. GitHub Pages
28+
```bash
29+
# Install gh-pages
30+
npm install --save-dev gh-pages
31+
32+
# Add to package.json scripts:
33+
"deploy": "gh-pages -d dist"
34+
35+
# Build and deploy
36+
npm run build
37+
npm run deploy
38+
```
39+
40+
### 4. Traditional Hosting
41+
```bash
42+
# Build the project
43+
npm run build
44+
45+
# Upload the contents of the 'dist' folder to your web server
46+
```
47+
48+
## Environment Variables
49+
No environment variables are required for basic deployment.
50+
51+
## Performance Optimization
52+
53+
### Bundle Analysis
54+
```bash
55+
# Install bundle analyzer
56+
npm install --save-dev vite-bundle-analyzer
57+
58+
# Add to package.json scripts:
59+
"analyze": "vite-bundle-analyzer"
60+
61+
# Run analysis
62+
npm run analyze
63+
```
64+
65+
### Production Optimizations
66+
- Monaco Editor is loaded asynchronously
67+
- Tailwind CSS is purged of unused styles
68+
- Assets are automatically minified by Vite
69+
70+
## Domain Configuration
71+
Update the `base` in `vite.config.js` if deploying to a subdirectory:
72+
73+
```javascript
74+
export default defineConfig({
75+
base: '/your-subdirectory/',
76+
plugins: [react()],
77+
})
78+
```

‎README.md‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
# JS Challenge Lab 🚀
2+
3+
**Tagline:** *Sharpen your JavaScript skills — one random question at a time.*
4+
5+
A modern, interactive web application for practicing JavaScript concepts through randomized coding challenges. Perfect for developers looking to improve their JavaScript knowledge with hands-on practice.
6+
7+
![JS Challenge Lab Screenshot](https://via.placeholder.com/800x400/3b82f6/ffffff?text=JS+Challenge+Lab)
8+
9+
## ✨ Features
10+
11+
### 🎯 Core Functionality
12+
- **Random Question Generator**: Practice with questions covering arrays, scope, closures, promises, and more
13+
- **Difficulty Levels**: Choose from Beginner, Intermediate, or Advanced challenges
14+
- **Category Filtering**: Focus on specific topics like Functions, Objects, Async/Await, etc.
15+
- **Interactive Code Editor**: Powered by Monaco Editor with syntax highlighting and auto-formatting
16+
- **Real-time Code Execution**: Run your JavaScript code safely in a sandboxed environment
17+
- **Instant Feedback**: Compare your output with expected results
18+
19+
### 🎮 Learning Features
20+
- **Smart Hint System**: Get contextual hints when you're stuck
21+
- **Detailed Explanations**: Understand the "why" behind each answer
22+
- **Progress Tracking**: Monitor your score and current streak
23+
- **Gamification**: Streak counters and score tracking to keep you motivated
24+
25+
### 🎨 User Experience
26+
- **Dark/Light Mode**: Toggle between themes for comfortable coding
27+
- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile
28+
- **Clean Interface**: Distraction-free environment focused on learning
29+
30+
## 🛠️ Tech Stack
31+
32+
| Purpose | Technology |
33+
|---------|------------|
34+
| **Frontend** | React 18 + Vite |
35+
| **Code Editor** | Monaco Editor (VS Code's editor) |
36+
| **Styling** | Material UI + Custom CSS |
37+
| **Icons** | Lucide React |
38+
| **Code Execution** | Safe JavaScript eval with custom console |
39+
| **Build Tool** | Vite |
40+
41+
## 🚀 Getting Started
42+
43+
### Prerequisites
44+
- Node.js 16+
45+
- npm or yarn
46+
47+
### Installation
48+
49+
1. **Clone the repository**
50+
```bash
51+
git clone <repository-url>
52+
cd js-challenge-lab
53+
```
54+
55+
2. **Install dependencies**
56+
```bash
57+
npm install
58+
```
59+
60+
3. **Start the development server**
61+
```bash
62+
npm run dev
63+
```
64+
65+
4. **Open your browser**
66+
Navigate to `http://localhost:5173` (or the port shown in your terminal)
67+
68+
### Building for Production
69+
70+
```bash
71+
npm run build
72+
```
73+
74+
The built files will be in the `dist` directory, ready for deployment.
75+
76+
## 📚 Question Categories
77+
78+
- **Variables**: Basic variable assignment and primitives
79+
- **Arrays**: Array methods, manipulation, and iteration
80+
- **Strings**: String methods and manipulation
81+
- **Objects**: Object properties, methods, and references
82+
- **Functions**: Function declarations, expressions, and scope
83+
- **Scope**: Variable scope, hoisting, and closure concepts
84+
- **Closures**: Advanced closure patterns and use cases
85+
- **Promises**: Asynchronous programming with Promises
86+
- **Async/Await**: Modern async programming patterns
87+
- **Prototypes**: Prototype chain and inheritance
88+
- **Operators**: Type coercion and operator behavior
89+
- **Boolean**: Truthy/falsy values and boolean logic
90+
- **Array Methods**: map, filter, reduce, and other array methods
91+
- **Destructuring**: Object and array destructuring patterns
92+
93+
## 🎯 How to Use
94+
95+
1. **Select Your Level**: Choose from Beginner, Intermediate, or Advanced
96+
2. **Pick a Category**: Focus on specific JavaScript concepts or select "All"
97+
3. **Read the Question**: Understand what the code should output
98+
4. **Write/Modify Code**: Use the Monaco editor to write your solution
99+
5. **Run Your Code**: Click "Run Code" to execute and see results
100+
6. **Get Feedback**: Compare your output with the expected result
101+
7. **Learn More**: Use hints and explanations to understand concepts
102+
8. **Track Progress**: Monitor your score and maintain your streak!
103+
104+
## 🔧 Project Structure
105+
106+
```
107+
src/
108+
├── components/
109+
│ ├── CodeEditor.jsx # Monaco editor wrapper
110+
│ ├── QuestionDisplay.jsx # Question rendering component
111+
│ ├── ResultDisplay.jsx # Results and feedback component
112+
│ └── ProgressBar.jsx # Progress tracking (optional)
113+
├── data/
114+
│ └── questions.js # Question database
115+
├── App.jsx # Main application component
116+
├── index.css # Global styles and Tailwind imports
117+
└── main.jsx # React application entry point
118+
```
119+
120+
## 🎨 Customization
121+
122+
### Adding New Questions
123+
124+
Edit `src/data/questions.js` to add new challenges:
125+
126+
```javascript
127+
{
128+
id: 15,
129+
difficulty: "intermediate",
130+
category: "Arrays",
131+
question: "What will be the output of the following code?",
132+
starterCode: `const arr = [1, 2, 3];
133+
console.log(arr.push(4));`,
134+
expectedOutput: "4",
135+
hint: "The push method returns the new length of the array.",
136+
explanation: "Array.push() adds elements to the end and returns the new length."
137+
}
138+
```
139+
140+
### Styling
141+
142+
The app uses Tailwind CSS with custom color schemes defined in `tailwind.config.js`. You can customize:
143+
- Color palette
144+
- Dark mode behavior
145+
- Component styling
146+
- Responsive breakpoints
147+
148+
### Code Execution
149+
150+
The code execution system uses a safe `new Function()` approach with a mocked console object. For production use, consider additional security measures.
151+
152+
## 🚦 Development Scripts
153+
154+
- `npm run dev` - Start development server
155+
- `npm run build` - Build for production
156+
- `npm run preview` - Preview production build
157+
- `npm run lint` - Run ESLint
158+
159+
## 🤝 Contributing
160+
161+
1. Fork the repository
162+
2. Create a feature branch: `git checkout -b feature-name`
163+
3. Add your changes and new questions
164+
4. Commit your changes: `git commit -m 'Add feature'`
165+
5. Push to the branch: `git push origin feature-name`
166+
6. Submit a pull request
167+
168+
### Ideas for Contributions
169+
- Add more JavaScript questions and categories
170+
- Implement user accounts and progress saving
171+
- Add support for TypeScript challenges
172+
- Create a leaderboard system
173+
- Add question difficulty ratings from users
174+
- Implement spaced repetition algorithm
175+
176+
## 📝 License
177+
178+
This project is open source and available under the [MIT License](LICENSE).
179+
180+
## 🙏 Acknowledgments
181+
182+
- Built with [React](https://reactjs.org/) and [Vite](https://vitejs.dev/)
183+
- Code editor powered by [Monaco Editor](https://microsoft.github.io/monaco-editor/)
184+
- Styled with [Tailwind CSS](https://tailwindcss.com/)
185+
- Icons from [Lucide](https://lucide.dev/)
186+
187+
---
188+
189+
**Happy Coding! 🎉** Start sharpening your JavaScript skills today with JS Challenge Lab!
190+
191+
## React Compiler
192+
193+
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
194+
195+
## Expanding the ESLint configuration
196+
197+
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

0 commit comments

Comments
 (0)