Hi everybody,
I have heard a lot about #100daysof code. Yesterday was the 100th & final day for my colleagues(@Kushagra_Kesav & @henna.s).
After seeing them making consistent progress and learning while they were doing the challenge, I am quite impressed and motivated to do the same.
Hence, I have decided that I will take the baton from here and will start my journey of 100daysofcode from today.
I will be sharing my daily updates in the form of a Medium blog summarizing the things that I have learned during the day.
Today, I learned about how to set up our React app for CRUD operations using MongoDB Realm GraphQL. CRUD is a shorthand for Create, Read, Update and Delete.
Today, I learned about how to utilize Custom Resolvers for GraphQL in MongoDB Realm to perform advanced analytics on the data stored in our database that was beyond the capabilities of default GraphQL API provided by MongoDB Realm.
While I was summarizing all the things I learned in the past 8 days I fell asleep midway because I was very tired after all the fun we had, so here I am, approximately 17(I usually post around 2-3 am) hours late to the party.
But, better late than never, here’s the summary of all the things I learned in the past 8 days.
Today I learned How to handle error 401: unauthorized request in React Query? And how we can create custom hooks to reuse the logic across different components throughout our app.
Today I learned How to create MongoDB charts and how to perform multistep calculations and data processing using an aggregation pipeline to feed them to the Charts.
I will post a consolidated blog tomorrow with the steps to
Import a Kaggle dataset into Atlas
Connect MongoDB Charts to our data
Create Charts using imported data
Create complex aggregation pipelines and feed the results to MongoDB Chart
Today I learned how to pre-process our collections’ data before feeding it to a MongoDB Chart, I also learned how we can use different Chart types like Circular Donut Charts and Histograms to make the best use of visualizations and tell a story to our audience because a picture worth a thousand words.
How to initialize a Realm instance in React Native the right way
I also gave expo another chance to build RN apps, but seems like I am gonna stick with Bare RN CLI, because the flexibility to choose any library we want is very limited in the expo environment.
I will extend my expengo web app to Mobile devices as well. Using Atlas Device Sync I will try to provide a smooth user experience by creating a RN app that will work even when the device is not connected to the internet.
I will try to finish building this app by the weekend, and hopefully, we will have a brand new blog by then.
Today I learned about how to integrate React Navigation for Stack Navigator in a React Native App. I also grouped and separated the authenticated and unauthenticated screens for a smooth user experience. I added the login screen and implemented Email Password authentication using Atlas App Services as well.
Weekend finally! Today I finished watching the second season of Panchayat, the last episode was very emotional, but overall it was so fun, really enjoyed it.
In terms of the things I learned today, I made some progress on connecting the Local Realm on React Native with MongoDB’s Atlas Device Sync. Got some errors due to Expense schema not found, I guess I may have made an incorrect configuration therefore I will be making the required changes on the MongoDB Cloud tomorrow.
Figured out it was a very silly mistake on my end, I added the schema array to the sync config options object but it has to be a key of the parent config options object. I also had to verify my schema from the Realm SDK tab from the left panel of the MongoDB App Services Dashboard.
Now I am finally able to read and sync all of my data from the MongoDB Cloud to my iOS Simulator.
I am currently struggling to find a good React Native UI library that can provide components and other UI elements out of the box so that I don’t have to write CSS on my own.
I also added the CreateExpense form and page and configured the same in ReactNavigation.