Skip to content

v1.2.0

Latest
Latest

Choose a tag to compare

View all tags
@Zemerik Zemerik released this 22 Jun 08:26
v1.2.0
e6bf640

v1.2.0

🎉 What's New?

Your ZemPosts CLI now features a beautiful, modern interface for creating blog posts! The new interface includes:

✨ Modern Features

  • Smooth Animations - Beautiful transitions and micro-interactions
  • Live Preview - See your post as you write it
  • Responsive Design - Works perfectly on all devices
  • Modern UI - Clean, professional interface with gradients and shadows
  • Real-time Feedback - Success/error messages with animations
  • Auto-save Date - Automatically sets today's date
  • Loading States - Visual feedback during form submission

🎨 Design Improvements

  • Modern Color Scheme - Purple gradient theme
  • Typography - Inter font for better readability
  • Icons - Font Awesome icons throughout
  • Glass Morphism - Backdrop blur effects
  • Hover Effects - Interactive buttons and links
  • Mobile-First - Responsive design for all screen sizes

🚀 How to Use

Option 1: CLI Interface (Recommended)

npx zemposts

Option 2: Direct Server

npm start
# Opens the Express server with the modern interface

🛠️ Technology Stack

Frontend

  • Vanilla JavaScript - No framework dependencies
  • Modern CSS - Grid, Flexbox, and CSS animations
  • Inter Font - Google Fonts for better typography
  • Font Awesome - Beautiful icons throughout

Backend

  • Express.js - Node.js web server
  • Body Parser - JSON request handling
  • File System - Local file creation

📁 File Structure

├── public/
│   ├── index.html          # Modern interface
│   └── assets/             # Static assets
└── index.js                # Express server

🎯 Key Features

Form Features

  • Auto-completion - Date field auto-fills with today's date
  • Validation - Real-time form validation
  • Preview Mode - Toggle to see your post as it will appear
  • Success/Error Handling - Beautiful feedback messages

UI/UX Features

  • Smooth Animations - CSS transitions and keyframes
  • Loading States - Spinner during form submission
  • Responsive Grid - Adapts to different screen sizes
  • Accessibility - Proper labels and ARIA attributes

Technical Features

  • Vanilla JavaScript - No build step required
  • Express Integration - Seamless backend integration
  • Fast Loading - No framework overhead
  • Easy Maintenance - Simple, readable code

🎨 Customization

The interface uses modern CSS and can be easily customized:

Colors

  • Primary: #667eea to #764ba2 (gradient)
  • Success: #10b981 to #059669 (gradient)
  • Error: #ef4444 to #dc2626 (gradient)

Fonts

  • Primary: Inter (Google Fonts)
  • Icons: Font Awesome 6

Animations

  • Transitions: CSS transition properties
  • Keyframes: slideIn, fadeIn, slideUp

🔧 Troubleshooting

Common Issues

  1. Port Already in Use

    # Kill process on port 5012
npx kill-port 5012

  2. Interface Not Loading

    # Restart the server
npm start

  3. Form Not Submitting

    # Check if the repository is cloned
# Make sure you have a "ZemPosts - <username>" folder

🚀 Performance

The new interface offers:

  • Faster Loading - No framework overhead
  • Better UX - Instant interactions
  • Smooth Animations - 60fps transitions
  • Mobile Optimized - Touch-friendly interface

📱 Mobile Experience

The interface is fully responsive and provides an excellent mobile experience:

  • Touch-friendly buttons
  • Optimized form inputs
  • Proper viewport handling
  • Fast loading on mobile networks

🎨 Design Highlights

Modern UI Elements

  • Glass morphism - Backdrop blur effects
  • Gradient backgrounds - Beautiful color transitions
  • Smooth animations - Micro-interactions
  • Interactive elements - Hover effects
  • Professional typography - Clean, readable text

User Experience

  • Intuitive layout - Easy to understand and use
  • Visual feedback - Clear success/error states
  • Progressive disclosure - Preview functionality
  • Accessibility - Screen reader friendly

Made with ❤️ by Hemang Yadav (Zemerik)

For more information, visit:

Assets 2
Loading