강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

Creating an Avatar Community App (React Native Expo)

We develop an avatar-based community app with React Native. You'll learn to build a comprehensive community app, covering post creation, comments/replies, likes, voting, avatar generation, etc.

(4.9) 55 reviews

520 learners

  • Kyo
앱개발
커뮤니티앱
React Native
TypeScript
expo
react-hook-form
react-query

Reviews from Early Learners

What you will gain after the course

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[Beginner-Intermediate] Building an Avatar Community App with React Native

React Native, TypeScript, react-query, react-hook-form, expo

Course Introduction

We will create an avatar-based community app using React Native. I'll show you how to build a comprehensive community app with various features including post creation/comments as well as replies, likes, voting, avatar system, multi-language settings, push notifications, and more.

We develop iOS and Android apps simultaneously using React Native (Expo), TypeScript, react-query(tanstack query), react-hook-form. To allow you to focus solely on front-end app development, we provide all product designs including Figma design systems, and we also provide backend source code.

This course uses React Native Expo.

There are two ways to develop apps with React Native: developing with Expo and developing with CLI. Recently, the official React Native documentation has also been recommending development through Expo.

Expo makes environment setup and development much simpler compared to CLI. Testing on simulators/actual devices is convenient, and using libraries is also straightforward, so you can easily start React Native development with Expo. Additionally, you can easily build and deploy apps using EAS (Expo Application Services).

(* For CLI-based development, please refer to the Restaurant Map App Development Course.)

📖 What We Cover

  • React Native & Expo

  • Expo Router


  • TypeScript

  • React Query (Tanstack Query)


  • JWT-based Authentication


  • Common Component Development


  • Custom Hook Pattern


  • Profile/Avatar Feature

  • Multi-language Settings (i18n)

  • Push Notifications

  • App Build and Deployment (EAS)


  • Writing/Editing/Deleting

  • Writing Comments/Replies

  • Vote attachment, participate in voting

  • Image upload

  • Like/View Count Feature

  • Optimistic Update

  • Infinite Scroll


  • Using SVG

  • Applying Fonts

  • Working with Dates using dayjs

  • Handling Forms with React Hook Form




🔥 Development Tech Stack

In this course, we develop using technologies such as React Native(Expo), TypeScript, React Query(TanStack Query), React Hook Form, dayjs, i18n, and more. If you have React experience, it's okay even if you haven't used all of these technologies before!

Learn how to fetch, cache, and update server data using React Query, how to easily handle even the most complex forms using React Hook Form, how to easily manage dates with dayjs, and how to easily implement multi-language support using i18n.

⚡ ️️Key Implementation Features

Sign Up/Login

Feed Infinite Scroll/Search

Post Creation/Voting Attachment

Likes/Comments/Replies + Push Notifications

Profile/Avatar Customization

Settings/Multi-language

⚠ Please check the curriculum for detailed implementation details!

️ What Makes This Course Different

1. Simultaneous Android and iOS Development


We develop both platforms together and create reusable common components for various platforms/screens. We also share the differences between platforms and how to address them.

2. Figma Design System Provided

No need to worry about design! We provide all product designs including colors/components/screens/images.

3. Highly focused structure with source code provided for each lesson

  • We reduced unnecessary content and focused on the essentials, creating short and easy-to-focus lessons with an average of 7.5 minutes per class and a maximum of 16 minutes to enhance learning efficiency.

  • We provide not only the completed backend source code but also the same source code used in all classes from the beginning to the end of the project. Please check the attached materials for each class.

Reference Information

  • The course is conducted using ReactNative Expo.


  • This course is available for both Windows/Mac users and we will proceed by checking the functionality on both Android/iOS. (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.

  • The images (avatars) used in the lectures are copyrighted works, so please use them only for personal practice purposes.

🙋‍♂ Q&A

Q. Who is the target audience for this course?

  • While React Native knowledge is not required as a prerequisite, this course is intended for those who have JavaScript ES6 knowledge and have experience with React.

Q. Is TypeScript essential?

  • In React Native, projects are set up with TypeScript by default, so the course will be conducted in TypeScript. However, complex types are not used, so TypeScript knowledge is not essential.

Recommended for
these people

Who is this course right for?

  • Someone who has studied JavaScript/React basics

  • Wants to build a polished community app, not a simple board.

Need to know before starting?

  • Basic JavaScript knowledge is required. ES6 syntax must be known.

  • You need to know React basic Hooks (useState, useEffect).

Hello
This is

2,033

Learners

155

Reviews

332

Answers

4.9

Rating

3

Courses

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

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

 

  • inkyo.dev@gmail.com

Curriculum

All

80 lectures ∙ (8hr 25min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

55 reviews

4.9

55 reviews

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    Reviews 3

    Average Rating 5.0

    Edited

    5

    47% enrolled

    ✔️ Lý do chọn khóa học Trong quá trình học Front-end với vai trò là Deblisher, tôi đã nảy sinh tham vọng phát hành sản phẩm (ứng dụng) và muốn trở thành nhà phát triển độc lập..! Sau khi cân nhắc lựa chọn ngôn ngữ, vì đã từng sử dụng React (dù chỉ ở mức sơ cấp), tôi quyết định tạo ứng dụng bằng React Native 😊😊. Trong quá trình tìm kiếm các khóa học Native, tôi đã thấy khóa học mới khai giảng trên Inflearn! Sau khi xem sự kiện giảm giá, tôi đã quyết định tham gia. Vì không có nhiều khóa học React Native nên cảm ơn bạn đã mở khóa học này.😊 ✔️ Ưu điểm của khóa học Khóa học hướng dẫn cách phát triển ứng dụng bằng expo một cách dễ dàng và tiện lợi nhất. Bạn sẽ được hướng dẫn cách sử dụng các thư viện tiện lợi và khi nào nên sử dụng những thư viện này.! Ngoài Front-end, khóa học còn cung cấp source code Back-end, giúp bạn có thể kiểm tra việc kết nối với Database. Tôi cảm thấy rằng nếu tham gia khóa học này, bạn sẽ có thể tạo ra một sản phẩm hoàn chỉnh..! ✔️ Khóa học này dành cho ai Khóa học này phù hợp với những người có kiến thức cơ bản về Back-end và Front-end và muốn tạo ứng dụng đơn giản bằng expo. So với các khóa học Native khác, expo giúp tạo ứng dụng một cách đơn giản hơn rất nhiều..! Nhưng...!! Vì tôi không có kiến thức về Back-end, chỉ là người mới bắt đầu với React và không phải là nhà phát triển nên tôi bắt đầu gặp khó khăn từ phần kết nối Server (từ chương 5)... Dù dành cả ngày để tìm hiểu nhưng vẫn không giải quyết được nên tôi tạm dừng giữa chừng 😭. Đôi khi tôi thấy mọi thứ diễn ra nhanh chóng như chú Bob Ross nhưng tôi lại khó hiểu 😭😭... Tôi quyết định sẽ học thêm một vài khóa học sơ cấp hơn và sẽ nghe lại khóa học này khi tôi tạo ứng dụng thực tế bằng expo. Tuy nhiên, đây là do tôi quá kém cỏi... Bản thân khóa học rất đáng để giới thiệu!! 👍

    • koy
      Instructor

      Cảm ơn bạn đã để lại đánh giá chi tiết về khóa học!

    • Sau khi nghe giảng, tôi đã hoàn thành việc ra mắt ứng dụng cá nhân~ Dù làm bằng expo nên có khá nhiều hạn chế và cũng xảy ra xung đột thư viện, nhưng đúng là một công cụ giúp làm dễ dàng hơn. Ứng dụng tôi làm là https://play.google.com/store/apps/details?id=com.badanang.CampWeather Nhờ có Kyo님 mà dù là một designer tôi vẫn có thể ra mắt ứng dụng, tôi thực sự rất cảm ơn 😭😭!

    • koy
      Instructor

      Ồ, bạn là một nhà thiết kế mà còn cho ra mắt sản phẩm/dịch vụ nữa, thật tuyệt vời!! Tôi cũng sẽ dùng thử! Dù gặp khó khăn nhưng cảm ơn bạn đã tham gia khóa học đến cùng nhé 👍

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    Reviews 2

    Average Rating 5.0

    5

    34% enrolled

    Tôi là một học viên không chuyên đang liên tục nghe giảng và học hỏi,,, Thật lòng mà nói, tôi học được rất nhiều điều khi làm theo hướng dẫn... Đặc biệt, tôi vô cùng kính trọng giảng viên vì đã phản hồi ngay lập tức mỗi khi tôi gặp khó khăn... Tôi sẽ tiếp tục học hỏi và cố gắng hơn nữa... Với ước mơ trở thành một nhà phát triển độc lập không chuyên,,,😭😭

    • koy
      Instructor

      Cảm ơn bạn vì những đánh giá tốt về khóa học. Chúc bạn mọi điều tốt đẹp!

  • chotg님의 프로필 이미지
    chotg

    Reviews 1

    Average Rating 5.0

    Edited

    5

    100% enrolled

    Công ty đột ngột cần sử dụng RN, và may mắn là khóa học đang giảm giá 30%, nên tôi đã nghe thử bài giảng xem trước. Tôi cảm thấy giảng viên là người quan tâm đến code nên đã quyết định đăng ký. Tôi có thể tham khảo tài liệu chính thức để phát triển, nhưng tôi tò mò muốn biết cách phát triển ứng dụng một cách nhanh chóng. Tôi đã hoàn thành khóa học trong tổng cộng 3 ngày. Ưu điểm của khóa học Có rất nhiều điều để học. Không chỉ dừng lại ở việc hiện thực hóa chức năng đơn thuần, giảng viên còn cố ý thêm nhiều chức năng khác nhau để có thể học tập. Xử lý các kỹ thuật có thể được sử dụng ngay trong thực tế. (Cách xử lý Form và kiểm tra tính hợp lệ, cách sử dụng react-query, phân tách component và xem xét khả năng tái sử dụng, kiểu code nhất quán, v.v.) Bạn có thể trực tiếp trải nghiệm quá trình phát triển sản phẩm. Không chỉ là mức độ ví dụ đơn giản, bạn có thể làm quen với quy trình phát triển trong thực tế. Việc cắt chỉnh sửa để giảm bớt những phần không cần thiết rất tốt. Tôi nghĩ rằng nếu bạn học code được cung cấp trong bài giảng, và cải thiện code để biến nó thành của mình, chắc chắn nó sẽ giúp ích rất nhiều. Đối tượng được đề xuất Những người có kiến thức cơ bản về React và CSS Những người muốn có kinh nghiệm phát triển thực tế Các nhà phát triển dưới 2 năm kinh nghiệm hoặc sinh viên đang chuẩn bị tìm việc làm, những người cần học thực tế mà không có người hướng dẫn Vì có thể hơi khó đối với những người chưa có kinh nghiệm React, nên tôi khuyên bạn nên học các khái niệm cơ bản trước khi tham gia khóa học.

    • koy
      Instructor

      Bạn đã hoàn thành khóa học một cách nhanh chóng và có vẻ như nó đã giúp ích được nhiều cho bạn, tôi rất vui vì điều đó. Tôi rất ngạc nhiên khi bạn nhận ra những chi tiết mà tôi đã dành rất nhiều thời gian để quan tâm, từ các chức năng và thành phần đến tính nhất quán của mã và thậm chí cả việc chỉnh sửa. Cảm ơn bạn đã để lại một bài đánh giá tốt!

  • agger21540581님의 프로필 이미지
    agger21540581

    Reviews 5

    Average Rating 4.8

    5

    61% enrolled

    Rất thú vị! Tuyệt vời nhất!

    • koy
      Instructor

      Cảm ơn bạn! Việc bạn xem một cách thú vị thực sự tiếp thêm động lực cho tôi :)

  • lgs4002님의 프로필 이미지
    lgs4002

    Reviews 14

    Average Rating 4.3

    5

    96% enrolled

    Tôi đã xem rất thú vị và hay.

    • koy
      Instructor

      Thật tuyệt khi bạn thấy thú vị. Cảm ơn bạn đã chia sẻ cảm nhận về khóa học!

$59.40

Kyo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!