Advice Generator

This is a simple yet elegant web application that provides you with random pieces of advice at the click of a button. Think of it as your personal wisdom companion that delivers thoughtful insights whenever you need them. The app features a clean, dark design that's easy on the eyes and works perfectly on both desktop and mobile devices. Whether you're looking for inspiration, motivation, or just a moment of reflection, this app brings you carefully curated advice from a trusted source.

Architecture & Technology Stack

This Vue 3 advice generator showcases modern frontend development patterns with a focus on simplicity and performance:

• Framework: Vue 3 with hybrid Composition API and Options API approach
• State Management: Pinia with custom suffix configuration for clean store integration
• Build System: Vite for lightning-fast development and optimized production builds
• Styling: Tailwind CSS with custom dark theme and neon-green accent colors
• HTTP Client: Axios for reliable API communication with the AdviceSlip service
• Preprocessing: Sass/SCSS support with global imports via Vite configuration

Key Features

• Hybrid Vue Architecture: Combines <script setup> syntax with Options API for Pinia mappers
• Responsive Design: Mobile-first approach with custom breakpoints and adaptive SVG assets
• Custom Theme System: Tailwind CSS with HSL-based custom color palette
• State Management: Centralized advice state with formatted getters and async actions
• API Integration: Seamless integration with AdviceSlip API for random advice generation
• Modern Tooling: ESLint with Prettier integration and auto-fix capabilities

Application Flow

1. Store Initialization (src/stores/counter.js) manages advice state and API interactions
2. Component Logic (src/App.vue) handles user interactions and displays formatted advice
3. API Service fetches random advice from https://api.adviceslip.com/advice
4. Responsive UI adapts to different screen sizes with device-specific SVG dividers
5. State Formatting provides clean advice display with quotes and ID prefixes