coding-playground/src/data.ts at main · codecraftpython-dev/coding-playground

391 lines (382 loc) · 15.2 KB
 * @license
 * SPDX-License-Identifier: Apache-2.0
  FeatureItem, 
  LanguageItem, 
  RoadmapStep, 
  ProjectItem, 
  AnimationDemoItem, 
  ChallengeItem, 
} from './types';
export const features: FeatureItem[] = [
    id: 'interactive-learning',
    title: 'Interactive Learning',
    description: 'Learn concepts via real-time code sandboxes and rich step-by-step visual models.',
    iconName: 'Sparkles'
    id: 'practice-projects',
    title: 'Practice Projects',
    description: 'Apply your skills by coding real-world projects with instant workspace feedback.',
    iconName: 'Layout'
    id: 'coding-challenges',
    title: 'Coding Challenges',
    description: 'Tackle algorithmic challenges designed to sharpen your analytical problem-solving skills.',
    iconName: 'Trophy'
    id: 'visual-programming',
    title: 'Visual Programming',
    description: 'Watch variables mutate and code execute step-by-step through reactive visualizations.',
    iconName: 'Eye'
    id: 'responsive-lessons',
    title: 'Responsive Lessons',
    description: 'Perfectly formatted lessons that fit on any device, allowing you to learn on the go.',
    iconName: 'Smartphone'
    id: 'beginner-friendly',
    title: 'Beginner Friendly',
    description: 'No prior background required. We start from absolute scratch and build up to expert levels.',
    iconName: 'GraduationCap'
export const languages: LanguageItem[] = [
    id: 'html',
    name: 'HTML',
    iconName: 'FileCode',
    description: 'The foundation of all web documents. Learn tags, structure, semantic elements, and SEO hygiene.',
    level: 'Beginner',
    popularity: '98%'
    id: 'css',
    name: 'CSS',
    iconName: 'Palette',
    description: 'Styling the modern web. Master layout engines like Flexbox/Grid, custom variables, and keyframe animations.',
    level: 'Beginner',
    popularity: '95%'
    id: 'js',
    name: 'JavaScript',
    iconName: 'Code2',
    description: 'Add dynamic reactivity to websites. Learn arrays, callbacks, DOM operations, and async operations.',
    level: 'Intermediate',
    popularity: '97%'
    id: 'ts',
    name: 'TypeScript',
    iconName: 'ShieldAlert',
    description: 'Static typing for JavaScript. Gain safety, interface designs, type inference, and solid IDE autocompletes.',
    level: 'Intermediate',
    popularity: '85%'
    id: 'python',
    name: 'Python',
    iconName: 'Terminal',
    description: 'Clean syntax and massive scientific utilities. Great for scripting, automation, algorithms, and data.',
    level: 'Beginner',
    popularity: '92%'
    id: 'cpp',
    name: 'C++',
    iconName: 'Cpu',
    description: 'High-performance, low-level memory structures. Ideal for systems engineering, game engines, and competitive coding.',
    level: 'Advanced',
    popularity: '68%'
    id: 'java',
    name: 'Java',
    iconName: 'Coffee',
    description: 'Object-oriented, scale-ready corporate language. Master design patterns, type structures, and multithreading.',
    level: 'Intermediate',
    popularity: '78%'
export const roadmap: RoadmapStep[] = [
    id: 'html-step',
    title: 'HTML Foundations',
    duration: 'Week 1',
    topics: ['Semantic markup', 'Attributes & links', 'Forms & validations', 'Accessibility (ARIA)'],
    description: 'Construct robust, semantic, accessible web foundations.'
    id: 'css-step',
    title: 'CSS Styling & Grid',
    duration: 'Week 2',
    topics: ['Box model & spacing', 'Flexbox & CSS Grid', 'Responsive queries', 'Custom variables'],
    description: 'Turn plain wireframes into gorgeous, adaptive design states.'
    id: 'js-step',
    title: 'JavaScript Logic',
    duration: 'Week 3-4',
    topics: ['Variables & closures', 'Dynamic DOM events', 'Promises & fetch API', 'Local storage data'],
    description: 'Enrich page components with clean procedural and asynchronous scripting.'
    id: 'projects-step',
    title: 'Practical Mini-Projects',
    duration: 'Week 5',
    topics: ['Interactive Calculator', 'Persistent To-Do dashboard', 'Live Weather trackers', 'Quiz applets'],
    description: 'Stitch together web elements into operational local applications.'
    id: 'advanced-step',
    title: 'Advanced Engineering',
    duration: 'Week 6+',
    topics: ['TypeScript static safety', 'State management', 'Component lifecycles', 'API optimizations'],
    description: 'Build enterprise-grade, scale-ready, and fully validated systems.'
export const projects: ProjectItem[] = [
    id: 'calc',
    title: 'Calculator',
    difficulty: 'Beginner',
    estimatedTime: '2 hours',
    description: 'A classic calculation panel supporting arithmetic operators, clear buttons, decimal states, and dynamic display layouts.',
    iconName: 'Calculator'
    id: 'todo',
    title: 'To-Do App',
    difficulty: 'Beginner',
    estimatedTime: '3 hours',
    description: 'A high-fidelity project dashboard with list sorting, checkboxes, clean empty-states, and local storage data persistence.',
    iconName: 'CheckSquare'
    id: 'clock',
    title: 'Digital Clock',
    difficulty: 'Beginner',
    estimatedTime: '1 hour',
    description: 'Create a gorgeous real-time ticking digital clock displaying hours, minutes, seconds, current date, and AM/PM logic.',
    iconName: 'Clock'
    id: 'weather',
    title: 'Weather App',
    difficulty: 'Intermediate',
    estimatedTime: '4 hours',
    description: 'A responsive weather dashboard featuring town-by-town forecast mock queries, beautiful weather graphic states, and temperature toggles.',
    iconName: 'CloudSun'
    id: 'portfolio',
    title: 'Portfolio Website',
    difficulty: 'Intermediate',
    estimatedTime: '5 hours',
    description: 'A personalized developer portfolio containing profile banners, project bento grids, custom skills charts, and validation forms.',
    iconName: 'User'
    id: 'quiz',
    title: 'Quiz App',
    difficulty: 'Intermediate',
    estimatedTime: '3 hours',
    description: 'A multiple-choice question dashboard tracking user scores, high-contrast correct/incorrect states, and final diagnostic results.',
    iconName: 'HelpCircle'
export const animations: AnimationDemoItem[] = [
    id: 'particles',
    title: 'Particle System',
    description: 'Dynamic kinetic system containing interacting particles that follow mouse movements and form connective neural lines.',
    difficulty: 'Intermediate'
    id: 'solar',
    title: 'Solar System',
    description: 'A gorgeous simulated CSS and canvas cosmic system featuring gravity centers, orbital durations, and beautiful trail graphics.',
    difficulty: 'Easy'
    id: 'waves',
    title: 'Wave Interference',
    description: 'Mathematical visual modeling illustrating multiple sinusoidal waves intersecting to create elegant constructive/destructive interference grids.',
    difficulty: 'Advanced'
    id: 'matrix',
    title: 'Matrix Rain',
    description: 'The iconic digital cascading rain terminal simulation with green binary code dropping at random speeds and custom character densities.',
    difficulty: 'Intermediate'
    id: 'lorenz',
    title: 'Lorenz Attractor',
    description: 'A stunning chaos theory 3D system plotting the Lorenz mathematical coordinates to reveal a butterfly butterfly orbital loop.',
    difficulty: 'Advanced'
export const challenges: ChallengeItem[] = [
    id: 'fizzbuzz',
    title: 'FizzBuzz Classic',
    difficulty: 'Easy',
    category: 'Algorithms',
    description: 'Write a function that outputs words based on standard division rules.',
    instructions: 'Implement fizzBuzz(n) to return "Fizz" if divisible by 3, "Buzz" if divisible by 5, "FizzBuzz" if divisible by both 3 and 5, and the number itself as a string otherwise.',
    starterCode: `function fizzBuzz(n) {\n  // Write your code here\n  if (n % 15 === 0) return "FizzBuzz";\n  if (n % 3 === 0) return "Fizz";\n  if (n % 5 === 0) return "Buzz";\n  return String(n);\n}`,
    solutionTemplate: 'fizzBuzz',
    testCases: [
      { input: '3', expected: 'Fizz' },
      { input: '5', expected: 'Buzz' },
      { input: '15', expected: 'FizzBuzz' },
      { input: '7', expected: '7' }
    id: 'reverse-string',
    title: 'Reverse a String',
    difficulty: 'Easy',
    category: 'String Manipulation',
    description: 'Flip a word backwards.',
    instructions: 'Implement reverseString(str) to take a string and return it in reverse. For example, "hello" should return "olleh".',
    starterCode: `function reverseString(str) {\n  // Write your code here\n  return str.split("").reverse().join("");\n}`,
    solutionTemplate: 'reverseString',
    testCases: [
      { input: '"hello"', expected: 'olleh' },
      { input: '"coding"', expected: 'gnidoc' },
      { input: '"App"', expected: 'ppA' }
    id: 'palindrome',
    title: 'Palindrome Checker',
    difficulty: 'Medium',
    category: 'Algorithms',
    description: 'Check if a word is read the same forwards and backwards.',
    instructions: 'Implement isPalindrome(str) to return true if the lowercase clean string is a palindrome, and false otherwise.',
    starterCode: `function isPalindrome(str) {\n  const clean = str.toLowerCase().replace(/[^a-z0-9]/g, "");\n  // Write your code here\n  return clean === clean.split("").reverse().join("");\n}`,
    solutionTemplate: 'isPalindrome',
    testCases: [
      { input: '"racecar"', expected: 'true' },
      { input: '"hello"', expected: 'false' },
      { input: '"A man, a plan, a canal. Panama"', expected: 'true' }
    id: 'two-sum',
    title: 'Two Sum Target',
    difficulty: 'Medium',
    category: 'Arrays',
    description: 'Identify indices of numbers that aggregate to a specified value.',
    instructions: 'Implement twoSum(nums, target) to return array of indices of the two numbers in the input array that sum up to the target. Assume exactly one solution.',
    starterCode: `function twoSum(nums, target) {\n  // Write your code here\n  const map = {};\n  for (let i = 0; i < nums.length; i++) {\n    const complement = target - nums[i];\n    if (complement in map) {\n      return [map[complement], i];\n    }\n    map[nums[i]] = i;\n  }\n  return [];\n}`,
    solutionTemplate: 'twoSum',
    testCases: [
      { input: '[2, 7, 11, 15], 9', expected: '[0, 1]' },
      { input: '[3, 2, 4], 6', expected: '[1, 2]' }
    id: 'fibonacci',
    title: 'Fibonacci Sequence',
    difficulty: 'Medium',
    category: 'Math',
    description: 'Calculate the N-th number in the Fibonacci sequence.',
    instructions: 'Implement fibonacci(n) to return the n-th Fibonacci number. Standard starts: F(0) = 0, F(1) = 1, F(2) = 1, F(3) = 2...',
    starterCode: `function fibonacci(n) {\n  // Write your code here\n  if (n <= 1) return n;\n  let a = 0, b = 1;\n  for (let i = 2; i <= n; i++) {\n    let temp = a + b;\n    a = b;\n    b = temp;\n  }\n  return b;\n}`,
    solutionTemplate: 'fibonacci',
    testCases: [
      { input: '5', expected: '5' },
      { input: '8', expected: '21' },
      { input: '0', expected: '0' },
      { input: '1', expected: '1' }
    id: 'is-prime',
    title: 'Prime Number Validator',
    difficulty: 'Easy',
    category: 'Math',
    description: 'Test if a number has exactly two distinct positive divisors.',
    instructions: 'Implement isPrime(n) to return true if n is prime, and false otherwise.',
    starterCode: `function isPrime(n) {\n  // Write your code here\n  if (n <= 1) return false;\n  for (let i = 2; i <= Math.sqrt(n); i++) {\n    if (n % i === 0) return false;\n  }\n  return true;\n}`,
    solutionTemplate: 'isPrime',
    testCases: [
      { input: '11', expected: 'true' },
      { input: '4', expected: 'false' },
      { input: '1', expected: 'false' },
      { input: '2', expected: 'true' }
export const chooseUs = [
    title: 'Learn by Doing',
    description: 'Ditch the long, dry lectures. Write code immediately on every single theoretical step.'
    title: 'Visual Explanations',
    description: 'Interactive canvas widgets reveal computer memory, array indexing, and state operations visually.'
    title: 'Project-Based Learning',
    description: 'Compile a professional portfolio of real-world responsive apps to demonstrate to employers.'
    title: 'Interactive Challenges',
    description: 'Run unit test suites inside our lightweight simulated interpreter and instantly debug errors.'
    title: 'Modern Curriculum',
    description: 'Consistently refreshed with ESNext patterns, TypeScript integrations, and semantic accessible standards.'
    title: 'Free Learning Resources',
    description: 'Get permanent complimentary access to community cheat-sheets, guidelines, and roadmap documentation.'
export const faqs: FAQItem[] = [
    question: 'Is Coding Playground completely free to use?',
    answer: 'Yes! Phase 1 of Coding Playground is 100% free. You can access all our interactive roadmaps, practice playgrounds, custom micro-projects, and coding challenges without needing to register or enter billing details.'
    question: 'Do I need to install any development software on my PC?',
    answer: 'Absolutely not. Everything compiles and renders directly inside your modern browser tab. You do not need Node.js, code editors, or Docker installed to start mastering programming languages.'
    question: 'What programming languages can I learn here?',
    answer: 'We currently offer comprehensive interactive lessons, visual modules, and playgrounds for HTML, CSS, JavaScript, TypeScript, Python, C++, and Java, taking you from complete beginner to advanced engineering concepts.'
    question: 'Can I test my own custom projects in the Playground?',
    answer: 'Yes! The Playground tab features a full interactive workspace with code syntax editing for HTML, CSS, and JavaScript. You can write custom web layouts and immediately render them in a real-time reactive iframe output.'
    question: 'How do the interactive coding challenges work?',
    answer: 'Our Challenges tab offers algorithm tasks from Easy to Hard. You read the task details, write code in the visual text editor, and click "Run Tests". Our simulated script checker asserts outcomes against precise test inputs and outputs.'
    question: 'Are the featured projects fully operational inside the app?',
    answer: 'Indeed they are! In the Projects tab, you can view and use actual working versions of our calculator, dynamic ticking clock, quiz engine, and interactive to-do tracker to see exactly how the final compiled applications behave.'
    question: 'Who is Coding Playground designed for?',
    answer: 'It is built for developers of all skill tiers! Complete novices can start with semantic HTML/CSS, while seasoned engineers can dive into hard algorithmic challenges, chaos theory math visualizations, and TypeScript layouts.'
    question: 'Can I suggest new features or report issues?',
    answer: 'We welcome your feedback! Visit our Contact tab to fill out our interactive message form, specifying your browser configuration, ideas, or questions, and our simulated support ticket generator will respond to your queries.'
FilesExpand file tree

data.ts

Latest commit

History

data.ts

File metadata and controls
