Random Vocabulary

A modern, progressive web application designed to help users expand their vocabulary through daily word discovery, idioms, and jokes. Built with Next.js and featuring a beautiful, responsive interface with offline capabilities.

Overview

Random Vocabulary provides users with:

• 10 unique words daily with comprehensive definitions, pronunciations, and etymology
• Curated idioms with cultural context and usage patterns (in development)
• Witty jokes showcasing the playful side of language
• Progressive Web App functionality for offline access (in development)
• Responsive design optimized for all devices

Tech Stack

Technology	Version	Purpose
Next.js	15.3.4	React framework with App Router
React	19.1.0	Frontend library
TypeScript	5.8.3	Type-safe development
Tailwind CSS	4.1.11	Utility-first styling
Node.js	20+	Runtime environment

Features

Vocabulary Learning

• Daily rotation of 10 carefully selected words
• Comprehensive definitions with examples
• Etymology and word origins

Progressive Web App (in development)

• Installable on mobile and desktop
• Offline functionality
• Fast loading with optimized performance
• Native app-like experience

Responsive Design

• Mobile-first approach
• Tablet and desktop optimized
• Accessible color schemes
• Smooth animations and transitions

Getting Started

Prerequisites

Ensure you have the following installed:

node --version  # v20.0.0 or higher
npm --version   # v9.0.0 or higher
# OR
pnpm --version  # v8.0.0 or higher (recommended)

Installation

1. Clone the repository

   git clone https://github.com/username/vocabulary.git
   cd vocabulary

2. Install dependencies

   # Using pnpm (recommended)
   pnpm install
   
   # Using npm
   npm install

3. Start the development server

   # Using pnpm
   pnpm dev
   
   # Using npm
   npm run dev

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

Build for Production

# Build the application
pnpm build

# Start production server
pnpm start

Project Structure

vocabulary/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── jokes/         # Jokes API endpoints
│   │   └── vocabulary/    # Vocabulary API endpoints
│   ├── idioms/            # Idioms page
│   ├── jokes/             # Jokes page
│   ├── vocabulary/        # Vocabulary page
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── manifest.ts        # PWA manifest
│   └── page.tsx           # Home page
├── components/            # Reusable components
│   ├── icons/             # Icon components
│   ├── Footer.tsx         # Footer component
│   ├── Navbar.tsx         # Navigation component
│   └── PWAInstaller.tsx   # PWA installation prompt
├── public/                # Static assets
└── package.json           # Dependencies and scripts

API Integration

The application integrates with external APIs:

• Dictionary API: https://api.dictionaryapi.dev/api/v2/entries/en/{word}
• Random Words API: https://random-word-api.herokuapp.com/word
• Jokes API: https://official-joke-api.appspot.com/

Contributing

We welcome contributions to improve Daily Vocabulary! Here's how you can help:

Fork and Clone

1. Fork the repository on GitHub

2. Clone your fork locally

   git clone https://github.com/yourusername/vocabulary.git
   cd vocabulary

3. Add the upstream remote

   git remote add upstream https://github.com/originalowner/vocabulary.git

Development Workflow

1. Create a feature branch

   git checkout -b feature/your-feature-name

2. Make your changes

   • Follow the existing code style
   • Add TypeScript types for new features
   • Test your changes thoroughly

3. Commit your changes

   git add .
   git commit -m "feat: add your feature description"

4. Push to your fork

   git push origin feature/your-feature-name

5. Create a Pull Request

   • Go to your fork on GitHub
   • Click "New Pull Request"
   • Provide a clear description of your changes

Contribution Guidelines

• Code Style: Follow the existing TypeScript and React patterns
• Commits: Use conventional commit messages (feat:, fix:, docs:, etc.)
• Testing: Ensure your changes don't break existing functionality
• Documentation: Update README if adding new features
• Responsive Design: Ensure new UI elements work on all screen sizes

Areas for Contribution

• New Features: Additional language learning tools
• UI/UX Improvements: Enhanced user interface elements
• Performance: Optimization and loading improvements
• Accessibility: WCAG compliance improvements
• Testing: Unit and integration test coverage
• Documentation: API documentation and user guides

Development Scripts

# Start development server with Turbopack
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linting
pnpm lint

Browser Support

• Chrome/Edge: 90+
• Firefox: 88+
• Safari: 14+
• Mobile browsers: iOS Safari 14+, Chrome Mobile 90+

License

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

Acknowledgments

• Dictionary API for comprehensive word definitions
• Official Joke API for humor content
• Random Words API for vocabulary generation
• Tailwind CSS for the beautiful design system
• Next.js team for the excellent framework

---

Built with care for language learners worldwide