강의

멘토링

커뮤니티

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

528 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,054

Learners

158

Reviews

336

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

57 reviews

4.9

57 reviews

  • 주현님의 프로필 이미지
    주현

    Reviews 3

    Average Rating 5.0

    Edited

    5

    47% enrolled

    ✔️강의를 선택한 이유 디블리셔로 프론트쪽 공부하던 중 프로덕트(앱) 출시가 욕심이 났고 1인 개발자로 거듭나고 싶었습니다..! 언어 선택 고민하다가 리액트를 써봤어서(초급이지만) 리액트 네이티브로 만들기로 결정했습니다 ㅎㅎ 그렇게 네이티브 강의를 찾아 삼만리하던중 인프런에 새로운 강의 오픈! 할인 이벤트를 보고 수강을 결정했습니다. 리액트 네이티브 강의가 별로 없는데 강의 오픈해주셔서 감사합니다.😊 ✔️강의 장점 expo로 앱 개발 하는 가장 편하고 쉬운 방법을 알려주십니다. 편리한 라이브러리 사용법과 어떨때 이런 라이브러리를 쓰면 좋을지 잘 알려주십니다.! 프론트 뿐 아니라 백엔드 소스 제공을 해주셔서 실제로 디비 연동까지 확인해볼 수 있습니다. 강의를 수강하면 완전한 프로덕트를 볼 수 있을거 같아요..! ✔️강의를 추천하는 분 백엔드 프론트엔드에 대한 기본 지식이 있고 expo로 간단히 앱 만들어보실 분께 추천드립니다. 다른곳에서 네이티브 강의들을때 보다 확실히 expo가 엄청 간단히 앱을 만들 수 있더라구요..! But...!! 전 백엔드에 무지하고 리액트 초급에 개발자가 아니라 그런지...서버 연동부분부터 (5챕터부터) 엄청 버벅거리기 시작...하루종일 붙잡아도 해결이 되지 않아 우선 중도하차합니다😭 가끔 밥아저씨처럼 뚝딱 되는거 같은데 저는 이해가 어렵네요 ㅠㅠ... 조금 더 초급 버전의 여러 강의를 듣고 expo로 실제 앱을 만들어볼때 다시 듣기로 했습니다. 하지만 이건 제가 똥멍충이라 그런거고...강의 자체는 추천 드립니다!!👍

    • Kyo
      Instructor

      상세한 수강 후기 남겨주셔서 감사합니다!

    • 강의 듣고 개인 앱 출시까지 완료 했습니다~ expo로 만드느라 제약이 좀 많고 라이브러리 충돌도 나긴 했지만 쉽게 만들 수 있는 도구는 맞습니다 만든 앱은 https://play.google.com/store/apps/details?id=com.badanang.CampWeather 입니다 Kyo님 덕분에 디자이너인데두 앱을 출시 할 수 있어서 너무 감사합니다 ㅠㅠ!

    • Kyo
      Instructor

      와 디자이너이신데 출시까지하셨다니 대단하시네요!! 저도 사용해볼게요! 어려움이 있으셨지만 끝까지 강의 수강해주셔서 감사드립니다 👍

  • ksw님의 프로필 이미지
    ksw

    Reviews 2

    Average Rating 5.0

    5

    34% enrolled

    현재 계속해서 강의듣고, 배우는 중인 비전공 수강자인데요,,, 솔직히 따라하면서 정말 많은걸 배우고 있어요... 더욱이 막히는 부분이 있으면 바로바로 피드백주시는 강사님께 너무 존경스러울정도로 감사합니다... 계속 배우고, 정진하겠습니다... 비전공 1인개발자를 꿈꾸며,,,ㅠㅠ

    • Kyo
      Instructor

      좋은 수강후기 감사드립니다. 응원하겠습니다!

  • 사당동님의 프로필 이미지
    사당동

    Reviews 1

    Average Rating 5.0

    Edited

    5

    100% enrolled

    회사에서 급하게 RN을 사용해야 하는 상황이었고, 마침 강의가 30% 할인 중이라 미리보기 강의를 들어봤습니다. 강사님이 코드를 신경 쓰시는 분이라는 느낌이 들어 수강을 결정했습니다. 공식 문서를 참고하면서 개발할 수도 있지만, 좀 빠르게 앱은 어떤식으로 개발하는지 궁금하였습니다. 총 3일 동안 강의를 완강했습니다. 강의 장점 배울 것이 정말 많습니다. 단순히 기능 구현에 그치지 않고, 강사님이 의도적으로 다양한 기능을 추가하면서 학습할 수 있도록 구성되어 있습니다. 실무에서 바로 활용할 수 있는 기술들을 다룹니다. (Form 다루는 방법 및 유효성 검사, react-query 사용법, 컴포넌트 분리 및 재사용성 고려, 일관성 있는 코드 스타일 등) 프로덕트 개발 과정을 직접 경험할 수 있습니다. 단순한 예제 수준이 아니라, 실무에서의 개발 흐름을 익힐 수 있었습니다. 컷 편집으로 불필요한 부분을 줄여 좋았습니다. 강의에서 제공하는 코드를 배우고, 그리고 코드를 개선하면서 자기것으로 만들면 분명 큰 도움이 될 것이라고 생각합니다. 추천 대상 React와 CSS에 대한 기본적인 이해가 있는 분 실전 개발 경험을 원하는 분 사수 없이 실무를 익혀야 하는 2년 차 이하 개발자 또는 취업 준비생 React 경험이 전혀 없는 분들에게는 다소 어려울 수도 있으므로, 기본 개념을 익힌 후 수강하는 것을 추천합니다.

    • Kyo
      Instructor

      빠르게 완강하셨는데 많은 도움이 된 것 같아서 좋네요. 기능들과 컴포넌트부터 코드 일관성, 심지어 편집까지 제가 많은 시간 동안 신경썼던 세세한 부분들을 알아주셔서 놀랐습니다. 좋은 수강평 남겨주셔서 감사합니다!

  • FD님의 프로필 이미지
    FD

    Reviews 5

    Average Rating 4.8

    5

    61% enrolled

    많이 재밌습니다! 최고!

    • Kyo
      Instructor

      감사합니다! 재미있게 봐주셨다니 힘이 됩니다 :)

  • lgs4002님의 프로필 이미지
    lgs4002

    Reviews 14

    Average Rating 4.3

    5

    96% enrolled

    재밌게 잘봤습니다.

    • Kyo
      Instructor

      재밌게보셨다니 좋네요. 수강 후기 감사합니다!

Limited time deal ends in 02:26:18

$57,750.00

25%

$59.40

Kyo's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!