The Journey of #100DaysOfCode (@sourabhbagrecha)

About the Community The Treehouse
#1

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.

image
image3842×2162 460 KB

Wish me luck :crossed_fingers:.

Regards,
Sourabh Bagrecha,
LinkedIn | Twitter

8 Likes
#2

#Day1 of #100daysofcode

Today, I learned how to configure Email Password Authentication on MongoDB Realm.

6 Likes
#3

#Day2 of #100daysofcode

Today, I learned about how to implement Full-Stack Authentication in a React App using MongoDB Realm without worrying about servers at all.

4 Likes
#4

#Day3 of #100daysofcode

Today, I learned about how to Configure MongoDB Realm to perform CRUD operations in our app using GraphQL.

4 Likes
#5

#Day4 of #100daysofcode

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.

4 Likes
#6

#Day5 of #100daysofcode

Today, I learned about how to set up our React app to perform Update operations using MongoDB Realm GraphQL.

4 Likes
#7

#Day6 of #100daysofcode

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.

4 Likes
#8

#Day7 of #100daysofcode

Today, I learned about how to implement an analytics dashboard in React.js using the data we fetched from MongoDB Realm GraphQL.

4 Likes
#9

#Day8 of #100daysofcode

Today, I learned about how to deploy/host a Website, React App, or any Single Page Application using MongoDB Realm.

3 Likes
#10

#Day9 of #100daysofcode

Yesterday, we had a MongoDB User Group hosted at our MongoDB India Office.

e0162670-21a1-4cd9-adc2-c47bef7365d5
e0162670-21a1-4cd9-adc2-c47bef7365d51200×1600 331 KB

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.

3 Likes
#11

No worries, you are initiator of the party.
Nevertheless, this is helpful.

2 Likes
#12

#Day10 of #100daysofcode

Today, I learned how to integrate React Query in a GraphQL-based React App.

2 Likes
#13

#Day11 of #100daysofcode

Today, I learned How to use React Query to perform Create, Edit, and Delete Mutation for GraphQL based Web Apps.

3 Likes
#14

#Day12 of #100daysofcode

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.

2 Likes
#15

#Day13 of #100daysofcode

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
2 Likes
#16

#Day14 of #100daysofcode

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.

4 Likes
#17

#Day15 of #100daysofcode

Today I learned about:

  • How to initialize a React App from the bare React Native CLI
  • How to enable Atlas Device Sync
  • 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.

2 Likes
#18

#Day16 of #100daysofcode

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.

2 Likes
#19

#Day17 of #100daysofcode

Weekend :rocket: 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.

2 Likes
#21

#Day18 of #100daysofcode

Today I finally fixed the following error:

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.

2 Likes