💻 Daily Coding Advice

A minimalist React application that displays programming advice with a stunning glassmorphism UI. Built with Vite + React for optimal performance and developer experience.

📸 Screenshots

🖥️ Desktop View

_{✨ Glassmorphism UI with gradient effects on large screens}

📱 Mobile & Tablet Views

Mobile (≤480px)

Tablet (≤768px)

✨ Features

• 📖 Sequential Advice Display - Browse through programming advice one by one
• 🔄 Smooth Transitions - Elegant fade and scale animations between advice
• 📊 Reading Counter - Track how many advice you've read
• 🎨 Glassmorphism Design - Modern UI with blur effects and gradients
• 📱 Fully Responsive - Perfect on mobile, tablet, and desktop
• ⚡ Lightning Fast - Built with Vite for instant HMR and optimal builds

🛠️ Tech Stack

Frontend

• React 18 - Functional components with Hooks
• Vite - Next generation build tooling
• ESLint - Code quality and consistency

Styling

• CSS3 - Pure CSS with custom properties
• Flexbox - Modern layout system
• Glassmorphism - Frosted glass effect with backdrop-filter
• CSS Variables - Dynamic theming with :root variables
• Media Queries - Responsive breakpoints for all devices

Data Management

• Local JSON - Static advice data source
• React Hooks - useState & useEffect for state management

📂 Project Structure

advice_coding/
├── public/ # Static assets

├── screenshot/                    
│   ├── hp.png
│   ├── ipad.png  
│   └── laptop.png

├── src/
│ ├── assets/ # Images and icons
│ ├── data/ # JSON data files
│ │ └── advices.json # Programming advice collection

│ ├── components/ # Reusable components
│ ├── App.jsx # Main application component
│ ├── App.css # Component-specific styles
│ ├── index.css # Global styles
│ └── main.jsx # Application entry point

├── index.html # HTML template

├── package.json # Dependencies and scripts

├── vite.config.js # Vite configuration

└── README.md # Project documentation

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/ranggautama47/advice_coding.git
   cd advice_coding
   
    Install dependencies
    bash
   
    npm install
    # or
    yarn install
   
    Start development server
    bash
   
    npm run dev
    # or
    yarn dev
   
    Open your browser
    text
   
    http://localhost:5173
   

🎯 How It Works

Core Logic

Data Loading - Advice data is imported from advices.json using useEffect

State Management - currentIndex tracks the displayed advice

User Interaction - Clicking the button triggers:

    Fade-out animation

    Index increment (with modulo for looping)

    Counter increment

    Fade-in animation with new advice

Visual Feedback - Smooth transitions and counter updates

Key React Concepts Demonstrated

✅ Functional Components

✅ useState Hook for state management

✅ useEffect Hook for side effects

✅ Event Handling

✅ Conditional Rendering

✅ Dynamic Styling with JavaScript

🎨 Design System

Color Palette
css

:root {
  --primary: #6366f1;        /* Indigo */
  --secondary: #ec4899;       /* Pink */
  --bg: #0d0e15;              /* Dark background */
  --card-bg: rgba(30, 31, 46, 0.6);  /* Glass effect */
}

Typography

Font Family: 'Inter', system-ui, sans-serif

Responsive Scaling: clamp() for fluid typography

Weights: 400 (regular), 600 (semibold), 800 (extrabold)

Effects

Glassmorphism: backdrop-filter: blur(16px)

Glow Effects: Radial gradients with blur

Smooth Transitions: 0.4s cubic-bezier easing

Hover States: Lift effect with shadows

📱 Responsive Breakpoints

Device	Screen Size	CSS Media Query	Key Adjustments
📱 Mobile	≤ 480px	@media (max-width: 480px)	• Card padding: 25px 20px • Button: width: 100% • Glow blur: 50px • Border radius: 20px
📟 Tablet	≤ 768px	@media (max-width: 768px)	• Container padding: 15px • Content padding: 10px • Optimized touch targets
💻 Desktop	≥ 1024px	@media (min-width: 1024px)	• Title size: 4.5rem • Card padding: 60px • Content max-width: 700px
🖥️ Large Desktop	≥ 1440px	@media (min-width: 1440px)	• Enhanced visual hierarchy • Maximum container width • Premium spacing

Key CSS Techniques Used:

• clamp() for fluid typography
• backdrop-filter for glassmorphism
• CSS Custom Properties for theming
• Mobile-first approach with progressive enhancement

🔧 Configuration

Vite Configuration (vite.config.js) javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true
  }
})

🚦 Future Roadmap

Random Mode - Shuffle advice randomly

Dark/Light Theme - Theme toggle with CSS variables

API Integration - Fetch advice from external API

Categories - Filter advice by programming language/topic

Favorites - Save favorite advice

Share Feature - Share advice on social media

Keyboard Shortcuts - Spacebar for next advice

🤝 Contributing

Contributions are welcome! Feel free to:

Fork the repository

Create a feature branch

Commit your changes

Push to the branch

Open a Pull Request

📝 License

This project is open source and available under the MIT License.

👨‍💻 Author

Rangga Utama

GitHub: @ranggautama47

Frontend Developer | Web Programming Enthusiast

🙏 Acknowledgments

Programming advice collected from experienced developers

Design inspiration from modern glassmorphism trends

Built with Vite + React for optimal learning experience

⭐ If you find this project helpful, please consider giving it a star!