FullStack-Learning-Path-by-Shine

Welcome to my Full Stack Learning Path repository! This repo documents my journey of learning full-stack development, featuring a collection of projects and code snippets that helped me build practical skills step-by-step.

📂 Folder Structure

• HTML/ — Core markup fundamentals and small exercises
• CSS/ — Styling techniques, layouts, and animations
• JavaScript/ — Vanilla JS basics, DOM manipulation, ES6+ features
• React/ — React components, hooks, and SPA projects
• Tailwind/ — Utility-first CSS framework experiments and examples
• MongoDB/ — Database fundamentals, CRUD operations, and aggregation pipelines
• Projects/ — Full projects combining frontend and backend tech, showcasing practical applications

🌟 Featured Project

LeetCode Stats Visualizer

A sleek and interactive web app that visualizes a LeetCode user's problem-solving progress in real time using animated circular progress bars. ✨

🚀 Features

• 🔍 Search any LeetCode username
• 📊 Animated circular progress indicators for Easy, Medium, and Hard questions
• 🌈 Dynamic UI with summary stats and last updated time
• 🌐 Direct link to the searched user's LeetCode profile
• 💡 Continuous glow effect for a polished visual experience

🛠️ Technologies Used

• HTML5
• CSS3 (with animations and transitions)
• JavaScript (ES6+)
• Public API: leetcode-stats-api

📦 Setup

1. Clone the repo:

   git clone https://github.com/shineeeeeeeeeeee/FullStack-Learning-Path-by-Shine.git
   cd projects/LeetCode-Metrics
   

2. Open index.html in your browser

3. Enter a valid LeetCode username and click Search feel free to fork, tweak, and improve!

🤝 Contribute

Have ideas to improve the UI, support more statistics, or add themes? Pull requests and suggestions are warmly welcome!