{"id":2057,"date":"2024-11-03T01:44:31","date_gmt":"2024-11-03T01:44:31","guid":{"rendered":"https:\/\/ayospc.com\/?p=2057"},"modified":"2024-11-03T01:46:01","modified_gmt":"2024-11-03T01:46:01","slug":"my-first-web-app","status":"publish","type":"post","link":"https:\/\/ayospc.com\/es\/my-first-web-app\/","title":{"rendered":"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer"},"content":{"rendered":"
\"\"<\/figure>\n\n\n\n

Using v0 by Vercel<\/h2>\n\n\n\n

My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago. <\/p>\n\n\n\n

By just typing a simple prompt you can create your ideas into reality.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Imagine just by saying to a computer what you want your app to be it can generate it in just a couple of seconds. You can also make edits on the fly to refine and perfect your designs. Its just awesome.
here is a link to what I have just created using this amazing tool.<\/p>\n\n\n\n


https:\/\/b_C60UnkL5Fdv.v0.build\/<\/a><\/p>\n\n\n\n

Here is the code for this web app:<\/p>\n\n\n\n

'use client'\r\n\r\nimport { useState, useRef } from 'react'\r\nimport { Button } from "@\/components\/ui\/button"\r\nimport { Label } from "@\/components\/ui\/label"\r\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from "@\/components\/ui\/tabs"\r\nimport { Maximize2, Minimize2, Upload, ZoomIn, ZoomOut } from 'lucide-react'\r\n\r\nexport default function Component() {\r\n  const [banner, setBanner] = useState('\/placeholder.svg?height=200&width=1280')\r\n  const [avatar, setAvatar] = useState('\/placeholder.svg?height=80&width=80')\r\n  const [watermark, setWatermark] = useState('\/placeholder.svg?height=40&width=40')\r\n  const [channelName, setChannelName] = useState('Channel Name')\r\n  const [isFullScreen, setIsFullScreen] = useState(false)\r\n  const [activeDevice, setActiveDevice] = useState('mobile')\r\n  const [zoomLevel, setZoomLevel] = useState(1)\r\n\r\n  const bannerInputRef = useRef(null)\r\n  const avatarInputRef = useRef(null)\r\n  const watermarkInputRef = useRef(null)\r\n\r\n  const handleImageUpload = (event, setter) => {\r\n    const file = event.target.files[0]\r\n    if (file) {\r\n      const reader = new FileReader()\r\n      reader.onload = (e) => setter(e.target.result)\r\n      reader.readAsDataURL(file)\r\n    }\r\n  }\r\n\r\n  const toggleFullScreen = () => {\r\n    setIsFullScreen(!isFullScreen)\r\n  }\r\n\r\n  const handleZoomIn = () => {\r\n    setZoomLevel(prevZoom => Math.min(prevZoom + 0.1, 2))\r\n  }\r\n\r\n  const handleZoomOut = () => {\r\n    setZoomLevel(prevZoom => Math.max(prevZoom - 0.1, 0.5))\r\n  }\r\n\r\n  const DevicePreview = ({ device }) => {\r\n    const sizes = {\r\n      mobile: 'w-64',\r\n      tablet: 'w-[768px]',\r\n      desktop: 'w-[1024px]',\r\n      hdtv: 'w-[1920px]'\r\n    }\r\n\r\n    return (\r\n      <div classname="{`mx-auto" ${sizes[device]} overflow-hidden bg-[#0f0f0f] shadow-lg relative border-4 border-gray-700`}>\r\n        <div classname="relative">\r\n          <img src="{banner}" alt="Channel Banner" classname="w-full h-32 object-cover" \/>\r\n          <img src="{avatar}" alt="Channel Avatar" classname="absolute bottom-0 left-4 transform translate-y-1\/2 w-16 h-16 rounded-full border-4 border-[#0f0f0f]" \/>\r\n          <img src="{watermark}" alt="Watermark" classname="absolute top-2 right-2 w-8 h-8" \/>\r\n        <\/div>\r\n        <div classname="p-4">\r\n          <h2 classname="text-xl font-bold text-white">{channelName}<\/h2>\r\n          <p classname="text-sm text-gray-400">1M subscribers<\/p>\r\n        <\/div>\r\n        <div classname="px-4 pb-4 grid grid-cols-2 gap-4">\r\n          <div classname="space-y-2">\r\n            <img src="\/placeholder.svg?height=120&width=210" alt="Video Thumbnail" classname="w-full aspect-video object-cover rounded" \/>\r\n            <h3 classname="text-sm font-semibold text-white">Video Title 1<\/h3>\r\n            <p classname="text-xs text-gray-400">10K views • 2 days ago<\/p>\r\n          <\/div>\r\n          <div classname="space-y-2">\r\n            <img src="\/placeholder.svg?height=120&width=210" alt="Video Thumbnail" classname="w-full aspect-video object-cover rounded" \/>\r\n            <h3 classname="text-sm font-semibold text-white">Video Title 2<\/h3>\r\n            <p classname="text-xs text-gray-400">8K views • 3 days ago<\/p>\r\n          <\/div>\r\n          <div classname="space-y-2">\r\n            <img src="\/placeholder.svg?height=120&width=210" alt="Video Thumbnail" classname="w-full aspect-video object-cover rounded" \/>\r\n            <h3 classname="text-sm font-semibold text-white">Video Title 3<\/h3>\r\n            <p classname="text-xs text-gray-400">15K views • 1 week ago<\/p>\r\n          <\/div>\r\n          <div classname="space-y-2">\r\n            <img src="\/placeholder.svg?height=120&width=210" alt="Video Thumbnail" classname="w-full aspect-video object-cover rounded" \/>\r\n            <h3 classname="text-sm font-semibold text-white">Video Title 4<\/h3>\r\n            <p classname="text-xs text-gray-400">5K views • 2 weeks ago<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div classname="{`min-h-screen" ${isfullscreen ? 'fixed inset-0 z-50' : ''} bg-gray-800 text-gray-100`}>\r\n      <div classname="container mx-auto p-4">\r\n        <h1 classname="text-2xl font-bold mb-4">YouTube Channel Mockup<\/h1>\r\n        <div classname="{`grid" ${isfullscreen ? '' : 'grid-cols-1 lg:grid-cols-3'} gap-4`}>\r\n          {!isFullScreen && (\r\n            <div classname="lg:col-span-1">\r\n              <h2 classname="text-xl font-semibold mb-4">Upload Channel Assets<\/h2>\r\n              <div classname="space-y-4">\r\n                <div>\r\n                  <label htmlfor="banner" classname="block mb-2">Banner Image<\/label>\r\n                  <button \r\n                    onclick="{()" > bannerInputRef.current.click()} \r\n                    variant="outline" \r\n                    className="w-full lg:w-3\/4 bg-gray-700 text-gray-300 hover:bg-gray-600"\r\n                  >\r\n                    <upload classname="mr-2 h-4 w-4" \/> Choose Banner\r\n                  <\/button>\r\n                  <input\r\n                    id="banner"\r\n                    ref="{bannerInputRef}"                    type="file"\r\n                    accept="image\/*"\r\n                    onchange="{(e)" > handleImageUpload(e, setBanner)}\r\n                    className="hidden"\r\n                  \/>\r\n                <\/div>\r\n                <div>\r\n                  <label htmlfor="avatar" classname="block mb-2">Channel Avatar<\/label>\r\n                  <button \r\n                    onclick="{()" > avatarInputRef.current.click()} \r\n                    variant="outline" \r\n                    className="w-full lg:w-3\/4 bg-gray-700 text-gray-300 hover:bg-gray-600"\r\n                  >\r\n                    <upload classname="mr-2 h-4 w-4" \/> Choose Avatar\r\n                  <\/button>\r\n                  <input\r\n                    id="avatar"\r\n                    ref="{avatarInputRef}"                    type="file"\r\n                    accept="image\/*"\r\n                    onchange="{(e)" > handleImageUpload(e, setAvatar)}\r\n                    className="hidden"\r\n                  \/>\r\n                <\/div>\r\n                <div>\r\n                  <label htmlfor="watermark" classname="block mb-2">Watermark<\/label>\r\n                  <button \r\n                    onclick="{()" > watermarkInputRef.current.click()} \r\n                    variant="outline" \r\n                    className="w-full lg:w-3\/4 bg-gray-700 text-gray-300 hover:bg-gray-600"\r\n                  >\r\n                    <upload classname="mr-2 h-4 w-4" \/> Choose Watermark\r\n                  <\/button>\r\n                  <input\r\n                    id="watermark"\r\n                    ref="{watermarkInputRef}"                    type="file"\r\n                    accept="image\/*"\r\n                    onchange="{(e)" > handleImageUpload(e, setWatermark)}\r\n                    className="hidden"\r\n                  \/>\r\n                <\/div>\r\n                <div>\r\n                  <label htmlfor="channelName" classname="block mb-2">Channel Name<\/label>\r\n                  <input\r\n                    id="channelName"\r\n                    value="{channelName}"                    onchange="{(e)" > setChannelName(e.target.value)}\r\n                    placeholder="Enter channel name"\r\n                    className="w-full lg:w-3\/4 px-3 py-2 bg-gray-700 text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"\r\n                  \/>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          )}\r\n          <div classname="{`${isFullScreen" ? '' : 'lg:col-span-2'} bg-gray-200 p-4 rounded-lg relative`}>\r\n            <div classname="flex justify-between items-center mb-4">\r\n              <h2 classname="text-xl font-semibold text-gray-800">Device Preview<\/h2>\r\n              <div classname="flex space-x-2">\r\n                <button onclick="{handleZoomOut}" variant="outline" size="icon" classname="bg-gray-300 text-gray-800 hover:bg-gray-400">\r\n                  <zoomout classname="h-4 w-4" \/>\r\n                <\/button>\r\n                <button onclick="{handleZoomIn}" variant="outline" size="icon" classname="bg-gray-300 text-gray-800 hover:bg-gray-400">\r\n                  <zoomin classname="h-4 w-4" \/>\r\n                <\/button>\r\n                <button onclick="{toggleFullScreen}" variant="outline" size="icon" classname="bg-gray-300 text-gray-800 hover:bg-gray-400">\r\n                  {isFullScreen ? <minimize2 classname="h-4 w-4" \/> : <maximize2 classname="h-4 w-4" \/>}\r\n                <\/button>\r\n              <\/div>\r\n            <\/div>\r\n            <div classname="h-px bg-gray-300 mb-4"><\/div>\r\n            <tabs value="{activeDevice}" onvaluechange="{setActiveDevice}" classname="w-full">\r\n              <tabslist classname="grid w-full grid-cols-4 bg-gray-300">\r\n                <tabstrigger value="mobile" classname="data-[state=active]:bg-gray-100 text-gray-800">Mobile<\/tabstrigger>\r\n                <tabstrigger value="tablet" classname="data-[state=active]:bg-gray-100 text-gray-800">Tablet<\/tabstrigger>\r\n                <tabstrigger value="desktop" classname="data-[state=active]:bg-gray-100 text-gray-800">Desktop<\/tabstrigger>\r\n                <tabstrigger value="hdtv" classname="data-[state=active]:bg-gray-100 text-gray-800">HD TV<\/tabstrigger>\r\n              <\/tabslist>\r\n              <tabscontent value="{activeDevice}" classname="overflow-x-auto mt-4">\r\n                <div style="{{" transform: `scale(${zoomlevel})`, transformorigin: 'top left', transition: 'transform 0.3s ease-in-out' }}>\r\n                  <devicepreview device="{activeDevice}" \/>\r\n                <\/div>\r\n              <\/tabscontent>\r\n            <\/tabs>\r\n            <div classname="absolute bottom-8 left-8 w-48 h-36 bg-gray-800 rounded overflow-hidden shadow-lg border-2 border-gray-600">\r\n              <div classname="relative w-full h-full">\r\n                <div classname="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 animate-gradient"><\/div>\r\n                <img src="{watermark}" alt="Watermark Preview" classname="absolute bottom-2 right-2 w-8 h-8 opacity-75" \/>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  )\r\n}<\/code><\/pre>\n\n\n\n
This is a working Progress and I hope to add in more features and enhancements.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Hopefully this can become a fully pledge web app in a couple of days, and maybe even a mobile app in the future. <\/p>\n\n\n\n
V0 uses a credit system wherein you are given a set number of message that you can send to there ai chat bot, the higher the plan you choose the more messages and the higher the priority you are in there system.
Visit there pricing are to learn more https:\/\/v0.dev\/pricing<\/a><\/p>","protected":false},"excerpt":{"rendered":"
My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer<\/p>","protected":false},"author":1,"featured_media":2062,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[166],"tags":[],"class_list":["post-2057","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-installation-and-troubleshooting"],"blocksy_meta":[],"yoast_head":"\nMy First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer - ayospc<\/title>\n<meta name=\"description\" content=\"My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ayospc.com\/es\/my-first-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer - ayospc\" \/>\n<meta property=\"og:description\" content=\"My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ayospc.com\/es\/my-first-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"ayospc\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ayospcph\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/ayospcph\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-03T01:44:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-03T01:46:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1254\" \/>\n\t<meta property=\"og:image:height\" content=\"729\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"artosien22\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"artosien22\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/\"},\"author\":{\"name\":\"artosien22\",\"@id\":\"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622\"},\"headline\":\"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer\",\"datePublished\":\"2024-11-03T01:44:31+00:00\",\"dateModified\":\"2024-11-03T01:46:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/\"},\"wordCount\":222,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622\"},\"image\":{\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png\",\"articleSection\":[\"Software installation and troubleshooting\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ayospc.com\/my-first-web-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/\",\"url\":\"https:\/\/ayospc.com\/my-first-web-app\/\",\"name\":\"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer - ayospc\",\"isPartOf\":{\"@id\":\"https:\/\/ayospc.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png\",\"datePublished\":\"2024-11-03T01:44:31+00:00\",\"dateModified\":\"2024-11-03T01:46:01+00:00\",\"description\":\"My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago.\",\"breadcrumb\":{\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ayospc.com\/my-first-web-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage\",\"url\":\"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png\",\"contentUrl\":\"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png\",\"width\":1254,\"height\":729,\"caption\":\"channel mock previewer with V0 by vercel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ayospc.com\/my-first-web-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ayospc.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ayospc.com\/#website\",\"url\":\"https:\/\/ayospc.com\/\",\"name\":\"ayospc\",\"description\":\""Your go-to resource for computer repair and troubleshooting."\",\"publisher\":{\"@id\":\"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ayospc.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622\",\"name\":\"artosien22\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/ayospc.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ayospc.com\/wp-content\/uploads\/2026\/03\/Untitled_design__1_-removebg-preview.png\",\"contentUrl\":\"https:\/\/ayospc.com\/wp-content\/uploads\/2026\/03\/Untitled_design__1_-removebg-preview.png\",\"width\":500,\"height\":500,\"caption\":\"artosien22\"},\"logo\":{\"@id\":\"https:\/\/ayospc.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/ayospc.com\",\"https:\/\/www.facebook.com\/ayospcph\"],\"url\":\"https:\/\/ayospc.com\/es\/author\/artosien22\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer - ayospc","description":"My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ayospc.com\/es\/my-first-web-app\/","og_locale":"es_ES","og_type":"article","og_title":"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer - ayospc","og_description":"My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago.","og_url":"https:\/\/ayospc.com\/es\/my-first-web-app\/","og_site_name":"ayospc","article_publisher":"https:\/\/www.facebook.com\/ayospcph","article_author":"https:\/\/www.facebook.com\/ayospcph","article_published_time":"2024-11-03T01:44:31+00:00","article_modified_time":"2024-11-03T01:46:01+00:00","og_image":[{"width":1254,"height":729,"url":"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png","type":"image\/png"}],"author":"artosien22","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"artosien22","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ayospc.com\/my-first-web-app\/#article","isPartOf":{"@id":"https:\/\/ayospc.com\/my-first-web-app\/"},"author":{"name":"artosien22","@id":"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622"},"headline":"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer","datePublished":"2024-11-03T01:44:31+00:00","dateModified":"2024-11-03T01:46:01+00:00","mainEntityOfPage":{"@id":"https:\/\/ayospc.com\/my-first-web-app\/"},"wordCount":222,"commentCount":0,"publisher":{"@id":"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622"},"image":{"@id":"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png","articleSection":["Software installation and troubleshooting"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ayospc.com\/my-first-web-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ayospc.com\/my-first-web-app\/","url":"https:\/\/ayospc.com\/my-first-web-app\/","name":"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer - ayospc","isPartOf":{"@id":"https:\/\/ayospc.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage"},"image":{"@id":"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png","datePublished":"2024-11-03T01:44:31+00:00","dateModified":"2024-11-03T01:46:01+00:00","description":"My First try at creating a Web App, its pretty cool what you can do with the power of AI. This was unheard of around a couple of years ago.","breadcrumb":{"@id":"https:\/\/ayospc.com\/my-first-web-app\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ayospc.com\/my-first-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/ayospc.com\/my-first-web-app\/#primaryimage","url":"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png","contentUrl":"https:\/\/ayospc.com\/wp-content\/uploads\/2024\/11\/channel-mock-up-app-1-1.png","width":1254,"height":729,"caption":"channel mock previewer with V0 by vercel"},{"@type":"BreadcrumbList","@id":"https:\/\/ayospc.com\/my-first-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ayospc.com\/"},{"@type":"ListItem","position":2,"name":"My First Web App Using V0 by Vercel | A YouTube Channel Mock up Previewer"}]},{"@type":"WebSite","@id":"https:\/\/ayospc.com\/#website","url":"https:\/\/ayospc.com\/","name":"ayospc","description":""Your go-to resource for computer repair and troubleshooting."","publisher":{"@id":"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ayospc.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/ayospc.com\/#\/schema\/person\/76505d78b598667f882b783d2e3f2622","name":"artosien22","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/ayospc.com\/#\/schema\/person\/image\/","url":"https:\/\/ayospc.com\/wp-content\/uploads\/2026\/03\/Untitled_design__1_-removebg-preview.png","contentUrl":"https:\/\/ayospc.com\/wp-content\/uploads\/2026\/03\/Untitled_design__1_-removebg-preview.png","width":500,"height":500,"caption":"artosien22"},"logo":{"@id":"https:\/\/ayospc.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/ayospc.com","https:\/\/www.facebook.com\/ayospcph"],"url":"https:\/\/ayospc.com\/es\/author\/artosien22\/"}]}},"_links":{"self":[{"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/posts\/2057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/comments?post=2057"}],"version-history":[{"count":2,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/posts\/2057\/revisions"}],"predecessor-version":[{"id":2064,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/posts\/2057\/revisions\/2064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/media\/2062"}],"wp:attachment":[{"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/media?parent=2057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/categories?post=2057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ayospc.com\/es\/wp-json\/wp\/v2\/tags?post=2057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}