Days 44–78 of the #100Daysofcode hosted by Jessica Gross
Hey everyone I know it has been a while since I have last been able to post an update on the challenge but I have been making significant progress on my React development skills and more. I have for the past month been working on a variety of not only my technical skills with React but also with my communication skills as I have been apart of great pair programming sessions with Amaanath Mumtaz who is a beast of a developer for Clever Programmer.
And I also have been doing lots of tutoring teaching people all about the fundamentals of web development ranging from basic HTML to high level React development and backend development utilizing tools such as Firebase and MongoDB. And I have been teaching on the platform Wyzant which is a great place to get started on! I have done over 40 hours of Tutoring so far and it all has been great talking to other developers and working together. It has been a great experience overall. But on the other hand, when it comes to the Technical side of my learning, I have been working on a couple of big projects utilizing React and other key technologies.
One of the projects I have worked on is a Netflix Clone, which I worked on with Amaanath Mumtaz, and also a Twitter Clone which I have worked on with a great Student I have helped tutor. The Netflix Clone utilizes the MovieDB API for all of my movie/show data, which I pair with Axios to fetch my data on the front end and from there, I set up the components to create the Netflix layout feel. And you can click on each movie/show which will display a modal with the movie description and above it a trailer for the movie/show. Although there is a bit of a buggy issue with the react player dependency for the video which I will be patching soon, the site overall is great and gives off the Netflix vibe. I will be linking the site at the end so you can check it out:)
Another one of the many projects I have been working on is the Twitter Clone. So this project uses the Firebase Twitter Authorization provider which allows me to set up the Twitter Login as the first page to be seen when opening the site. And I also used react-router DOM to set up different routes for the pages. So once the user logs in, it takes them to the home page. And it shows on top a navbar with links which will be updated to be functional soon once I get the components set up for them and also on the far right of the navbar is the logout button which will take you back to the login page when clicked. The rest of the page below consists of two sections with the left side containing the user Twitter profile page set up like how Twitter has it set up for user Profiles and the right side contains the users most recent Tweets. I was able to display the tweets using the react Twitter widget package where I used the Tweet component to format them into the nice Tweet look. And then click tweet buttons under each tweet allows you to send the tweet info. But I will be remodeling the site to have more of the main Twitter Page look.
And how I fetched the data for the user is a lot more complicated than with for example fetching the MovidDB data for the Netflix Clone. I needed to set up a backend for the Twitter clone so that I could enable the Allow-Access-Control-Origin header to give my site fully granted access to the Twitter API user data. And I set up the backend using Firebase cloud functions as it allows for setting up the backend with more ease. I didn’t have to create a separate app for just the backend, cloud functions allow you to set up both the backend inside of one application which also consists of the frontend. And I used to express for setting up my middleware and routes for the requests. Then I also installed the Twit package which allowed me to pass in my secret Twitter developer keys which was the next step after configuring the headers and then I made my get requests to a few Twitter v1 endpoints which gave me the user information and their tweets. Although the v2 endpoints are starting to roll out, the v2 endpoints didn’t contain what I needed to get the user data and their tweets individually. So I stuck with the v1 endpoints. And I will also be linking the site at the bottom for you to check out!
I have also been working on some other amazing but secret side projects for personal development. But soon, I will be able to reveal a few of them:)
And here are the links to the live sites:
Netflix Clone: https://netflix-clone-with-amaanath.web.app/
Twitter Clone: https://example-b5fe3.web.app
To checkout Wyzant: https://www.wyzant.com/
I will be uploading them to GitHub soon!
Thank you so much for taking the time to see my update on the challenge so far! I know it has been a little while but I will be starting to upload again and provide you with amazing React content and more! See you again soon with another update of the #100Daysofcode challenge hosted by Jessica Gross.
#100Daysofcode #cleverprogrammer #days44–78 #React #Firebase #FullStackDeveloper #webdesign #Twitter #Netflix #Wyzant
