강의

멘토링

커뮤니티

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

544 learners

Level Basic

Course period Unlimited

  • Kyo
앱개발
앱개발
커뮤니티앱
커뮤니티앱
React Native
React Native
TypeScript
TypeScript
expo
expo
react-hook-form
react-hook-form
react-query
react-query
앱개발
앱개발
커뮤니티앱
커뮤니티앱
React Native
React Native
TypeScript
TypeScript
expo
expo
react-hook-form
react-hook-form
react-query
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,082

Learners

166

Reviews

339

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

60 reviews

4.9

60 reviews

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    Reviews 3

    Average Rating 5.0

    Edited

    5

    47% enrolled

    ✔️Reason for Choosing the Course While studying front-end as a publisher, I became ambitious to release a product (app) and wanted to become a solo developer! After contemplating which language to choose, I decided to use React Native because I had some experience with React (albeit beginner-level) 😊😊. I searched far and wide for a Native course, and then a new course opened on Inflearn! I decided to take the course after seeing the discount event. Thank you for opening a React Native course; there aren't many available. 😊 ✔️Advantages of the Course It teaches the easiest and most convenient way to develop apps with Expo. It explains the usage of convenient libraries and when it's good to use them! It provides not only front-end but also back-end source code, so you can actually check the database integration. It seems like you can see a complete product if you take the course! ✔️Who I Recommend the Course To I recommend it to those who have basic knowledge of back-end and front-end and want to easily create an app with Expo. Expo definitely allows you to create apps much more easily than taking Native courses elsewhere! But...!! Since I'm ignorant about the back-end, a beginner in React, and not a developer... I started to struggle a lot from the server integration part (from Chapter 5)... I can't solve it even if I spend all day on it, so I'm quitting midway for now 😭. Sometimes it seems like it's done in a snap like Bob Ross, but it's hard for me to understand 😭😭... I decided to listen to more beginner-level courses and listen again when I actually try to create an app with Expo. However, this is because I'm stupid... I recommend the course itself!! 👍

    • koy
      Instructor

      Thank you for leaving such a detailed review!

    • I completed the course and even released my personal app~ There were quite a few constraints because I built it with Expo, and I did encounter library conflicts, but it is indeed a tool that makes it easy to build. The app I made is https://play.google.com/store/apps/details?id=com.badanang.CampWeather. Thanks to Kyo, even though I'm a designer, I was able to release an app, I'm so grateful 😭😭!

    • koy
      Instructor

      Wow, you're a designer and you even launched it, that's amazing!! I'll try it too! Thank you for completing the course until the end, even though there were difficulties 👍

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    Reviews 2

    Average Rating 5.0

    5

    34% enrolled

    I'm a non-major student currently taking and learning from the lectures, and honestly, I'm learning so much by following along... Moreover, I'm so grateful to the instructor for giving immediate feedback whenever I get stuck, to the point where I admire them... I will continue to learn and improve... Dreaming of becoming a solo developer with a non-major background... 😭😭

    • koy
      Instructor

      Thank you for the great review. I'll be cheering you on!

  • chotg님의 프로필 이미지
    chotg

    Reviews 1

    Average Rating 5.0

    Edited

    5

    100% enrolled

    I urgently needed to use RN at work, and the lecture was 30% off, so I listened to the preview lecture. I decided to take the course because I felt that the instructor was someone who cared about the code. I can refer to the official documentation and develop, but I was curious about how to quickly develop apps. I completed the course in a total of 3 days. Advantages of the course There is so much to learn. Rather than simply implementing functions, the instructor intentionally adds various functions so that you can learn. Covers techniques that can be applied directly to real-world practice. (How to handle forms and validation, how to use react-query, component separation and reusability considerations, consistent code style, etc.) You can experience the product development process directly. It's not just a simple example level, but I was able to learn the development flow in the field. It was nice to reduce unnecessary parts with cut editing. I think it will be a great help if you learn the code provided in the lecture and improve the code to make it your own. Recommended for Those with a basic understanding of React and CSS Those who want practical development experience Developers with less than 2 years of experience or job seekers who need to learn practical skills without a mentor It may be a little difficult for those who have no React experience at all, so it is recommended to take the course after learning the basic concepts.

    • koy
      Instructor

      I'm glad that you completed the course quickly and found it helpful. I was surprised that you noticed the detailed aspects that I spent a lot of time on, from the functions and components to code consistency and even editing. Thank you for leaving a great review!

  • agger21540581님의 프로필 이미지
    agger21540581

    Reviews 5

    Average Rating 4.8

    5

    61% enrolled

    Very fun! The best!

    • koy
      Instructor

      Thank you! It gives me strength to know that you enjoyed it :)

  • lgs4002님의 프로필 이미지
    lgs4002

    Reviews 15

    Average Rating 4.3

    5

    96% enrolled

    I enjoyed watching it.

    • koy
      Instructor

      It's great to hear that you enjoyed it. Thank you for the course review!

Limited time deal ends in 3 days

$6,717.00

29%

$59.40

Kyo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!