강의

멘토링

커뮤니티

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

578 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

Reviews from Early Learners

4.9

5.0

임용준

34% enrolled

Wow.... This is my first time taking this course, but I'm understanding it perfectly. The instructor's teaching style is also really good. If you're taking a native speaker course for the first time, I highly recommend this one.

5.0

로빈(Robin)

100% enrolled

This lecture was a very informative time where I could learn how to utilize various React libraries such as react-query, react-hook-form, and i18n, as well as React Native and Expo. I learned a lot from Kyo's restaurant app lecture using React Native CLI, and this time, I learned Expo and also gained various development know-how from the instructor. It was a very satisfying lecture, and I hope to take another lecture by Kyo in the future to learn other things. Thank you for creating such a great lecture!

5.0

zoezoe

84% enrolled

This lecture was very helpful as I'm new to Expo! Also, I think I got a lot of help with how to use react-hook-form and how to create common components. There are many easy lectures for beginners on the market, but I liked that this lecture was a bit more difficult and would help me grow more. The lecture is so neat, each lecture is not too long, so it's easy to concentrate, and there's a lot to learn from writing code in general, so I'm going to pay for the CLI lecture and continue listening 😎

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,156

Learners

174

Reviews

348

Answers

4.9

Rating

3

Courses

I started as a community service frontend developer and am currently working as a full-stack developer for a commerce platform.

At Inflearn, I teach courses focused on building high-quality products.

  • inkyo.dev@gmail.com

Curriculum

All

80 lectures ∙ (8hr 25min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

65 reviews

4.9

65 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!

  • toito1toi님의 프로필 이미지
    toito1toi

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    The lecture was well-organized and the duration wasn't too long, so it wasn't boring while still covering various features, which was great. Due to circumstances, I had to alternate between Mac and Windows while taking the course, but the instructor kindly explained both cases, so I was able to follow along without much difficulty.

    • koy
      Instructor

      You've taken all the classes!! Thank you for leaving a review after taking the course :)

  • 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!

  • gnzmqkqh1846님의 프로필 이미지
    gnzmqkqh1846

    Reviews 4

    Average Rating 5.0

    Edited

    5

    62% enrolled

    • I enrolled to study React Native. It was my first time learning it and it helped me a lot. Thank you. Also, I noticed a 2-star rating had been entered, probably because I accidentally clicked the wrong part of the screen when moving to the next lecture..;; I quickly corrected it.

$59.40

Kyo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!