✨ FRONT-END DEVELOPMENT PORTFOLIO

Modern UI • Scalable Architecture • Real-world Practice

🔷 HTML5   🔷 CSS3   🔷 JavaScript   🔷 React   🔷 Firebase

---

🧭 Overview

This repository represents a comprehensive front-end learning journey, evolving from foundational UI development to building modular, scalable, and production-oriented applications.

It focuses on:

• 🧩 Clean UI implementation
• ⚡ Interactive user experience
• 🏗 Structured project architecture
• 🔗 Real API integration

---

🛠 Tech Stack

🧱 Core Technologies

• 🟦 HTML5 (Semantic Structure)
• 🎨 CSS3 (Flexbox, Grid, Positioning)
• ⚡ JavaScript ES6+

🎨 UI & Styling

• 🟪 Bootstrap 5 (Grid system & components)
• 🟦 Tailwind CSS (Utility-first approach)
• 🟩 Material UI (MUI)
• ✨ Custom CSS & Animations

⚛️ Front-end Framework

• ⚛️ ReactJS (Component-based architecture)
• ⚡ Vite (Fast build tool)

🔗 Data & Integration

• 🌐 REST API (Fetch API)
• 🗄 JSON Server
• 🔥 Firebase

🧰 Development Tools

• 🛠 VS Code
• 🔀 Git & GitHub
• 🔍 Chrome DevTools

---

📚 Core Competencies

🎯 UI Engineering

• Semantic HTML & structured layouts
• Advanced layout systems (Flexbox, Grid)
• Multi-section UI (header, content, footer)
• Reusable UI patterns

---

📱 Responsive Design

• Media Queries
• Adaptive & flexible layouts
• Mobile-first approach

---

⚡ JavaScript & Data Handling

• ES6+ syntax
• Functional programming with arrays: → map() • filter() • reduce() → sort() • some() • every()
• Data transformation & rendering

---

🧠 DOM & Interaction

• DOM manipulation
• Event-driven programming
• Form handling & validation
• API consumption & dynamic UI rendering

---

🗂 Project Architecture (Vanilla JS)

• Multi-page application structure

• Separation of concerns:

  • /css
  • /js
  • /views

• Authentication flow (Login / Register)

• Dashboard & data visualization

---

⚛️ React Development

• Component-based design

• State & Props management

• Context API

• Client-side routing

• Reusable components:

  • 📊 Table
  • 🧾 Modal
  • 🔎 Search
  • 📄 Pagination

---

🎨 UI Libraries Integration

• Bootstrap layout system
• Tailwind utility styling
• Material UI components
• Hybrid styling approach (library + custom CSS)

---

🚀 Advanced Application Development

• React + Vite project structure
• Modular architecture
• CRUD operations
• Admin dashboard system
• Firebase integration

---

🗂 Project Structure

FOUNDATION      → HTML / CSS layout & UI practice  
LOGIC           → JavaScript & DOM manipulation  
APPLICATION     → Vanilla JS + API integration  
FRAMEWORK       → React development  
ADVANCED        → React + Vite + Firebase

---

🚀 Getting Started

🔧 Clone Repository

git clone https://github.com/NV-DuyManh/FRONT_END.git

▶️ Run Projects

• 🌐 HTML/CSS → Open .html or use Live Server
• ⚡ JavaScript → Check browser console
• ⚛️ React →

npm install
npm run dev

---

🎯 Objective

Build a strong front-end foundation and evolve into a developer capable of designing and developing scalable, maintainable, and user-centric web applications.

---

✨ Consistent practice • Continuous improvement • Real-world mindset

✨ If this repo helps you, a ⭐ would mean a lot!