I Built a TikTok Clone! Here is How it Went!
I decided a few months ago that I wanted to go about beefing up my resume and get the rust off of my React skills! I thought a bit about what could I do that would help me learn, not be super difficult to start and be pretty impressive? This is when I decided it would be great to work on my frontend and UI skills and build a clone of the worlds most popular social media platform! Additionally, I thought I would avoid the conventional route and build a clone of the desktop version of the app! Here I’ll explain the process, the challenges I faced, some of the code and what I plan on doing next! Let’s code!
Technologies
I’ll get this part out of the way! I built this app using React, Firebase MaterialUI and FontAwesome! you can look more into the technologies and the code in the Repository.
The Process
I started out developing the app by creating a note and making list of the functionalities I wanted, along with the things I wanted to focus on. From there I built a list of to-dos and at that point I had a rough idea on what I wanted.
From there I coded along with this entire video, making changes here and there to fit the tools I wanted to use and the style I wanted to organize things. I really am thankful for the guys at Clever Programmer. they did a wonderful job explaining things and making it fun!
Okay, so from there I had the base of the app. It was really a glorified styled video scroller and it looked something like this…
Now I had that base functionality, I wanted to go even further and adapt this to make it like the pretty desktop version on the TikTok website.
From there I started adding the top bar, then the side bar and then created some stylized buttons! It took me awhile to figure out the styling and spacing of everything but eventually we got to something like this!
From there I needed to format the video and move all the information and icons over to the right. That is exactly what I did! Here is how Version 2.0 (latest version atm but still working on it :D) turned out!
You can check out the deployed app here!
Challenges?
I’d say over all the app was a medium challenge and I had a lot of fun making it! I would say the hardest parts of the app definitely related to CSS styling. I’d say this is more of a CSS app than a React app because I spent so much time meticulously setting up the styling of buttons and importing icons! I made hover features and spaced things out with percentages so it wouldn’t render weird on different screen sizes. However, I had so much fun learning and using CSS! I also faced the difficulty of learning how to use firebase (including the whole deployment process 😬).
All in all, I had a ton of fun and now have a nice lil TikTok clone in my portfolio! I’ll keep adding features here and there but I would love to make another clone. Maybe Disney+ or Netflix! Onto the next one! Hope you guys enjoyed and as always…
Happy Coding :D
Important Links:
