💻 Coding Playground

Learn Programming by Building Real Projects

Coding Playground is a modern educational frontend project designed to help beginners learn programming through a clean, structured, and visual experience.

This is currently Phase 1 (Frontend UI only).

AI Studio Reference:

🚀 Project Link AI Studio Reference:

https://coding-playground.onrender.com/

• Node.js (v18+ recommended)
• npm

npm install

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

GEMINI_API_KEY=your_api_key_here

⚠️ Only required if your project uses Gemini / AI Studio features.

npm run dev

http://localhost:3000

• Responsive landing page
• Modern UI design
• Home page layout
• Learning roadmap section (UI only)
• Programming language cards
• Featured projects section (UI only)
• Coding challenges section (UI only)
• Animation showcase section (UI only)
• About page
• Contact page
• 404 page
• Mobile responsive design
• SEO-friendly structure

• Code editor
• Live code execution
• Backend or database
• Authentication system
• User accounts
• AI features
• Saving projects

Phase 1 is focused on building a:

Clean, scalable, and professional frontend foundation for a future coding education platform.

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• Lucide React Icons

• Clean and minimal UI
• Educational theme
• Soft shadows and rounded corners
• Responsive design
• Simple hover animations
• Fast performance

coding-playground/

├── assets/
│   └── .aistudio/
│
├── src/
│   ├── components/
│   │   ├── Footer.tsx
│   │   ├── Navbar.tsx
│   │   ├── Page404.tsx
│   │   ├── PageAbout.tsx
│   │   ├── PageChallenge.tsx
│   │   ├── PageContact.tsx
│   │   ├── PageHome.tsx
│   │   ├── PageLearn.tsx
│   │   ├── PagePlayground.tsx
│   │   └── PageProjects.tsx
│   │
│   ├── App.tsx
│   ├── data.ts
│   ├── index.css
│   ├── main.tsx
│   └── types.ts
│
├── .env.example
├── .gitignore
├── index.html
├── metadata.json
├── package.json
├── tsconfig.json
└── vite.config.ts

• Home
• About
• Contact
• 404 Page

Learn by doing, not just reading.

Even though this is UI-only, the structure is designed for future expansion into a full interactive coding platform.

• Interactive code editor
• Live preview system

• Coding challenges
• Mini projects

• User accounts
• Progress tracking

• AI coding assistant
• Community features

• This is ONLY frontend (Phase 1)
• No backend or database included yet
• AI features are optional for future
• Built for scalability and expansion

Educational use only.