Publish a Password-Protected Weather Dashboard icon

Publish a Password-Protected Weather Dashboard

Tutorial for asking Claude, ChatGPT, or Codex to build a live weather dashboard and publish it with Revdoku password protection.

Publishing

Tutorial

Use this when you want an AI tool to build a live dashboard, protect it with a demo password, and publish the result as a Revdoku website.

Video Placeholder

  • YouTube video placeholder: replace with the walkthrough showing the dashboard prompt, weather data fetch, password-protected publish step, and final dashboard.

Prompt Used

Paste this into Claude, ChatGPT, or Codex:

Create and publish a password-protected interactive weather dashboard with Revdoku.

Project:
California Weather Intelligence Dashboard

Bucket title:
California Weather Intelligence Dashboard

Bucket description:
This is a sample password protected dashboard, password is 12345

Goal:
Build a live browser dashboard that fetches the latest weather data, visualizes it, and gives readable AI-style analysis.

Requirements:
- Do not ask questions. Make reasonable choices.
- Build a complete static web app using HTML, CSS, and JavaScript.
- Create these files at minimum:
  - index.html
  - styles.css
  - app.js
- Use Open-Meteo or another no-key public weather API.
- Use live client-side fetching so the dashboard updates when the page is opened.
- Show weather for these California cities:
  - San Francisco
  - Los Angeles
  - San Diego
  - Sacramento
  - Fresno
- Include:
  1. Current conditions cards
  2. 7-day forecast table
  3. Temperature trend chart
  4. Precipitation / rain probability chart
  5. Wind and comfort indicators
  6. Weather analysis section that summarizes what the data means
  7. Best city today comparison card
  8. Last updated timestamp
- Use Chart.js from CDN or vanilla SVG/canvas charts.
- Make the dashboard look like a premium analytics product.
- Include loading states and API error handling.
- Make it responsive on mobile and desktop.
- Inside the website UI, add a small note near the top:
  "Demo access: this dashboard is password protected. Password: 12345"

Security / access:
- Do not create fake client-side password protection inside the page.
- Use native Revdoku password protection when publishing.
- Publish with access_mode: password.
- Set the Revdoku publication password exactly to:
  12345
- Do not generate a random password.
- Do not put the password in the URL.

Publishing:
- Use the connected Revdoku tool/API/MCP.
- Create a new Revdoku bucket with:
  - title: California Weather Intelligence Dashboard
  - description: This is a sample password protected dashboard, password is 12345
- Upload every generated file into that bucket, preserving paths.
- Publish the bucket with entrypoint index.html.
- Use site_mode: static unless the app needs SPA fallback.
- Use access_mode: password.
- Set password: 12345.
- Return the final Revdoku public URL, bucket id, access mode, and confirm that the password is 12345.
- Do not output a zip. Upload the files directly into Revdoku and publish the bucket.

Sample Website

  • Sample website link placeholder: replace with the published protected weather dashboard URL.
  • Demo password placeholder: 12345.

Steps and Screenshot Placeholders

  1. Paste the weather dashboard prompt.
    • Screenshot placeholder: prompt in Claude, ChatGPT, or Codex.
  2. Review generated dashboard files.
    • Screenshot placeholder: HTML, CSS, JavaScript, and API-fetching code.
  3. Preview the weather dashboard.
    • Screenshot placeholder: current conditions cards and charts.
  4. Publish with password protection.
    • Screenshot placeholder: Revdoku protected publishing confirmation.
  5. Open the protected URL.
    • Screenshot placeholder: Revdoku password gate.
  6. Enter the demo password and view the dashboard.
    • Screenshot placeholder: final dashboard after access.
  7. Check views after sharing.
    • Analytics screenshot placeholder: replace with the general views analytics screenshot.

Good Fit

  • Dashboard demos.
  • Protected client previews.
  • Live API examples.
  • Tutorials showing AI-created apps published through Revdoku.

Tags

Browse all tags

Show 6 more tags