강의

멘토링

로드맵

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) 86 reviews

1,350 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,900

Learners

141

Reviews

323

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

86 reviews

4.9

86 reviews

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    Reviews 1

    Average Rating 5.0

    5

    82% enrolled

    I have completed three RN lectures by various instructors, but I felt that Instructor Kyo's lecture was the best. (I am a backend developer, so I did not take the NestJS server-side part of this lecture.) 1. Project composition that allows you to experience various requirements You can follow the project from beginning to end and use various and realistic requirements, components, and libraries, so even if you only take this lecture, you can gain enough information to create the app you want. It is a lecture that allows you to develop an app with complex and diverse functions that does not feel like a toy project, but is actually serviceable. (The overall lecture quality is relatively and absolutely the highest among all the RN lectures I have taken.) 2. The instructor's ability to explain is excellent I think that knowing something well and doing it well and the ability to teach it to someone are separate abilities. What I felt while taking the lecture was that Instructor Kyo is not only highly skilled in RN, but also has the ability to explain it well to others in an easy-to-understand way. Thanks to this, I was able to complete the lecture easily. 3. Pleasant lecture environment (4K) Usually, other lectures are uploaded in 1K, but this lecture was filmed in 4K video, so I was able to take the lecture while feeling like my eyes were being purified. Just looking at the fact that they consider not only the lecture content but also the lecture environment, I think the overall lecture quality cannot be anything but good. What was especially good - Lecture video quality (4K) - Bonus lecture content (direct modification of libraries, image optimization, etc.) - The level of the app developed together in the lecture (an app that reflects complex and realistic requirements of the product level) I listened to it after work, so it took a long time, but it was a really fun and informative lecture. Thank you! If you make another RN lecture on a more difficult topic, I will definitely take it!

    • koy
      Instructor

      In this lecture, the goal was to create a complete app that could be serviced, rather than a simple project that was just created as you said. The lecture time was long, but I think the lecture was a good fit for me. Thank you for leaving such a detailed review :)

  • kms920106님의 프로필 이미지
    kms920106

    Reviews 24

    Average Rating 4.6

    5

    99% enrolled

    If you introduce a really good person to your best friend for a blind date, I want to introduce this course to my best friend without fail. Advantages 1) They answer questions faster than AI 2) The lecture chapters are uploaded to GitHub, so it's really easy to refer to 3) The voice is gentle....(Should I say it's a bit like Sung Si-kyung..ㄷㄷ) 4) The refactoring process is also included

    • koy
      Instructor

      Thank you for posting many questions/shared posts in the community and even writing a review 🙂 I'm glad you wanted to introduce this lecture👍👍 Please let me know if you have any questions in the future!!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    Reviews 1

    Average Rating 5.0

    Edited

    5

    100% enrolled

    It was great being able to build an app from start to finish with React Native. I got to experience both frontend and backend, and completing the actual deployment was sufficient for gaining real-world experience. Using the latest technologies like React Query, Zustand, NestJS, and TypeORM helped me learn the tech stack, and practical features such as Kakao/Apple Login, Map API, and infinite scroll were covered thoroughly. The code was well-structured and the explanations were clear, which made it easy to follow along. I believe it's a highly comprehensive course because I could personally go through the entire process up to releasing on the App Store/Play Store.

    • koy
      Instructor

      You've completed all the lessons! Thank you for saying it was a high-quality course.

  • lody님의 프로필 이미지
    lody

    Reviews 1

    Average Rating 5.0

    Edited

    5

    12% enrolled

    I've been developing apps natively, but I wanted to learn React Native in depth, so I decided to take this course. To be honest, at first I was worried, thinking, "It covers everything from the client to the server, what if it's just long and not very good?" But it's much more systematically structured than I thought, and I'm gaining really useful knowledge in every lecture. The best thing is that I can learn the overall service flow at once. From designing with Figma, to configuring the screen with React Native, to linking with the NestJS backend, the process is shown step by step, so every moment I realized, "This is how it's connected." I also liked that it covers deployment to AWS. React Native was unfamiliar, but I'm following it with interest because it covers a variety of features that can be used right away, not just at the example level. In the middle, it points out the unique parts of RN in detail, so even I, who used to do native development, was able to get through it without much difficulty. I'm so satisfied with the course that I'm already curious about other courses like "Creating an Avatar Community App." Highly recommended for those who want to create a mobile app properly! I was able to follow the course content sufficiently without any questions. I hope you will continue to create such dense lectures in the future. Thank you!

    • koy
      Instructor

      Thank you for the great review!

  • swi81387993님의 프로필 이미지
    swi81387993

    Reviews 2

    Average Rating 5.0

    5

    24% enrolled

    I'm just a regular person who has learned JAVA, JS, and CSS as hobbies. I've always had a dream of "creating my own app with my own hands!" but as a non-major, I couldn't easily take on the challenge, but now I finally have the opportunity. I became interested in React Native, which allows cross-platform app development, so after studying the basics of React separately, I took Kyo's course. To start with the conclusion, I think I made a really good decision to take this course! At first, it wasn't easy because it was an intermediate course, but as I learned, there were many moments where I thought, "Wow, there was also this function?" and it was really helpful because I could learn how to actually use things that I only knew as concepts. In particular, it was great to learn how to use existing functions more efficiently, and I felt that I was getting more and more familiar with it as I followed along while reviewing. Thanks to this, I gained confidence in React Native, and now I have a growing expectation that I will be able to create my own app! I'm a non-major, and I took on the challenge with just the basics of React, so I think others can definitely follow along. Thank you for the great lecture! 😊 Fighting! 🚀

    • koy
      Instructor

      Thank you for the great review!

Limited time deal ends in 7 days

$58.30

24%

$77.00

Kyo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!