Learn and Practice Coding

An AI-powered learning platform for mastering programming languages in a relaxed, focused environment.

🌟 Overview

Learn and Practice Coding is a modern web application that helps you learn programming through AI-generated, personalized lessons. Built with a dark, calming interface featuring warm orange accents, it creates the perfect atmosphere for focused learning sessions.

✨ Features

🎯 9 Programming Languages - JavaScript, Python, SQL, Rust, TypeScript, Kotlin, Java, Go, HTML/CSS
🤖 AI-Powered Lessons - Personalized content generated by Google's Gemini API
🎨 Relaxing Dark UI - Warm orange glowing outlines reduce eye strain
💻 Interactive Code Terminal - Practice with syntax-highlighted code examples
📚 Structured Topics - Curated learning paths for each language
🔥 Focused Learning - Distraction-free interface designed for concentration

🚀 Quick Start

Prerequisites

Node.js (v16 or higher)
Google Gemini API Key (Get one here)

Installation

# Clone the repository
git clone https://github.com/yourusername/learn-and-practice-coding.git
cd learn-and-practice-coding

# Install dependencies
npm install

# Create environment file
echo "VITE_GEMINI_API_KEY=your_api_key_here" > .env.local

# Start development server
npm run dev

The app will be available at http://localhost:3001

📖 How to Use

1. Choose Your Language

Select from 9 programming languages to begin your learning journey.

2. Pick a Topic

Browse through curated topics specific to your chosen language.

3. Generate Your Lesson

Click "Begin Learning Journey" to generate a personalized AI lesson.

4. Practice and Learn

Read through the AI-generated content, practice with code examples, and master the topic at your own pace.

🎨 Design Philosophy

The UI is carefully crafted to create a relaxed, focused learning environment:

Dark Background - Reduces eye strain during extended study sessions
Warm Orange Accents - Creates a cozy, inviting atmosphere
Soft Animations - Gentle pulsing effects promote calmness
Generous Spacing - Prevents visual clutter and cognitive overload
Glassmorphism - Modern frosted glass effects add depth

📚 Supported Languages & Topics

JavaScript

Variables and Data Types
Functions and Scope
Asynchronous JavaScript
DOM Manipulation
ES6 Modules
Understanding 'this'

Python

Basic Data Types
Lists and Dictionaries
Loops and Conditionals
Object-Oriented Programming
Virtual Environments
File I/O Operations

SQL

SELECT and FROM Basics
WHERE Clauses
JOINs
Aggregate Functions
Indexes and Performance
Window Functions

Rust

Ownership and Borrowing
Structs and Enums
Error Handling
Cargo and Crates
Traits
Concurrency

TypeScript

TypeScript vs JavaScript
Basic Types
Interfaces
Generics

Kotlin

Kotlin Basics
Null Safety
Functions and Lambdas
Coroutines

Java

JVM Introduction
Classes and Objects
Inheritance
Collections Framework

Go (Golang)

Packages and Imports
Structs and Methods
Goroutines
Channels

HTML & CSS

HTML Document Structure
CSS Selectors
Box Model
Flexbox Layout

🛠️ Tech Stack

Frontend: React 18 + TypeScript
Build Tool: Vite
Styling: Tailwind CSS
AI: Google Gemini API
Storage: LocalStorage for data persistence

📁 Project Structure

learn-and-practice-coding/
├── components/          # React components
│   ├── Header.tsx      # App header with logo
│   ├── LessonSelector.tsx  # Language/topic selection
│   ├── LessonDisplay.tsx   # Lesson content display
│   ├── CodeTerminal.tsx    # Interactive code viewer
│   └── Footer.tsx      # App footer
├── data/
│   └── lessons.ts      # Language and topic definitions
├── services/
│   ├── geminiService.ts    # AI lesson generation
│   └── languagesService.ts # Data persistence
├── screenshots/        # UI screenshots
├── App.tsx            # Main application
├── types.ts           # TypeScript interfaces
└── index.html         # Entry point

🔧 Configuration

Environment Variables

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

VITE_GEMINI_API_KEY=your_gemini_api_key_here

Customization

You can customize the app by editing:

data/lessons.ts - Add/modify languages and topics
tailwind.config.js - Adjust colors and styling
services/geminiService.ts - Modify AI prompts

🚀 Building for Production

# Create production build
npm run build

# Preview production build
npm run preview

The build output will be in the dist/ directory.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Google Gemini - For providing the AI API
Tailwind CSS - For the utility-first CSS framework
React Team - For the amazing framework
Vite - For the lightning-fast build tool

📧 Contact

Have questions or suggestions? Feel free to reach out!

Built with ❤️ for learners who value a peaceful, focused environment

🔥 Start your coding journey today!

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.github		.github
__tests__		__tests__
components		components
data		data
screenshots		screenshots
server		server
services		services
tests		tests
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmrc		.npmrc
App.tsx		App.tsx
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
PROJECT_SUMMARY.md		PROJECT_SUMMARY.md
README.md		README.md
index.html		index.html
index.tsx		index.tsx
keycard_github		keycard_github
keycard_github.pub		keycard_github.pub
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
types.ts		types.ts
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

License

nicocodeevo-ux/learn_and_practice_coding

Folders and files

Latest commit

History

Repository files navigation