Skip to content

Latest commit

 

History

History
112 lines (89 loc) · 5.7 KB

README.md

File metadata and controls

112 lines (89 loc) · 5.7 KB
Raw

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:

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

Trello board screenshot

Login screen

Login screen screenshot

Register screen

Register screen screenshot

Rooms screen

Rooms screen screenshot

Chat screen

Chat screen screenshot

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.