inflearn logo

Practical web and app services anyone can build with vibe coding

Plan and build an offline class reservation web service using the Codex app. Implement and validate customer and admin screens, user registration and permissions, and application and approval rules, then deploy it and expand it into an Android app that uses the same accounts and data. Finally, add your own requirements directly. Test payments and iOS are separate expansion and optional phases.

4 learners are taking this course

Level Beginner

Course period Unlimited

React
React
Android
Android
TypeScript
TypeScript
capacitor
capacitor
playwright
playwright
React
React
Android
Android
TypeScript
TypeScript
capacitor
capacitor
playwright
playwright

What you will gain after the course

  • Using the Codex app, write an MD plan and implement and deploy an offline class reservation web service with connected customer and administrator screens.

  • We verify member-specific data access and reservation approval and capacity rules, then run the Android app connected to the same service on physical devices and distribute it for internal testing.

  • Add at least one of my requirements beyond the lecture to the service, and leave a record of its validation and deployment.

CODEX · VIBE CODING · WEB & APP

The first screen you made with AI,
turn it into a service people actually use.

A practical project where customers make reservations and administrators manage operations.
Build it with Codex, test it yourself, and expand from a web service to an Android app.

Take on the challenge of earning ad revenue and monthly subscription revenue with a service you built.
Aim for AdSense ad revenue with a free public service, or
offer repeatedly needed features as a SaaS and charge a monthly subscription fee.
Build, launch, and improve it yourself while developing the skills to achieve that goal.



💭 If a demo you built on your own went well but you started running into roadblocks as you added more features

You can quickly build an introduction page or a simple calculator with AI. However, when members, data, reservations, and admin features are connected, problems arise that cannot be identified from the interface alone.

  • The login works, but will the information be properly protected? Even if my reservations are displayed correctly, accessing them through another account could reveal someone else’s reservations.

  • The reservation button works, but who will get the last spot? It may work normally when you click it alone, but if two people apply at the same time or an administrator approves an application, the capacity may be exceeded.

You need to anticipate and verify situations like this to turn a demo I ran on my own into a service that other people can use.


⚠️ If you keep repeating “just get rid of the errors,”
you may run into even more obstacles after the fix.

If you accept AI’s fixes without criteria for checking the results, the visible symptoms may disappear while the underlying cause remains. For example, situations like the following may arise.

  • What if you removed access restrictions to eliminate a retrieval error? The data may become visible again, but it could also expose other people's information. You need to check both the functionality and the permissions.

  • What if you only disabled the button to prevent duplicate bookings? Duplicate bookings may still occur in another window or through repeated requests. Processing rules beyond the screen are also necessary.

You need to distinguish failed requests from the parts that worked and know what to check after making changes to break free from repetition.


🛠️ Learn developers’ design and validation, and
you’ll have a clearer idea of what to delegate to AI.

  • Before building, define the relationships and rules first. Map out the user flows for customers and administrators, and connect the member, class, session, and reservation data. Document rules such as permissions, reservation statuses, and capacity in the MD planning document and acceptance criteria.

  • After building it, verify even the situations where it could fail. Test with conditions such as different accounts, duplicate requests, and the last available spot. Use automated tests and build and type checks, and revert incorrect changes by reviewing the records.

In this course, we repeat these two processes from planning through implementation, revision, and deployment. It’s the process of establishing criteria for my own verification after the AI says, “It’s complete.”


🧭 Simply listening to a good explanation is not enough to complete
your service.

  • If you only follow the example exactly, you’ll get stuck when the requirements change. To adapt the reservation structure to your business, you need to determine what needs to change not only in the interface, but also in the data and permissions.

  • Even if you understand the theory, you may get stuck at launch without deployment experience. You need to experience everything from checking login and environment settings at a real URL to finding errors and rolling back updates.

So you’ll build one complete booking service from start to finish, culminating in a graduation project where you personally implement and validate your own requirements beyond the scope of the course.


🚀 Connect 20 years of web and app development experience to
your first service

Tani, who has 20 years of web and app development experience, guides you through the practical process of planning, building small, testing, and launching. We cover not only the moments when code is created, but also what to request and which results to verify.

The finished product will be an offline class reservation service. Experience the entire flow, from customer applications to administrator approval, web deployment, and app expansion, and learn development methods you can apply to your next ideas.



This is a conceptual example of a deliverable that extends from the web to an Android app as a single service.

💡 Two Monetization Paths for the Service I Created

🌐 Free access → AdSense advertising revenue
Create content- or tool-based services that people visit and use for free, then turn visitors’ interest into advertising revenue.

🔁 Paid SaaS → monthly subscription revenue
Provide customers with features they need repeatedly as a service, and charge a monthly subscription fee for the ongoing value they receive.

In this course, you’ll build a reservation service while learning the fundamentals of users, data, permissions, validation, deployment, and operations. You’ll apply these skills to ad-supported and subscription-based services, add the necessary features, and build a foundation for pursuing monetization. Actual revenue depends on the value provided to users, user acquisition, and consistent operation.

📌 Features of This Course

  • Connect a service from start to finish. Starting with an introduction screen, you will expand it to include member, reservation, and administrator features, deployment and operations, and even an Android app.

  • Develop work habits for using Codex. Communicate the goals, scope, and completion criteria, then continue development with project work rules and work logs.

  • We cover both expected behavior and behavior that must be prevented. We verify data access permissions, capacity limits, and duplicate requests starting from the implementation stage.

  • You will also practice the process of fixing failures. You will locate errors, revert incorrect fixes, and verify your skills through assignments that involve repairing intentionally broken features.

🔗 From web to app, hands-on practice connected through a single project
Build interfaces with React and TypeScript, then connect data and authentication with Supabase. Verify user flows with Playwright and extend the app with Capacitor.
Technologies covered: React · Android · TypeScript · capacitor · playwright · supabase · codex

Recommended for those who

If there’s something you want to build but you’ve found it difficult to connect the steps that come next on your own, let’s get started together.


Those who want to implement their ideas themselves

Recommended for those who want to turn a reservation service or small business idea into something that stores data and is usable by users, rather than leaving it as just a screen.


For those who need the next step in vibe coding

Recommended for those who have created simple screens but got stuck on login, databases, permissions, or deployment. It is suited to those who need criteria for evaluating AI-generated changes and resolving errors.


Those who want to experience both web and app development

Recommended for those who want to launch a web service publicly and expand the same project into an Android app, as well as those who want to learn the process from feature development through testing, deployment, and updates.

💡 The starting points may differ, but you need time to verify things for yourself.
Learn new concepts through hands-on practice. Along with watching the lectures, set aside time to run them in your own environment, compare the results, and fix errors.

🎯 After completing the course

  • You will experience the process of organizing an idea into an MD planning document that includes screens, data, permissions, and completion criteria.

  • You will build a reservation web service that connects customer sign-up, booking, and cancellation with the administrator’s class management, approval, and rejection.

  • Verify permissions using different accounts and invalid requests, and practice automated testing and troubleshooting.

  • Use GitHub and Vercel to publish the web service, covering the basics of operations, including environment configuration, error logging, backups, and rollbacks.

  • Extend the same project into an Android app and prepare a test deployment.

  • In the graduation project, you will implement and validate one of your own requirements.

✅ Build the ability to bring the following revenue ideas to life yourself.
Alongside your completed service, you will leave behind a project proposal, work records, and review criteria. Whether you attract users with a free service or take on a monthly subscription SaaS idea, you will learn development methods that let you build and refine the features you need yourself.

🛠️ What you’ll learn

Develop an offline class reservation service in four stages. Payments are covered as a practical extension in a test environment, while iOS is treated as an optional step.

The GIF below is a conceptual animation explaining the learning flow.

01. Turn the idea into a project plan and a first screen

Prepare the Codex app and development environment, create the first screen, save it to GitHub, and publish it on Vercel. Learn how to give instructions, review, and recover from issues, then organize the customer and administrator user flows in an MD planning document.

02. Build a Reservation Service with Real Data Flow

Connect Supabase to React·TypeScript screens. Apply sign-up, login, and data access permissions, and handle reservation status, capacity, and duplicate requests. Complete the flow through which administrators register classes and schedules and approve applications.

03. Validate, Publish, and Operate

Practice automated testing with Playwright, security reviews, error analysis, and fixes and recovery. Separate the development and production environments, and cover deployment, usage monitoring, backup, and restoration. In the practical extension, integrate approval, cancellation, and status checks for Toss Payments test payments.

04. Extend to an Android App and Your Project

Connect your web app to a mobile app with Capacitor, and refine the mobile UI, back navigation, sharing, and device notifications. Prepare for Android execution and test distribution on Google Play. In the optional section, we cover iOS and TestFlight, and in the final project, you implement your own features.

👨‍💻 The person who created this course


Hello! 👋
I’m Tani, a developer who talks about one-person businesses built with AI.

20 years of experience in web and app development, and 13 years working as a freelance developer.
I have worked on the design and development of projects for major companies such as Samsung Electronics and LG.

I’m currently researching and sharing how to use AI to build websites and apps yourself and develop them into services used by real users. On YouTube, I share my development process along with my journey of exploring AdSense, content monetization, and one-person businesses.

In this course, based on hands-on experience, we will guide you through the process of deciding what to build, asking AI for assistance, reviewing the results, and improving the service you have launched. Together, we will build a foundation in development that enables you to implement your ideas yourself and take on the challenge of monetization.

💼 Experience

  • 20 years of web and app development experience

  • 13 years of experience as a freelance developer

  • Experience designing and developing projects for major corporations such as Samsung Electronics and LG

  • Experience planning, designing, and developing corporate IT systems

🎥 YouTube · One-person businesses created with AI

I share my experience creating websites and apps with AI, vibe coding, AdSense, and content monetization.
Check out the channel first to see the explanation style you’ll encounter in the course and the actual creation process.

▶ Visit Tani's YouTube channel

💬 After “AI made it,” make sure “I checked it” remains.
Together, we’ll examine screens that work well and situations that need to be prevented, practicing how to understand and improve the services you make public.

📋 Notes Before Enrolling

Please review the practice environment, additional costs, and the scope of the optional components before getting started.

💻 Practice Environment

A PC capable of installing development tools and an internet connection are required. Prepare the Codex app, Node.js, Git, and VS Code, and use GitHub, Supabase, and Vercel accounts. The course uses Windows screens as the reference, with supplementary guidance on differences for Mac. Android practice requires Android Studio and an environment for running apps, and includes a process for checking the app on your Android device. The optional iOS course requires a Mac, Xcode, and an Apple Developer account.

📚 Learning Materials and Hands-on Practice Method

You will use hands-on materials and source code, while creating an MD planning document, project work rules, and review criteria. Guidance on using the question board is also provided. After following the examples, you will take on an independent exercise that involves adapting them to your own requirements.

🔎 Prerequisites and Practice Scope

Basic PC skills, such as managing files and folders, installing programs, and creating accounts, are required. Development concepts such as databases and APIs will also be covered during the hands-on exercises, so please set aside enough time for both running the exercises and reviewing the material.

Payments are practiced using the Toss Payments test environment. Additional preparation is required for actual sales. For Android, the course covers test distribution, while iOS is an optional component. For official store releases, check and follow each platform’s review procedures and requirements separately.

💡 Please check for additional costs beyond the course fee.
Costs may arise for using AI tools, server and database usage, domains and email, developer accounts for app distribution, and more. Since they vary depending on the services selected and the scope of use, check each service’s pricing and account requirements before proceeding with the exercises.

With a service you create,
open up the possibility of earning revenue.

From AdSense advertising revenue from free public services to monthly subscription revenue from SaaS.
It all starts with the experience of completing a service that people will actually use.
Together with Tani, who has 20 years of development experience, build and launch your first web or app service.

Recommended for
these people

Who is this course right for?

  • Beginners who want to turn their ideas into real web services but feel overwhelmed by the process of planning, development, validation, and deployment

  • Those who want to personally review AI-generated results and complete a service with customer and administrator features, as well as an Android app

Need to know before starting?

  • A PC, internet access, and a Codex account are required. The course is conducted using Windows screens as a reference, with supplementary guidance provided for differences on Mac.

  • You must be able to create the GitHub, Supabase, and deployment service accounts needed for the hands-on exercises. DB, email, domain, deployment, and app developer accounts may incur costs depending on usage.

Hello
This is tani

Career Verified

👋 Hello. I am Techtani, a developer who wants to deliver practical knowledge in a simple and clear way.

I am a developer who has been developing and operating web/app services and various practical projects in the field for nearly 20 years.

Recently, I have been focusing on researching ways to plan, build, and improve services alone using AI tools. In particular, I am very interested in easily conveying the development sense that non-majors and solo entrepreneurs must know in the era of "Vibe Coding."

We have entered an era where AI writes code for us, but there are still essential elements required to build a service properly.

It is about identifying what data your service needs to store, how that data is interconnected, and how to view the structure so it doesn't collapse as features expand.

Rather than a lecture that simply makes you memorize grammar, I aim to create a lecture that conveys structural thinking and problem-solving skills that can be applied immediately when building actual services.

I will explain things in an easy-to-understand way without missing the core points, so that non-majors and beginners can follow along without feeling overwhelmed.

🎥 TechTani YouTube channel shares the process of solo developers and solo entrepreneurs creating their own services in the AI era. You can also check out the teaching style and various IT insights.

In an era where technology changes rapidly, it is more important to properly understand the essential core concepts rather than trying to memorize everything.

If you want to create your own service with AI, start your journey with Techtani. 🚀

More

Curriculum

All

107 lectures ∙ (24min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Similar courses

Explore other courses in the same field!

Limited time deal ends in 7 days

$199.10

34%

$304.70