Chat Native GraphQL

Table of contents

1. Installation
2. Technologies
3. The task
4. Screenshots
5. Possibilities
6. Summary

Installation

The application uses Expo

yarn install

Run:

expo start

Technologies

• TypeScript
• Expo
• React Native
• React Navigation
• GraphQL
• Apollo
• Styled Components
• React Native SVG
• React Native Gifted Chat
• Expo Google Fonts (Poppins)

The task

The overview

The task was to build a simple chat to communicate with the Team within 3 days (72 hours).

I organized my work using Trello and tested the application using Expo on Android and Web.

The application had to be built using React Native and GraphQL.

I was pretty new to GraphQL as I only had the chance to use it once before.

Same with React Native as I've made only a single project using it.

Challenges:

• Using React Native and GraphQL, which I may not be familiar with
• Transfering Figma mockup to working views (styling)
• Communication (asking about the things that are not clear)
• Dealing with documentation and requirements written in English
• A list with all the rooms
• A chat that opens when a user chooses a room
• A user is able to send and receive messages in the chat

Optional:

• Implementing Auth screens (Login and Register)
• Client side Auth using GraphQL
• GraphQL Subscriptions using Apollo, Absinthe and Phoenix (AsyncPhoenixSocket)

Things that I do not build:

• Login and sign up, I'm provided with a token to authenticate each request to the backend
• Error handling

Screenshots

Trello board

Login screen

Register screen

Rooms screen

Chat screen

Possibilities

I tried to implement most of the things by myself, but should have probably used 3rd party libraries. I left the comments in the code to display my thought process.

Here are a few things that I could improve with more time:

• Better validation (ex. io-ts, zod, yup, joi)
• Better form handling (ex. RHF)
• Better API design using Context (cleaner API design)
• Optimizing state usage and rerenders
• Using .env for credentials and config (API urls etc.)
• Installing @types as a dev-dependency
• Better reusable components following Figma mockup Style Guide (noticed it nearly at the end of time)
• Improving UX with toasts and loading indicators

Difficulties

• Typesafety useNavigation and useRoute
• Styling difference web/native
• FlatList renderItem Typesafety with styled-components
• SVG conversion (used React-SVGR)
• Design was meant for larger screens (tested on smaller mobile device)
• KeyboardAvoidingView behaviour
• Styled Components unit warning (either an Expo error or SC warnings)
• Styled Components // diff /**/ comment bugs
• GiftedChat docs could have been better and more precise (Rollback on input styling)
• Weird GiftedChat behaviour: message display order, not detecting new message on Expo, bug with dates (ex. issue)
• Not working GraphQL subscriptions (probably splitLink issue, because normal queries didn't execute at all)

The codebase coud use some more refactor and clean up but I was out of time.

Summary

In summary I enjoyed the project a lot. Although it was challenging to complete within 3 days.

I got the core functionality working (with Auth) after 1.5 day. The rest of the time I've spent taking care of little things and stylings.

Surprisingly I was the most productive when implementing Auth screens and logic without the app running. After starting the app most of the things worked like a charm (had to make some minor fixes).

Am I satisfied with the end result?

Yes, mostly. But I'm pretty sure I can do better and there are a lot of things to polish.

But I am aware that the most of these technologies were quite new to me and I can improve.