🌹 Word of the Day

A beautiful, modern web application that delivers a new conversational word every day to help expand your vocabulary. Built with Next.js and styled with a elegant rose theme.

✨ Features

• Daily Word: Get a unique, carefully curated word every day
• Rich Definitions: Complete with pronunciation, examples, and etymology
• AI-Powered Examples: Creative sentence examples generated by Google Gemini
• Consistent Experience: Same word for everyone on the same day
• Beautiful Design: Elegant rose-themed UI with dark/light mode support
• Responsive: Works perfectly on desktop, tablet, and mobile
• PWA Ready: Installable as a mobile app
• 400+ Words: Year-long vocabulary journey with conversational words

🎯 Why This App?

This isn't just another random word generator. Each word is:

• Conversational: Words you can actually use in daily conversations
• Interesting: Sophisticated vocabulary that makes you sound more articulate
• Memorable: Carefully selected to be both useful and engaging
• Consistent: Everyone gets the same word each day, creating a shared experience

🚀 Getting Started

Prerequisites

• Node.js 22+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

git clone https://github.com/yourusername/word-of-the-day.git
cd word-of-the-day

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS with custom rose theme
• UI Components: shadcn/ui for beautiful, accessible components
• Icons: Lucide React for consistent iconography
• Theme: next-themes for dark/light mode
• API: DictionaryAPI.dev for word definitions
• AI: Google Gemini for creative sentence examples
• Deployment: Vercel for seamless hosting

📱 PWA Features

The app is fully PWA-ready with:

• Web manifest for mobile installation
• Multiple favicon sizes for all devices
• Theme colors matching the rose design
• Offline-ready architecture

🎨 Design Philosophy

• Rose Theme: Elegant, sophisticated color palette
• Minimalist: Clean, distraction-free interface
• Accessible: High contrast, keyboard navigation, screen reader support
• Responsive: Seamless experience across all device sizes

🔧 Customization

Adding New Words

Edit lib/constants.ts to add more words to the collection:

export const CONVERSATIONAL_WORDS = [
  'your', 'new', 'words', 'here'
];

Changing the Theme

Modify the color scheme in app/globals.css and component files.

API Configuration

Required APIs (No API keys needed)

• DictionaryAPI.dev: Provides word definitions, pronunciation, and examples

Optional APIs (Enhanced features)

• Google Gemini: For AI-generated creative sentence examples
  • Get your free API key from Google AI Studio
  • Add to .env.local: GEMINI_API_KEY=your_key_here (server-side only)
  • Without this key, the app will use fallback template examples

🚀 Deployment

Deploy to Vercel (Recommended)

1. Install Vercel CLI:

npm i -g vercel

2. Deploy:

vercel

Deploy to Other Platforms

The app works on any platform that supports Next.js:

• Netlify
• Railway
• Render
• AWS Amplify

📄 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🙏 Acknowledgments

• DictionaryAPI.dev for providing free word definitions
• Google Gemini for AI-powered creative examples
• shadcn/ui for the beautiful component library
• Next.js team for the amazing framework
• Vercel for seamless deployment

---

Start your vocabulary journey today! 🌹📚