강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

[Renewal] Building a Restaurant Map App (React Native & NestJS)

You'll learn the process of developing and launching your own restaurant recording app using React Native. We've prepared the entire process from design to front-end and back-end development, and deployment.

(4.9) 88 reviews

1,383 learners

  • Kyo
실습 중심
클론코딩
프로젝트
React Native
TypeScript
NestJS
react-query
zustand

Reviews from Early Learners

What you will learn!

  • React Native

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

[Intermediate] Building a Restaurant Map App with React Native & NestJS

Course Renewal Notice

This course was renewed and completed on August 24, 2025.

Course Introduction

최[[SPAN_1]]신 기술을 사용하여 [[STRONG_2]]나만의 맛집 지도 서비스[[/STRONG_2]]를 만들어보세요! 프론트 및 백엔드 개발, 디자인, 배포까지 전 과정을 준비했어요. [[STRONG_3]]피그마로 구축된 디자인시스템을 기반으로 앱을 개발[[/STRONG_3]][[/SPAN_1]][[SPAN_4]]합니다.[[/SPAN_4]]

I'll share various know-how from developing an app with React Native to releasing it on both the App Store and Play Store. The tech stack uses React Native, TypeScript, NestJS, react-query, zustand.

You will develop both frontend and backend to complete an entire service from start to finish.
The course duration consists of 12 hours of frontend + 3 hours of backend, and source code for every lesson is provided.

* This course is an intermediate-level course using React Native CLI. Please keep this in mind when enrolling. (For development using Expo, please refer to the Avatar Community App Development course.)

What We Cover

  • React Navigation


  • TypeScript

  • Tanstack Query (React Query)

  • Zustand

  • Server State & Global State Management

  • JWT-based Authentication

  • Kakao Login / Apple Login


  • Common Component Development

  • Compound Component Pattern

  • Custom Hook Pattern

  • Suspense, ErrorBoundary

  • App Deployment

  • Google Maps API, Kakao Map API Integration

  • Marker Display and Clustering

  • Infinite Scrolling


  • Calendar Implementation


  • Dark Mode

  • Image Upload

  • Handling App Permissions

  • Working with Date Functions

  • Modifying Libraries

  • WebView


  • NestJS & TypeORM

  • PostgreSQL

📚 Course Tech Stack

The frontend is built on React Native(CLI), TypeScript and actively utilizes TanStack Query(React Query), with Zustand as the global state management tool. The backend is developed using the NestJS, TypeORM, PostgresQL stack. Additionally, we integrate various APIs such as Google API and Kakao API for collaborative development.

⭐ ️Key Implementation Features

Sign Up/Login/Social Login

Map/Location Integration

Infinite Scroll/Bookmarks

Location Search/Registration

Calendar feature

Settings and Dark Mode

⚠ Please check the curriculum for detailed implementation details!

💫 What Makes This Course Different

1. Simultaneous Android and iOS Development

While developing both platforms together, we create reusable common components that work across multiple platforms and screens. We'll also teach you about the differences between platforms and how to handle them.

2. Component Design & Custom Hooks

Rather than simple implementation or library usage, learn how to develop with reusability and flexibility in mind using compound component patterns, custom hook patterns, and more.

3. Figma Design-Based Development

A design system built with Figma and designs for all screens are provided, making it easy to see which components and screens to implement.

4. Minimize Library Usage

Minimize library usage and develop implementation and problem-solving skills by directly implementing most features. Directly implement approximately 20 custom hooks, approximately 40 components, and various utility functions.

5. Source Code Provided

We provide not only the completed backend source code, but also the source code for all classes from the beginning to the end of the project. In addition, we provide materials necessary for developing and understanding the service, such as blogs and articles.

Required Prerequisites

This is a ReactNative CLI-based intermediate to advanced (professional skill enhancement) level course. It may not be suitable for beginners. Please keep this in mind when enrolling. (For Expo-based development, please refer to the Avatar Community App Development course.)

  • JavaScript/CSS knowledge is required. ES6 syntax like map, filter, etc. will not be explained.

  • React knowledge is required. We don't explain state and props, basic Hooks (useState, useEffect), etc.


Reference Information

  • The lectures are conducted with React Native CLI. We don't use Expo.

  • The lecture development environment is Mac OS. (Windows users can only develop Android apps. A Mac environment is required for iOS app development.)

  • This course is produced in 3840 × 2160 (4K) resolution, so you can enjoy better video quality by selecting a higher resolution.


* This course was renewed and completed on August 24, 2025.

Recommended for
these people

Who is this course right for?

  • Those who want to launch their own app

  • Someone who has learned the basics of JavaScript/React

  • Someone who wants to have a special portfolio that is actually operational

  • Those who want to create a complete and polished app

  • Those who want to develop both frontend and backend with JavaScript

Need to know before starting?

  • I need React knowledge.

  • I need JavaScript/CSS knowledge.

  • It would be great if you have experience with Node.js and Express. (for backend development)

Hello
This is

1,976

Learners

148

Reviews

331

Answers

4.9

Rating

3

Courses

커뮤니티 서비스 프론트엔드 개발자로 시작하여 현재는 커머스 플랫폼 풀스택 개발자로 일하고 있습니다.

인프런에서는 완성도 높은 프로덕트를 만들기 위한 강의를 하고 있습니다.

 

  • inkyo.dev@gmail.com

Curriculum

All

118 lectures ∙ (14hr 59min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

88 reviews

4.9

88 reviews

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    Reviews 1

    Average Rating 5.0

    5

    82% enrolled

    Tôi đã học khoảng ba bài giảng RN từ nhiều giảng viên khác nhau, nhưng tôi cảm thấy bài giảng của giảng viên Kyo là hay nhất. (Tôi là nhà phát triển back-end nên tôi không tham gia khóa học này về phía máy chủ NestJS.) 1. Xây dựng dự án trải nghiệm nhiều yêu cầu khác nhau Bạn có thể theo dõi dự án từ đầu đến cuối và sử dụng nhiều yêu cầu, thành phần và thư viện thực tế khác nhau, vì vậy ngay cả khi chỉ tham gia khóa học này, bạn sẽ có thể có đủ thông tin để tạo ứng dụng mà bạn muốn. Đây là khóa học cho phép bạn phát triển một ứng dụng không giống như một dự án đồ chơi và có các chức năng phức tạp và đa dạng ở mức độ có thể phục vụ được trên thực tế. (Chất lượng bài giảng tổng thể ở mức tương đối và tuyệt đối cao trong số các bài giảng RN tôi đã nghe) 2. Kỹ năng giải thích của người hướng dẫn rất xuất sắc. Tôi nghĩ rằng biết, giỏi một thứ gì đó và có thể dạy nó cho ai đó là hai khả năng riêng biệt. Điều tôi cảm nhận được khi tham gia khóa học là người hướng dẫn Kyo không chỉ có trình độ cao về RN mà còn có khả năng giải thích cho người khác một cách dễ hiểu. Nhờ đó tôi đã có thể hoàn thành bài giảng một cách dễ dàng. 3. Môi trường lớp học dễ chịu (4K) Thông thường, các bài giảng khác được tải lên ở định dạng 1K, nhưng bài giảng này được quay ở định dạng 4K, vì vậy tôi có thể tham gia bài giảng trong khi cảm thấy như mắt mình đang được thanh lọc. Xem xét không chỉ nội dung khóa học mà còn cả môi trường tham gia các khóa học này, tôi nghĩ rằng chất lượng tổng thể của khóa học chắc chắn sẽ tốt. Những điều tôi đặc biệt thích - Chất lượng video bài giảng (4K) - Nội dung bài giảng bổ sung (sửa đổi thư viện trực tiếp, tối ưu hóa hình ảnh, v.v.) - Cấp độ ứng dụng được phát triển cùng nhau trong lớp (các ứng dụng phản ánh các yêu cầu phức tạp và thực tế ở cấp độ sản phẩm) Phải mất một thời gian dài vì tôi đã dành thời gian để nghe nó sau giờ làm việc, nhưng đó thực sự là một bài giảng thú vị và hữu ích. Cảm ơn! Nếu bạn tổ chức một khóa học RN khác với chủ đề khó hơn, tôi chắc chắn sẽ tham gia khóa học đó!

    • koy
      Instructor

      Trong bài giảng này, mục tiêu là tạo ra một ứng dụng hoàn chỉnh có thể phục vụ được chứ không phải là một dự án đơn giản như bạn đã nói. Mặc dù thời gian giảng dài hơn nhưng tôi rất vui vì bạn đã thích thú với bài giảng. Cảm ơn bạn đã để lại đánh giá rất chi tiết :)

  • kms920106님의 프로필 이미지
    kms920106

    Reviews 24

    Average Rating 4.6

    5

    99% enrolled

    가장 친한 친구에게 소개팅을 정말 괜찮은 사람으로 소개해준다면 가장 친한 친구에게 RN은 무조건 이 강의를 소개시켜주고싶네요 장점 1) 질문하면 AI보다 더 빠르게 답변해주신다 2) 강의 챕터마다 깃헙에 올라와 있어서 참고하기가 너무 편하다 3) 목소리가 나긋하다....(살짝 성시경이라고 해야되나..ㄷㄷ) 4) 리팩토링 과정도 포함되어 있다

    • koy
      Instructor

      Bạn đã đăng nhiều câu hỏi/chia sẻ trong cộng đồng và cảm ơn bạn đã viết đánh giá về khóa học 🙂 Thật vui khi bạn muốn giới thiệu bài giảng này👍👍 Nếu bạn có bất kỳ vấn đề nào trong tương lai, vui lòng cho tôi biết bất cứ lúc nào!!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    Reviews 1

    Average Rating 5.0

    Edited

    5

    100% enrolled

    Thật tuyệt khi được xây dựng một ứng dụng bằng React Native từ đầu đến cuối. Tôi đã có kinh nghiệm cả về front-end và back-end, và việc hoàn thành cả quá trình triển khai thực tế đã đủ để tôi rèn luyện kỹ năng thực chiến. Sử dụng các công nghệ mới nhất như React Query, Zustand, NestJS, TypeORM cũng giúp ích cho việc học về bộ kỹ năng công nghệ, và các tính năng thực tế như đăng nhập Kakao/Apple, API bản đồ, cuộn vô hạn cũng được đề cập đầy đủ. Code được tổ chức tốt và giải thích rõ ràng nên rất dễ theo dõi. Việc được tự tay thực hiện toàn bộ quá trình từ phát triển đến xuất bản lên App Store/Play Store khiến tôi nghĩ đây là một khóa học có độ hoàn thiện cao.

    • koy
      Instructor

      Bạn đã học hết tất cả các bài rồi! Cảm ơn vì đã nhận xét khóa học có chất lượng tốt.

  • lody님의 프로필 이미지
    lody

    Reviews 1

    Average Rating 5.0

    Edited

    5

    12% enrolled

    Trước đây tôi chuyên phát triển ứng dụng native, nhưng lần này tôi muốn học chuyên sâu về RN nên đã tham gia khóa học này. Thực ra, lúc đầu tôi cũng lo lắng "Nghe nói bao gồm cả client lẫn server, liệu có tốn thời gian mà không hiệu quả không?". Nhưng không ngờ nội dung được cấu trúc bài bản hơn tôi nghĩ rất nhiều, và tôi học được rất nhiều kiến thức hữu ích trong mỗi buổi học. Điều tôi thích nhất là có thể nắm bắt toàn bộ quy trình dịch vụ một cách tổng quan. Từ việc thiết kế bằng Figma, xây dựng giao diện bằng React Native, đến việc kết nối với backend NestJS đều được trình bày từng bước một, nên tôi luôn nhận ra "À, nó kết nối như thế này đây" trong mọi khoảnh khắc. Tôi cũng thích việc khóa học đề cập đến cả việc triển khai trên AWS. React Native tuy còn xa lạ với tôi, nhưng tôi vẫn hào hứng theo dõi vì khóa học đề cập đến nhiều tính năng thực tế, có thể áp dụng được ngay chứ không chỉ ở mức độ ví dụ. Khóa học cũng chỉ ra chi tiết những điểm đặc biệt mà chỉ gặp phải trong RN, nên tôi, người đã từng phát triển native, cũng có thể dễ dàng vượt qua. Tôi đang rất hài lòng với khóa học này và đã bắt đầu tò mò về các khóa học khác như "Xây dựng ứng dụng cộng đồng Avatar". Tôi thực sự khuyên dùng khóa học này cho những ai muốn tạo ra một ứng dụng di động thực thụ! Tôi đã có thể theo kịp nội dung bài giảng một cách đầy đủ mà không cần đặt câu hỏi nào. Mong rằng trong tương lai sẽ có nhiều khóa học chất lượng như thế này nữa. Cảm ơn!

    • koy
      Instructor

      Cảm ơn bạn vì những đánh giá tốt!

  • swi81387993님의 프로필 이미지
    swi81387993

    Reviews 2

    Average Rating 5.0

    5

    24% enrolled

    Tôi là một người bình thường chỉ học JAVA, JS, CSS như một sở thích. Từ trước đến nay, tôi đã có ước mơ "muốn tự tay tạo ra một ứng dụng!", nhưng vì không chuyên nên tôi đã không dễ dàng thử sức, mãi đến bây giờ tôi mới có cơ hội. Tôi bắt đầu quan tâm đến React Native, vì nó có thể phát triển ứng dụng đa nền tảng, nên sau khi tự học những kiến thức cơ bản về React, tôi đã tham gia khóa học của Kyo. Kết quả là, tôi nghĩ rằng mình đã thực sự làm rất tốt khi tham gia khóa học này! Lúc đầu, nó không hề dễ dàng vì đây là một khóa học trung cấp, nhưng trong quá trình học, có rất nhiều khoảnh khắc tôi tự hỏi "Ồ, cũng có chức năng này sao?", và tôi đã có thể học cách sử dụng những thứ mà tôi chỉ biết khái niệm một cách thực tế, điều đó thực sự rất hữu ích. Đặc biệt, tôi rất vui vì đã học được cách sử dụng các chức năng mà tôi đã biết một cách hiệu quả hơn, và tôi cảm thấy mình ngày càng quen thuộc hơn khi ôn tập và làm theo. Nhờ đó, tôi đã có thêm tự tin vào React Native, và giờ đây tôi có kỳ vọng lớn rằng mình có thể tự tạo ra ứng dụng của riêng mình! Ngay cả một người không chuyên như tôi cũng đã thử sức sau khi nắm vững những kiến thức cơ bản về React, vì vậy tôi nghĩ rằng những người khác cũng có thể theo kịp. Cảm ơn bạn vì một bài giảng hay! 😊 Cố lên! 🚀

    • koy
      Instructor

      Cảm ơn bạn vì những đánh giá tốt về khóa học!

$77.00

Kyo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!