🌟 InspoLog

Collect your daily spark!

A modern, beautiful web application for saving, exploring, and journaling inspirational quotes, thoughts, and life lessons.

           

---

📸 Screenshots

🏠 Home Page - Quote of the Day

Beautiful, minimalist design with daily inspiration

🔍 Explore Quotes - Browse & Discover

Paginated collection of inspiring quotes from various authors

📖 Personal Journal - Your Saved Quotes

Manage your personal collection of favorite quotes

✨ Add New Entry - Create Your Own

Add custom quotes, thoughts, and tag them for organization

🌙 Dark Mode Support

Beautiful dark/light theme with smooth transitions

📱 Mobile Responsive

Optimized for all device sizes

---

✨ Features

Core Functionality

• 🎯 Quote of the Day: Fresh, random inspirational quote every day
• 🔍 Explore Quotes: Browse through extensive collection with pagination
• 💾 Personal Journal: Save favorite quotes to your personal collection
• ➕ Custom Entries: Add your own quotes, thoughts, and wisdom
• 🏷️ Smart Tagging: Organize entries with customizable tags
• 🗑️ Delete & Undo: Remove entries with convenient undo functionality
• 🔄 Real-time Sync: All changes saved to browser localStorage

User Experience

• 🎨 Dark/Light Mode: Beautiful theme switching with system preference support
• 📱 Fully Responsive: Perfect experience on desktop, tablet, and mobile
• 🎭 Smooth Animations: Powered by Framer Motion for delightful interactions
• 🔔 Toast Notifications: Friendly feedback for all user actions
• ⚡ Fast Performance: Optimized with Next.js App Router and Turbopack
• ♿ Accessibility: Built with Radix UI for excellent accessibility support

---

🛠️ Tech Stack

Frontend Framework

• Next.js 15.4.2 - React framework with App Router
• React 19.1.0 - Latest React with concurrent features
• TypeScript 5.0 - Type-safe development

Styling & UI

• Tailwind CSS 4.0 - Utility-first CSS framework
• shadcn/ui - Beautiful, accessible component library
• Radix UI - Unstyled, accessible UI components
• Lucide React - Beautiful, customizable icons
• next-themes - Perfect theme switching

Animation & Interaction

• Framer Motion 12.23.9 - Production-ready motion library
• tw-animate-css - Additional CSS animations

Utilities & Tools

• clsx - Conditional className utility
• tailwind-merge - Merge Tailwind classes
• class-variance-authority - Component variants
• cmdk - Command menu component
• Sonner - Beautiful toast notifications

Development Tools

• ESLint 9 - Code linting and formatting
• PostCSS - CSS processing
• Turbopack - Fast development builds

Prototype

• Exalidraw - view prototype

---

📦 Dependencies

Core Dependencies

{
  "next": "15.4.2",
  "react": "19.1.0",
  "react-dom": "19.1.0",
  "typescript": "^5"
}

UI & Styling

{
  "@radix-ui/react-dialog": "^1.1.14",
  "@radix-ui/react-popover": "^1.1.14",
  "@radix-ui/react-separator": "^1.1.7",
  "@radix-ui/react-slot": "^1.2.3",
  "tailwindcss": "^4",
  "class-variance-authority": "^0.7.1",
  "clsx": "^2.1.1",
  "tailwind-merge": "^3.3.1"
}

Animation & Interaction

{
  "framer-motion": "^12.23.9",
  "cmdk": "^1.1.1"
}

Icons & Notifications

{
  "lucide-react": "^0.525.0",
  "sonner": "^2.0.6"
}

Theme & Utilities

{
  "next-themes": "^0.2.1"
}

---

🏗️ Project Structure

inspo-log/
├── 📁 src/
│   ├── 📁 app/                    # Next.js App Router
│   │   ├── 📁 api/               # API Routes
│   │   │   ├── 📁 explore/       # Explore quotes endpoint
│   │   │   ├── 📁 new/           # Add new quote endpoint  
│   │   │   ├── 📁 quote/         # Quote of the day endpoint
│   │   │   └── route.ts          # Main API route
│   │   ├── 📁 explore/           # Explore page
│   │   ├── 📁 journals/          # Journal pages
│   │   │   ├── 📁 new/          # Add new entry page
│   │   │   └── page.tsx         # Main journal page
│   │   ├── favicon.ico           # App icon
│   │   ├── globals.css           # Global styles
│   │   ├── layout.tsx            # Root layout
│   │   └── page.tsx              # Home page
│   ├── 📁 components/            # React Components
│   │   ├── 📁 ui/               # shadcn/ui components
│   │   ├── ModeToggle.tsx       # Theme switcher
│   │   ├── PageHeader.tsx       # Navigation header
│   │   ├── QuoteListFetcher.tsx # Quote list component
│   │   ├── RandomQuoteFetcher.tsx # Random quote component
│   │   └── theme-provider.tsx   # Theme context
│   ├── 📁 lib/                  # Utilities
│   │   └── utils.ts             # Helper functions
│   └── 📁 types/                # TypeScript types
│       └── quotes.ts            # Quote interfaces
├── 📁 public/                   # Static assets
├── 📁 docs/                     # Documentation
├── 📁 screenshots/              # App screenshots
├── components.json              # shadcn/ui config
├── next.config.ts              # Next.js config
├── package.json                # Dependencies
├── postcss.config.mjs          # PostCSS config
├── tailwind.config.js          # Tailwind config
└── tsconfig.json               # TypeScript config

---

🚀 Getting Started

Prerequisites

• Node.js 18.17 or later
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone https://github.com/MUMEi-28/inspo-log.git
   cd inspo-log

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Start the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

4. Open your browser Navigate to http://localhost:3000

Available Scripts

# Development with Turbopack (fastest)
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Lint codebase
npm run lint

📊 Data Models

Quote

interface ZenQuote {
  id?: number;
  q: string;  // Quote text
  a: string;  // Author name
}

Saved Quote

interface SavedQuote {
  id: number;
  q: string;  // Quote text
  a: string;  // Author name
}

🌐 API Endpoints

Endpoint	Method	Description	Response
/api/	GET	Random quotes for home page	6 random quotes
/api/explore	GET	All quotes for exploration	Complete quote collection
/api/quote	GET	Quote of the day	Single daily quote
/api/new	POST	Add new quote (WIP)	Success/Error status

External API

• ZenQuotes.io - Inspirational quotes API
• Rate Limiting: Handled gracefully with fallbacks
• Caching: Browser-level caching for performance

---

📈 Roadmap

Upcoming Features

• User Authentication - Save quotes across devices
• Quote Categories - Filter by topics and themes
• Search Functionality - Search through saved quotes
• Export Options - PDF, JSON, and other formats
• Quote Sharing - Share favorite quotes on social media
• Mobile App - React Native mobile application
• Offline Support - PWA with offline capabilities
• Advanced Filtering - Filter by author, date, tags
• Quote Analytics - Insights into your reading habits
• Community Features - Share and discover user quotes

Technical Improvements

• Database Integration - Move from localStorage to database
• API Rate Limiting - Implement proper rate limiting
• Performance Monitoring - Add analytics and monitoring
• Testing Suite - Comprehensive test coverage
• CI/CD Pipeline - Automated testing and deployment
• Docker Support - Containerization for deployment

---

🐛 Known Issues

• Custom quote creation currently uses localStorage only
• Theme transitions may flicker on initial load
• Mobile keyboard may overlap input fields on some devices

---

🙏 Acknowledgments

APIs & Services

• ZenQuotes.io - Providing inspirational quotes
• Vercel - Hosting and deployment platform

Open Source Libraries

• Next.js Team - Amazing React framework
• shadcn - Beautiful component library
• Radix UI - Accessible primitives
• Framer - Smooth animations
• Tailwind CSS - Utility-first CSS

Inspiration

• Quotes Community - For the wisdom and inspiration
• Open Source Community - For the tools and knowledge

---

💡 Save the moments, words, and wisdom that inspire you. One quote at a time.

Built with ❤️ by the InspoLog Team

⭐ Star this repo • 🐛 Report Bug • 🚀 Request Feature