Creating an Avatar Community App (React Native Expo)

We will develop an avatar-based community app using React Native. You will learn the process of creating a high-quality community app that includes not only post creation but also comments/replies, likes, polls, and avatar generation.

(4.9) 70 reviews

605 learners

Level Basic

Course period Unlimited

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

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

[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 will show you how to build a high-quality community app with various features such as writing posts/comments, nested comments, likes, voting, an avatar system, multi-language settings, and push notifications.

React Native (Expo), TypeScript, react-query (tanstack query), and react-hook-form are used to develop iOS and Android apps simultaneously. To allow you to focus solely on front-end app development, we provide all product designs, including a Figma design system, as well as the backend source code. ฤ‘แปƒ phรกt triแปƒn ฤ‘แป“ng thแปi แปฉng dแปฅng iOS vร  Android. ฤแปƒ bแบกn cรณ thแปƒ tแบญp trung hoร n toร n vร o viแป‡c phรกt triแปƒn แปฉng dแปฅng front-end, chรบng tรดi cung cแบฅp tแบฅt cแบฃ cรกc thiแบฟt kแบฟ sแบฃn phแบฉm bao gแป“m hแป‡ thแป‘ng thiแบฟt kแบฟ Figma, cลฉng nhฦฐ mรฃ nguแป“n back-end.

In this course, we use React Native Expo.

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

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

This course covers Expo-based beginner to intermediate level app development.

If you want a more diverse app development experience, please check out the courses below as well!

๐Ÿ“– What is covered

  • React Native & Expo

  • Expo Router


  • TypeScript

  • React Query (Tanstack Query)


  • JWT-based Authentication


  • Common Component Development


  • Custom Hook Pattern


  • Profile/Avatar Features

  • Multilingual Settings (i18n)

  • Push Notifications

  • App Build and Deployment (EAS)


  • Write/Edit/Delete Posts

  • Write comments/replies

  • Attach poll, participate in poll

  • Image Upload

  • Like/View Count features

  • Optimistic Update

  • Infinite Scroll


  • Using SVGs

  • Applying fonts

  • Handling dates with dayjs

  • Handling forms with React Hook Form




๐Ÿ”ฅ Development Tech Stack

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

I will teach you 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 manage dates effortlessly with dayjs, and how to easily implement multi-language support using i18n.

โšก๏ธ Key Features Implemented

Sign up/Login

Feed Infinite Scroll/Search

Post Creation/Poll Attachment

Likes/Comments/Replies + Push Notifications

Profile/Avatar Customization

Settings/Multilingual

โš  Please check the curriculum for detailed implementation details!

โญ๏ธ What makes this course different

1. Simultaneous Android and iOS Development


We will develop for both platforms simultaneously, creating reusable common components that work across various platforms and screens. We will also cover the differences between platforms and how to address them.

2. Figma Design System Provided

No need to worry about design! We provide the complete product design, including colors, components, screens, and images.

3. High-focus structure, source code provided for each lesson

  • We have reduced unnecessary content and focused only on the essentials, creating a structure with an average of 7.5 minutes and a maximum of 16 minutes per lesson to enhance learning efficiency and focus.

  • We provide not only the completed backend source code but also the source code for every lesson from the beginning to the end of the project, identical to what is shown in the classes. Please check the attached materials for each lesson.

โ— Notes

  • The lecture will be conducted using ReactNative Expo.


  • This course can be taken by both Windows and Mac users, and we will proceed while verifying operation on both Android and iOS. (A Mac environment is required for iOS app development)


  • This course is produced in 3840โ€Šร—โ€Š2160 (4K) resolution, so you can enjoy better image quality by selecting a higher resolution.

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

๐Ÿ™‹โ€โ™‚ Q&A

Q. Who is the target audience for this course?

  • Prior knowledge of React Native is not required, but the course is intended for those with knowledge of JavaScript ES6 and some experience with React.

Q. Is TypeScript required?

  • In React Native, projects are set up with TypeScript by default, so the lectures are conducted in TypeScript. However, since complex types are not used, knowledge of TypeScript is not mandatory.

Recommended for
these people

Who is this course right for?

  • Those who have learned the basics of JavaScript/React

  • Those who want to create a high-quality community app, not just a simple bulletin board.

Need to know before starting?

  • Basic knowledge of JavaScript is required. You must be familiar with ES6 syntax.

  • You need to be familiar with basic React Hooks (useState, useEffect).

Hello
This is Kyo

2,259

Learners

183

Reviews

351

Answers

4.9

Rating

4

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 provide lectures focused on creating high-quality products.

 

  • โœ‰inkyo.dev@gmail.com

More

Curriculum

All

80 lectures โˆ™ (8hr 25min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

70 reviews

4.9

70 reviews

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

  • zheros9303๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    zheros9303

    Reviews 18

    โˆ™

    Average Rating 4.9

    5

    30% enrolled

    It was very helpful to go through everything thoroughly, from the explanation of basic concepts to the actual refactoring process.

    • koy
      Instructor

      Thank you for the great course review ๐Ÿ‘๐Ÿ‘

  • 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 :)

  • 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 ๐Ÿ‘

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

Similar courses

Explore other courses in the same field!