Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper

Based on hospital and plastic surgery website development projects that repeatedly appear in the actual outsourcing market, this course is designed to help you build a practical website and admin system that can actually win contracts, rather than just simple examples. This course doesn't just end with making a website. Using AI coding tools and Next.js, you will complete a hospital website mockup project and use it as a portfolio on actual outsourcing platforms to learn the entire process—from selecting projects, proposing, and bidding to writing quotes. The following will be implemented based on Next.js: - Hospital and plastic surgery website development - Building main pages and service detail pages - Building an Admin CMS - Blog content management - Consultation inquiry system - Attachment upload and inquiry response structure - Login and permission handling - Admin pages and RBAC structure - Multi-language support - SEO optimization - Sitemap, RSS, OG image, and favicon configuration - GA4 & GTM setup - Deployment, domain, and subdomain integration - Maintainable project structure Furthermore, it doesn't just explain development: - How the hospital outsourcing market works - Which hospital website projects you should choose - What customers actually consider important - Why hospital websites are constantly being renewed - How to create mockup projects that help win contracts - How to apply and bid on outsourcing platforms - What criteria to use when writing quotes - How to register and showcase your portfolio - What problems frequently occur during outsourcing - How to design for maintenance and additional development We share these types of realistic, practical experiences. The goal of this course is not to complete a simple CRUD example. It is to experience the entire flow of a practical project—creating a hospital website portfolio that can actually be used for outsourcing proposals, presenting a structure and quote that is convincing to customers, and considering delivery and maintenance. This is a practical full-course lecture for those who want to increase development speed using AI coding while simultaneously raising the quality of the output and the possibility of winning outsourcing contracts.

With v0, cursor AI, and various LLMs, from PRD to AI product recommendations! Complete your Next.js shopping mall through a practical project.

Complete a company introduction landing page with hands-on vibe coding. Using Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP stack, proceed from design to deployment all at once. The key is "fast implementation + SEO foundation that performs well in search engines." 🏁 Course Objectives Landing creation → Performance optimization → SEO implementation → Deployment/Indexing Real-time coding (vibe coding) to immediately check completed sections Direct experience including search indexing 🛠️ Practice Stack Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP workflow 🔍 SEO Practice Apply SEO optimization MD files provided by instructor Metadata, OG/Twitter cards, robots/sitemap, structured data (JSON-LD) Optional multilingual routing implementation 🎯 Final Product Responsive company introduction landing + contact form Target Lighthouse 95+ Vercel deployment followed by Search Console registration and indexing request 📚 What You'll Learn from This Course How to quickly compose hero/trust/features/FAQ sections Clean UI composition with shadcn/ui Form validation and basic conversion tracking point design Boosting SEO scores with structured data + multilingual routing Understanding the indexing process through Search Console after deployment 💡 Industry Insights (Course Bonus) Beyond just code implementation, we'll briefly cover marketing and exposure methods actually used in the real market. Realistic pricing ranges for advertising, blog posting, and comment work How outsourcing and contracting companies actually proceed with SEO and exposure work Cost/efficiency differences between direct developer participation and outsourcing Through this section, you can develop a sense of how technology is actually utilized in real industry work and what cost structures drive it, beyond just the technical aspects. One-Line Summary Following the flow of "implementation → optimization → deployment → indexing," learn the web creation process that connects to actual search exposure and real industry market structures.

Learn a practical web production workflow that can be applied immediately in the field—from homepages, landing pages, and interactive websites to AI Agent-based CMS—using AI image/video generation tools and Vibe Coding. This course is not just about creating a single screen with AI. It covers the process of generating images and videos using the latest AI tools such as OpenAI Images 2.0, Kling, and Higgsfield, and utilizing them as hero images, background videos, transition videos, and interaction assets for actual websites. Based on Next.js, you will step-by-step implement cinematic landing pages, game-like interactive homepages, inquiry pages, and blog content pages, mastering structures and workflows that professionals can refer to immediately when creating homepages or landing pages. In particular, this course does not stick solely to traditional admin-page-style CMS. You will implement an AI Agent-based CMS structure where AI Agents like Codex and Claude Code organize content and image assets based on predefined skills and upload rules, then upload them to Neon DB and Vercel Blob Store. In other words, instead of an administrator manually entering data into forms one by one, you will experience an operational method where you provide blog topics, reference materials, and image assets, and the AI Agent organizes the content structure and uploads it in a consistent format. Later, this structure can be further enhanced into traditional admin pages, approval workflows, or automation pipelines as needed. Furthermore, it doesn't end with production; we will prepare elements necessary for actual operation, including Vercel deployment, GoDaddy domain connection, SEO meta tags, favicons, OG images, sitemaps, and robots.txt settings. The course also covers the process of registering sites and verifying ownership on Google Search Console, Bing Webmaster Tools, and Naver Search Advisor, as well as setting up Google Analytics and Google Tag Manager to track visitor data. By the end of the course, you will be able to independently reproduce a professional web production workflow that spans AI-driven planning, image/video asset creation, Next.js implementation, SEO optimization, deployment, search engine registration, analytics tool setup, and AI Agent-based content operation.

A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

This course is not just simple clone coding or a basic tutorial. By implementing an LMS (Learning Management System) platform like Inflearn from start to finish at an MVP level, it provides an all-in-one solution that freelancers, solo developers, and early-stage startup members can immediately apply in real-world projects. We cover the entire tech stack used in actual production environments at once: Next.js, Flutter, Supabase, Firebase (FCM), AWS, Vercel, Xcode, Android Studio, ElevenLabs, and Toss Payments. You'll experience the complete process of simultaneously developing web and mobile apps, including social login, automatic multilingual dubbing, HLS streaming-based lecture playback, payment integration, and deployment to the App Store and Play Store. This course focuses on the important workflows, configurations, and deployment processes that matter in real-world development, rather than detailed line-by-line coding. Therefore, it's suitable for developers looking to become independent freelancers, teams that need to quickly validate MVPs at startups, and junior developers who want to experience the full scope of real-world development.

Learn how to build a real-time fire detection system using Next.js, YOLOv11, and FastAPI.

This course is not about "Let's build something amazing with the latest technology," but rather the most practical web development beginner course that makes you feel "You can build it yourself with just a little knowledge." We'll create the basic structure with HTML and JavaScript, exchange data using Node.js and SQLite, and complete a simple web page with Next.js. We minimize complex configurations and difficult theories, and focus on getting a hands-on feel for web development flow by writing code that actually works. This course centers on 'hands-on experience' rather than just 'learning.' If you've touched code even a little bit, anyone can follow along and feel the satisfaction of completion.

A full course on Next.js you can sink your teeth into! Complete a real-world project using the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

This is an introductory course to the front end using Next.js and Tailwind CSS. It is designed to complete static deployment without a backend, so even beginners can experience the satisfaction of completion.