WhatsLeft is a messaging app similar to WhatsApp and Signal made to chat with your friends and family! WhatsLeft was made using the React Native framework in (Expo) and is tailored to IOS and Android only (WhatsLeft is not available on web).
The development stack used to make this project was:
- React Native for the frontend
- Native Wind for CSS styling
- NativeWind for writing easier CSS
- Expo for building environment, bundling TS & routing
- Clerk for user authentication
- Socket.io for websockets and realtime messaging
- MongoDB for user database
- MinIO for High-Performance Object Storage system (image upload)
- ExpressJS for backend framework
- NodeJS for running backend and frontend servers in dev
- Github for version control
- I learned the basics HTTP request and response between my frontend and backend(express and node)
- I learned how to work with websockets and realtime messaging(socket.io)
- I learned how to work with a non-relational document database (MongoDB)
- I learned how file based routing works (expo router)
- I learned the basics of how to turn base64 raw image data into an array buffer
- I learned the basics of asynchronous javascript mostly for fetching data
- I learned how to use javascripts in built hashmap functionality for the first time
and I obviously learned much more but this is what really stuck out while making this project!
The greatest challenge I ran into was when trying to do image upload to my object storage system I had to convert the images raw base64 data into an octet-binary array buffer so that it could be properly uploaded to minIO. After that I then had to make sure it gets a full non corrupted image array buffer that can be uploaded to minIO, wait for the URL response from minIO and then store the minIO URL inside mongoDB without interupion! which is why if you look at the image upload test video it takes quite a bit of time.