About me

I am a fullstack developer and since we are living in an age where something new comes everyday I thrive to work on it.

What is Sykiks ?

Sykiks - Live Readings from Vetted Psychics.

As you can understand from the title, Sykiks is a platform which connects users (Clients) who want to know about their future with users (Psychics) who can foresee the future.

A client can buy credits from paypal, send offline message or have live text based sessions with their Psychics of choosing.

Tech stack

1. React - React is an amazing ui framework, since everything is a component. There is an easier learning curve.
2. Firebase
   2.1. Firebase realtime database - Since Sykiks expected to be realtime, it was an easy desicion. From listing active online users to have chats or even send messages.
   2.2. Cloud functions - from making calls http to paypal , to having triggers to handle user's account balance/transactions.
   2.3. Firebase hosting - Easier to deploy and manage the website deployments
   2.4. Google Cloud storage - Saving user images and audio files.
3. Twitter bootstrap (v4) - To make Sykiks responsive and have ease of theming.
4. Redux - For state management
5. Node js - Firebase functions are nothing but node js
6. Electron js - To build and develop desktop application version of Sykiks for both Windows and Mac OS X

The process of building Sykiks

We started with using the seed from generator-react-firebase

1. generator-react-firebase has been made specially for material-ui but react's material-ui on its own is not out of the box responsive. So we removed material-ui and plugged twitter bootstrap.
2. We also incorporated reactstrap because as it says "Easy to use React Bootstrap 4 components"
3. React-redux-firebase acted like global state for our database firebase queries, hence we barely needed to write our own redux store.
4. Then we used react router version 3 for route managedment which came out of the box with the seed.
5. We have used http based cloud functions for building rest apis for adding credits from paypal.
6. We have used database triggers based cloud functions for the following
   6.1 To update reviews
   6.2 To update Chat Requests
   6.3 To update Chat sessions
   6.4 To update translations
   6.5 To update Account balance
   6.6 To send messages
   6.7 To handle blocked users for messages or chat requests
   6.8 To send notification from cloud messages for messages and chat requests.
7. We have also used storage based cloud functions to resize user's avatars.
8. We have also used the browser's media-recorder to record, save and send audio messages.
9. We used electronjs's webview to develop a simple desktop version of Sykiks. This with firebase cloud messaging was used to steal the focus incase there were chat requests.
10. A special mention to recompose module which introduced a better way of writing react classes. We always had an enhancer for every component we wrote which was a higher-order component. So basically the template and controller are always split and easier to manage.

Challenges I faced

1. As much as firebase is realtime, the server time is not accurate as per a users timezone. Fortunately it does tell you the offset between servertime and the users timezone, which you can use to show the correct time as per the user's timezone.
2. Whenever you write a cloud function for a database trigger, there are chances you will write on the a similar path of the trigger you need to be aware of this and handle such cases so that future processing for already processed paths are avoided.
3. As simple as image uploading sounds images took almost a week. Images needed to be resized not only that the progress bar needed to be updated and a user should see his resized avatar after resizing.
   We were able to set the new users avatar path post resizing from cloud functions, which then got reflected for the user.
4. Notifications and sounds are a key component to alert a psychic incase he receives a chat request, but we soon understood there were a lot of problems some which are still unsolved.
   4.1 Browsers tend to sleep the tabs inacse left idle, hence you have to pin the tab or we ended up with a desktop application which steals focus incase a request occurs.
   4.2 Not all browsers support service workers. And safari supports its own version of push notifications which needs apple certificates.
   4.3 Auto playing of sounds which is very much needed is barred by safari and chrome may also have this setting.
5. Max Os X would sleep the desktop application after certain time if its idle, which caused problems in notifications.
6. While handling triggers always add a check that the said path was processed. We learned the hard way that when restoring the database. Firebase would obviously rerun the triggers for the restored data which caused a lot of problems. And firebase doesn't have a direct way to disable the cloud functions.

Key learnings

1. We started with firebase's realtime database but we wished to jump on firestore. The realtime database needs a lot of hacks to save relational data.
   We can still use populates of react-redux-firebase but it still has its own drawbacks, eg: the child entries are not updated in realtime. And firestore has a better way of saving relational data.
2. Reacts Material ui is not of the box responsive
3. Recompose changed the way we wrote react code. For every route/component regardless it was stateless or with state. It made our codebase much more manageable.
4. Firebase database is realtime but in cloud functions attimes extra care need to be taken, to avoid recursion writes.
5. You definitely need a paid plan of firebase if you need to make external api calls from cloud functions.
6. React with redux is amazing and feels mature, since I came from Angular version 1, the lack of state was a huge issue which redux solves and react's component based rendering feels like a blessing.
7. React unlike other ui frameworks is much stable and changes less with times in comparison with Angular.
8. Firebase is amazing to host and deploy your code but there is a learning curve in all aspects.

Final thoughts and next steps

We plan to add video chat and already there is a react native version of the app using expo , which I plan to explain in a later post.

I do plan to post almost every component like

1. How images are uploaded and resized from react to firebase/ cloud storage.
2. How to add support for a payment gateway in react native if there is no native support
3. How to upload audio onto cloud storage

Links:

https://github.com/prescottprue/generator-react-firebase
https://reactstrap.github.io/
http://react-redux-firebase.com
https://github.com/giridharangm/react-media-recorder/
https://github.com/acdlite/recompose