What I learnt building a Twitter clone in React + Firebase

Building projects is an important part of learning programming for me because it allows me to apply the theories and concepts I have learnt in a practical way. While it is important to understand the underlying principles of programming, it isn't until you get your hands dirty and start building something that you truly begin to understand how everything fits together. By working on a project, you can gain a deeper understanding of the material and learn new skills that you can apply in future projects.

Additionally, building projects can help you develop problem-solving skills and critical thinking abilities, which are essential for success as a programmer. Overall, building projects is a crucial part of the learning process for anyone who wants to become proficient in programming.

For this reason and as part of The Odin Project, I decided to build a Twitter clone in React and Firebase. This article is a summary of what I learned along the way.

Lesson 1 - Planning is important

As I worked on building a Twitter clone, I learned the importance of carefully planning and organizing my data structures and components. I initially started out by just jumping in and coding, but I quickly realized that this was not an effective approach.

I was constantly running into issues and roadblocks, and it was difficult to make changes and improvements to my code. Once I started taking the time to carefully plan out my data structures and components, everything became much easier.

I went about this by starting with the different components I would need to build. For example, I broke components down into smaller components, such as a Tweet component, which would be made up of a TweetHeader component and a TweetBody component.

  1. Tweet - this was broken down into smaller components like icons
  2. TweetBox - the component to input a tweet
  3. Menu - the menu that appears when you click on the avatar
  4. etc etc

Once I mapped out the front end components, I then moved my attention to the backend. I used Firebase which is a cloud-based NoSQL database. I started by creating a collection for users, which would store the user's name, email, and avatar. I then created a collection for tweets, which would store the tweet's text, the user who created the tweet, and the timestamp of when the tweet was created.

I didn't need to be exact here, but having a rough idea of the data structure is important. For example, I knew I'd have a Collection in Firestore for Users and each User would be an Object storing data in key value pairs.

It's temping to just start building your project without planning it, but this is a mistake. If you don't plan your project, you will end up wasting time and making mistakes. Planning your project will help you to avoid these problems.

A tool like Excalidraw can be useful for scoping the tech stack for a project, as it allows you to visually map out the different components and their relationships to one another. This can help you gain a better understanding of the project and identify potential areas for optimization or improvement. Here's an example User object.

bannerURL:"https://firebasestorage.googleapis.com/v0/",
bio: "A modern runtime for JavaScript and TypeScript https://deno.land #deno #denoland",
creationTime: "Mon, 07 Nov 2022 23:44:40 GMT",
displayName: "deno",
email: "test8@test.com",
location: "The Interwebs",
name: "Deno",
uid: "8N68KkzpIzcCVsuZHX8KJbaNIun1",