Frontend Engineering — Vol. 2

Overview

A tight, 9-prompt toolkit — the Frontend Engineering — Vol. 2 is built for programming & dev. Highlights include “Currency Exchange Calculator”, “Recipe Finder” and “Budget Tracker”. They reward specifics — the more real detail you add, the sharper the result. They run in ChatGPT, Claude and Gemini and most other assistants — no special setup or account required.

• 1.Currency Exchange Calculator

  Copy

  Develop a comprehensive currency converter using HTML5, CSS3, JavaScript and a reliable Exchange Rate API. Create a clean, intuitive interface with prominent input fields and currency selectors. Implement real-time exchange rates with timestamp indicators showing data freshness. Support 170+ global currencies including crypto with appropriate symbols and formatting. Maintain a conversion history log with timestamps and rate information. Allow users to bookmark favorite currency pairs for quick access. Generate interactive historical rate charts with customizable date ranges. Implement offline functionality using cached exchange rates with clear staleness indicators. Add a built-in calculator for complex conversions and arithmetic operations. Create rate alerts for target exchange rates with optional notifications. Include side-by-side comparison of different provider rates when available. Support printing and exporting conversion results in multiple formats (PDF, CSV, JSON).

• 2.Recipe Finder

  Copy

  Create a recipe finder application using HTML5, CSS3, JavaScript and a food API. Build a visually appealing interface with food photography and intuitive navigation. Implement advanced search with filtering by ingredients, cuisine, diet restrictions, and preparation time. Add user ratings and reviews with star system. Include detailed nutritional information with visual indicators for calories, macros, and allergens. Support recipe saving and categorization into collections. Implement a meal planning calendar with drag-and-drop functionality. Add automatic serving size adjustment with quantity recalculation. Include cooking mode with step-by-step instructions and timers. Support offline access to saved recipes. Add social sharing functionality for favorite recipes.

• 3.Budget Tracker

  Copy

  Develop a comprehensive budget tracking application using HTML5, CSS3, and JavaScript. Create an intuitive dashboard showing income, expenses, savings, and budget status. Implement transaction management with categories, tags, and recurring transactions. Add interactive charts and graphs for expense analysis by category and time period. Include budget goal setting with progress tracking and alerts. Support multiple accounts and transfer between accounts. Implement receipt scanning and storage using the device camera. Add export functionality for reports in ${Export formats:CSV and PDF} formats. Create a responsive design with mobile-first approach. Include data backup and restore functionality. Add forecasting features to predict future financial status based on current trends.

• 4.Weather Dashboard

  Copy

  Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.

• 5.File Encryption Tool

  Copy

  Create a client-side file encryption tool using HTML5, CSS3, and JavaScript with the Web Crypto API. Build a drag-and-drop interface for file selection with progress indicators. Implement AES-256-GCM encryption with secure key derivation from passwords (PBKDF2). Add support for encrypting multiple files simultaneously with batch processing. Include password strength enforcement with entropy calculation. Generate downloadable encrypted files with custom file extension. Create a decryption interface with password verification. Implement secure memory handling with automatic clearing of sensitive data. Add detailed logs of encryption operations without storing sensitive information. Include export/import of encryption keys with proper security warnings. Support for large files using streaming encryption and chunked processing.

• 6.Kanban Board

  Copy

  Build a Kanban project management board using HTML5, CSS3, and JavaScript. Create a flexible board layout with customizable columns (To Do, In Progress, Done, etc.). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.

• 7.Image Editor

  Copy

  Develop a web-based image editor using HTML5 Canvas, CSS3, and JavaScript. Create a professional interface with tool panels and preview area. Implement basic adjustments including brightness, contrast, saturation, and sharpness. Add filters with customizable parameters and previews. Include cropping and resizing with aspect ratio controls. Implement text overlay with font selection and styling. Add shape drawing tools with fill and stroke options. Include layer management with blending modes. Support image export in multiple formats and qualities. Create a responsive design that adapts to screen size. Add undo/redo functionality with history states.

• 8.Chess Game

  Copy

  Develop a feature-rich chess game using HTML5, CSS3, and JavaScript. Create a realistic chessboard with proper piece rendering. Implement standard chess rules with move validation. Add move highlighting and piece movement animation. Include game clock with multiple time control options. Implement notation recording with PGN export. Add game analysis with move evaluation. Include AI opponent with adjustable difficulty levels. Support online play with WebRTC or WebSocket. Add opening book and common patterns recognition. Implement tournament mode with brackets and scoring.

• 9.Typing Speed Test

  Copy

  Build an interactive typing speed test using HTML5, CSS3, and JavaScript. Create a clean interface with text display and input area. Implement WPM and accuracy calculation in real-time. Add difficulty levels with appropriate text selection. Include error highlighting and correction tracking. Implement test history with performance graphs. Add custom test creation with text import. Include virtual keyboard display showing keypresses. Support multiple languages and keyboard layouts. Create a responsive design for all devices. Add competition mode with leaderboards.

1. Step 1

   Pick a prompt

   Browse the 9 prompts and pick the closest match — “Currency Exchange Calculator” is a good place to start.

2. Step 2

   Copy it

   Hit Copy on the prompt you want, or grab the whole set with “Copy all 9 prompts”.

3. Step 3

   Fill in the blanks

   Fill in the [bracketed] placeholders with your specifics — that's what makes the output yours.

4. Step 4

   Run and refine

   Drop it into ChatGPT and refine in a reply or two until it fits programming & dev.

Related packs

• 

  Programming & DevFree

  Code Review & Refactor Kit for Telecom

  Copy, tweak, and ship in minutes

  6 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  API & Backend Prompts for Senior Care

  Hand-picked prompts you can copy and run today

  6 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  API & Backend Prompts for Logistics

  Everything you need in one collection

  6 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 14

  Copy, tweak, and ship in minutes

  8 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 13

  Battle-tested prompts, organized and ready

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  API & Backend Prompts for Dropshipping

  A focused toolkit for faster, better output

  6 promptsChatGPT · Claude · Gemini