mockify

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 10)

No description available.

mockify Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Mockify

A fake DM (Direct Message) creation tool for generating realistic mock-ups of conversations from various messaging platforms.

## Features

- 🎨 **15 Platform Themes**: iMessage, WhatsApp, Instagram, Facebook Messenger, X (Twitter), Telegram, Discord, Slack, Signal, Reddit, Snapchat, TikTok, WeChat, Bumble, Tinder
- 💬 **Real-time Chat Editor**: Live preview as you type
- 🖼️ **High-Quality Export**: PNG/JPEG export with device frames
- 📱 **Device Customization**: Multiple iPhone models, carrier selection, battery percentage
- 👤 **Profile Management**: Avatar upload and username editing
- ✅ **Message Features**: Read receipts, timestamps, delivery indicators
- 📱 **Responsive Design**: Works on mobile and desktop

## Quick Start

### Development

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Open http://localhost:3000
```

### Production

```bash
# Build for production
npm run build

# Start production server
npm start
```

## Docker Deployment

### Prerequisites

- Docker 20.10 or higher
- Docker Compose 2.0 or higher (optional, but recommended)

### Quick Start with Docker Compose (Recommended)

```bash
# Clone the repository
git clone https://github.com/yourusername/mockify.git
cd mockify

# Build and run with docker-compose
docker-compose up -d

# View logs
docker-compose logs -f

# Stop the container
docker-compose down
```

The application will be available at `http://localhost:3000`

### Using Docker (Manual)

```bash
# Build the image
docker build -t mockify .

# Run the container
docker run -d \
  --name mockify \
  -p 3000:3000 \
  --restart unless-stopped \
  mockify

# View logs
docker logs -f mockify

# Stop the container
docker stop mockify
docker rm mockify
```

### Production Deployment

For production environments, you can customize the deployment:

```bash
# Build with custom tag
docker build -t mockify:v1.0.0 .

# Run with environment variables
docker run -d \
  --name mockify-prod \
  -p 80:3000 \
  -e NODE_ENV=production \
  -e PORT=3000 \
  --restart always \
  mockify:v1.0.0
```

### Using Docker Hub

```bash
# Pull from Docker Hub (if published)
docker pull yourusername/mockify:latest

# Run the container
docker run -d -p 3000:3000 yourusername/mockify:latest
```

### Environment Variables

| Variable | Description | Default |
|----------|-------------|---------|
| `NODE_ENV` | Environment mode (`production` or `development`) | `production` |
| `PORT` | Server port inside container | `3000` |
| `HOSTNAME` | Server hostname | `0.0.0.0` |

### Docker Compose Configuration

The included `docker-compose.yml` provides:
- Automatic container restart
- Health checks
- Port mapping (3000:3000)
- Production-optimized settings

### Development with Docker

For development with hot-reloading, use the development compose configuration:

1. Create a `docker-compose.dev.yml` file:

```yaml
version: '3.8'

services:
  mockify-dev:
    image: node:20-alpine
    working_dir: /app
    volumes:
      - .:/app
      - /app/node_modules
      - /app/.next
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    command: sh -c "npm install && npm run dev"
```

2. Run with:
```bash
docker-compose -f docker-compose.dev.yml up
```

### Multi-Stage Build Benefits

Our Dockerfile uses a multi-stage build process that:
- Reduces final image size (using Alpine Linux)
- Improves security (non-root user)
- Optimizes caching for faster rebuilds
- Uses Next.js standalone output for minimal runtime

### Troubleshooting

**Container won't start:**
```bash
# Check logs
docker-compose logs mockify
# or
docker logs mockify
```

**Port already in use:**
```bash
# Change the host port in docker-compose.yml
ports:
  - "8080:3000"  # Maps port 8080 on host to 3000 in container
```

**Build cache issues:**
```bash
# Force rebuild without cache
docker-compose build --no-cache
# or
docker build --no-cache -t mockify .
```

### Performance Tips

1. **Use Docker BuildKit** for faster builds:
   ```bash
   DOCKER_BUILDKIT=1 docker build -t mockify .
   ```

2. **Prune unused resources** regularly:
   ```bash
   docker system prune -a
   ```

3. **Use specific versions** in production:
   ```bash
   docker build -t mockify:1.0.0 .
   docker tag mockify:1.0.0 mockify:latest
   ```

## Tech Stack

- **Framework**: Next.js 15.4.1 with App Router
- **UI**: React 19.1.0, Tailwind CSS v4, shadcn/ui
- **State**: Zustand with persistence
- **Export**: html-to-image
- **Language**: TypeScript

## Project Structure

```
src/
├── app/             # Next.js pages and layouts
├── components/      # Reusable components
├── lib/            # Utilities, types, themes
├── store/          # Zustand state management
└── styles/         # Global styles
```

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

MIT License - see LICENSE file for details

mockify

mockify Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

mockify

mockify Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README