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) 수강평 66개

강의소개.상단개요.수강생.short

난이도 초급

수강기한 무제한

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

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.9

5.0

임용준

34% 수강 후 작성

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% 수강 후 작성

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% 수강 후 작성

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 😎

강의상세_배울수있는것_타이틀

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

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • Someone who has studied JavaScript/React basics

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

선수 지식, 필요할까요?

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

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

강의소개.지공자소개

2,167

수강생

175

수강평

348

답변

4.9

강의 평점

3

강의_other

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

더보기

커리큘럼

전체

80개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

해당 강의에서 제공: [object Object]
강의 게시일: 
마지막 업데이트일: 

수강평

전체

66개

4.9

66개의 수강평

  • toito1toi님의 프로필 이미지
    toito1toi

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    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
      지식공유자

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

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    수강평 3

    평균 평점 5.0

    수정됨

    5

    47% 수강 후 작성

    ✔️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
      지식공유자

      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
      지식공유자

      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

    수강평 2

    평균 평점 5.0

    5

    34% 수강 후 작성

    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
      지식공유자

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

  • chotg님의 프로필 이미지
    chotg

    수강평 1

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    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
      지식공유자

      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

    수강평 4

    평균 평점 5.0

    수정됨

    5

    62% 수강 후 작성

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

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

강의상세.할인문구

$41.80

29%

$59.40