Skip to content

Instantly share code, notes, and snippets.

@shricodev

shricodev/prompt.md Secret

Created November 21, 2025 09:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shricodev/b394169b45a1f8da947da6dcec18dc70 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shricodev/b394169b45a1f8da947da6dcec18dc70 to your computer and use it in GitHub Desktop.
Download ZIP
Prompt - Gemini 3 Pro vs. GPT-5.1 Coding Test - Blog Demo
Raw
prompt.md

Act as a senior frontend engineer.

Currently, I have an already initialized Next.js project. Your task is to build a fully client side, Windows 11 style desktop simulation that starts from a login screen and then loads a desktop with a taskbar, icons, and a few simple working apps like a calculator.

Build everything from scratch inside this Next.js app.

Tech and project setup

  • Use Next.js with the App Router and React.
  • Use TypeScript for all React components.
  • Use either CSS Modules or Tailwind CSS for styling. Choose one and be consistent.
  • All state should be managed on the client side only. No real backend, no database. Use React state, Context, or a lightweight state library if needed.
  • Structure the project cleanly into components and feature folders so it is easy to navigate.

Overall goal

Create a browser based UI that feels like a simplified clone of a Windows 11 desktop environment:

  1. Show a login screen first.

  2. After login, show a full screen desktop with:

    • Wallpaper background.
    • Taskbar at the bottom.
    • Start button and menu.
    • Pinned apps on the taskbar.
    • System tray icons and a clock.
    • Desktop icons for apps like Calculator.

  3. Desktop icons and taskbar items should open simple app windows when clicked.

  4. App windows should be movable, focusable, and closable within this simulated desktop.

Do not use any copyrighted Windows assets or logos. The design should be strongly inspired by Windows 11 but use custom icons and shapes that are similar but not identical.

1. Login screen

Create a dedicated login UI that appears on first load:

  • Full viewport background with a Windows 11 style wallpaper look.

  • Centered login card with:

    • User avatar placeholder.
    • Username field.
    • Password field.
    • “Sign in” button.

  • No real authentication. Accept any non empty username and password.

  • When the user logs in:

    • Store the "logged in" state in React state (and optionally localStorage).
    • Show the username on the desktop somewhere (for example in the Start menu or user profile area).

  • Add a simple loading transition after clicking “Sign in” such as a short fake loading spinner before showing the desktop.

Routing:

  • Root route / should display the login screen if the user is not logged in.
  • After successful login, navigate to the desktop view (can be /desktop or just conditionally render within /).

2. Desktop UI

After login, render a desktop that:

  • Fills the entire viewport.
  • Has a wallpaper style background image or gradient in a Windows 11 like style.
  • Shows a few desktop icons aligned to a grid on the left.

Desktop icons

Implement at least these icons on the desktop:

  • “Recycle Bin” (even if not functional).
  • “Calculator” (must be functional app as described later).
  • “Text Editor” or “Notepad” (can be simple).
  • Optionally one or two more fake apps like “File Explorer” or “Settings” (can be mostly placeholder UIs).

Each desktop icon should:

  • Have an icon graphic (can be a simple SVG or emoji).
  • Have a label text under the icon.
  • Support click or double click behavior to open the corresponding app window on the desktop.

3. Taskbar

Create a taskbar fixed at the bottom of the screen that closely resembles the layout of Windows 11:

  • Centered pinned app icons.

  • Start button on the left side of the pinned apps area.

  • System tray area on the right with:

    • Network icon.
    • Volume icon.
    • Battery icon (just visual, no real data needed).
    • Clock showing current local time, updating every minute.

Start button and Start menu

  • Start button:

    • Use a simple custom icon that suggests the Windows four pane logo but does not copy it exactly.
    • Clicking the Start button toggles a Start menu popup.

  • Start menu:

    • Appears above the taskbar, centered.

    • Contains:

      • A section of pinned apps (same or similar to the taskbar apps).
      • A search field at the top (no need to implement full search logic, but allow typing).
      • User account info somewhere (show logged in username).

    • Clicking an app in the Start menu should open its window the same way as clicking a desktop icon.

Pinned apps in taskbar

Include pinned icons for at least:

  • File Explorer (can open a simple placeholder window).
  • Edge or “Browser” (simple placeholder window).
  • Calculator.
  • Text Editor or Notepad.
  • Settings (placeholder window).

Behavior:

  • Clicking a pinned app icon:

    • Opens the app window if it is not open.
    • Brings the app window to front if it is already open.

  • Indicate active apps with a subtle visual cue (for example a small dot or different background).

4. Window system

Build a window system that handles multiple app windows:

  • Each app window should be a draggable panel inside the desktop area.

  • Windows should have:

    • Title bar with app name and icon.

    • Buttons for:

      • Close.
      • Minimize.
      • (Optional) Maximize or restore.

  • Only need basic behavior:

    • Close button removes or hides the window.
    • Minimize hides the window but keeps the app marked as running on the taskbar.
    • Maximize can either be fully functional or simply expand to full desktop area.

  • Window focus:

    • When a window is focused (clicked) it should appear on top of other windows.
    • Visually indicate focused window with a slightly different border, shadow, or title bar style.

  • Windows should not be draggable outside the visible desktop area if possible.

Implement a simple window manager at the React level:

  • Maintain a list of open windows with:

    • App id.
    • Position.
    • Z order.
    • Minimized or maximized state.

  • Clicking on an app icon should either create a new window instance or bring the existing one to front.

5. Apps and behavior

Implement at least these apps with basic but functional behavior.

Text Editor / Notepad app

  • A window with:

    • Simple toolbar area or title.
    • Large text area for typing.

  • Behavior:

    • User can type text and it stays while the app window is open.
    • If you want, you can persist text in component state so it is not lost when the window is minimized.
    • No need for file system integration.

File Explorer (placeholder)

  • A basic window that looks like a file explorer but does not need real file system:

    • Sidebar with items like “Desktop”, “Documents”, “Downloads”.
    • Main area showing some fake folders and files as cards or rows.
    • Clicking items is optional, can be visual only.

Settings (placeholder)

  • A window that displays a simple settings UI, for example:

    • Theme switcher (light or dark for the desktop).
    • Wallpaper selector from a small set of predefined backgrounds.

  • Implement basic theme switching or wallpaper change so that something actually changes on the desktop when toggled.

6. System tray and clock

  • Implement a small system tray on the right side of the taskbar with:

    • Icons for network, volume, battery. These can be static icons with hover tooltips.

  • Clock:

    • Show current time in HH:MM format and optionally date.
    • Update at least once per minute using a timer.
    • Format it nicely, similar to system clock.

8. Styling and UX details

  • Match the general feel of Windows 11:

    • Blur or semi transparent backgrounds for the taskbar and Start menu if possible.
    • Smooth hover states and transitions.

  • Make the layout responsive to different screen sizes but desktop is the main target.

  • The UI should load fast and feel snappy.

  • Use clean and readable code with comments where non trivial logic is used.

9. Output format

  • Provide:

    • A description of any new folders or files that should be created.
    • The full code for all new or modified files, including:
      • Relevant React components.
      • Styling files (CSS or Tailwind config and classes).
      • Any utility or context files used for state management.

  • Explain briefly how to run the project after the changes and what route to open to see the login screen and desktop.

Your final answer should be a complete implementation to get a working Windows style desktop simulation starting from a login screen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment