Facebook Clone

Inspiration

Our team decided to work on this project because we wanted a way for people to communicate with their family and close ones in the time of this pandemic. During this pandemic, online communication has been the norm for everyone around the world. Therefore, we decided to work on this application as a way to enhance the communication exerience of users globally. We chose Facebook because it has been out of trend for the youth lately with applications like Instagram, Snapchat and Reddit being more eye-catching for them. Since we already knew that we wanted to make this app more enticing for the youth, we conducted surveys to get feedbacak from our peers on how we can make facebook more "in-trend". By cloning a well-established application like Facebook, we were able to undersstand the business logic and certain functionalities that we have previously not encountered. We were also able to understand the different factors that affects the user-experience

What it does

Our facebook clone allows users to make text posts, image posts, and video posts. This gives users the opportunity to share interesting things happening in their lives or interesting things around them. The app also allows users to search up other people they may know. Our facebook clone allows users to add other users to connect with them to be able to look at the things that they share on their feed. Adding friends also allow them to chat with each other and even video call each other if they chose to. We also have a privacy setting if the user wants to have a more private experience.

How we built it

We built it as a PERN Stack -Postgresql Database

Express backend
ReactJS Framework
NodeJS environment

We also used these different libraries

DayJs
React-Hook-Form
Material UI
React-Query
React Helmet
Passport
Socket-IO
Framer-Motion

Challenges we ran into

Mervyn I am usually a slow learner and I have to read a lot and watch a lot of videos in order to understand something. As for this Facebook clone, I have to learn a whole new language in the time of a month and provide a half decent project at the end of the month. In the first 2 weeks, I have been facing challenges as to how to even start on the project. After asking for help from my peers and lecturers, I am able to understand what I have to do and start on my project. In the last few days of the project, we faced an unexpected yet expected challenge with one of our teammates not pushing his code for the entire 1 month of our project duration.

Ralph This was actually the first time that I had used React in an app and I would say that it was quite a challenge at the start. The syntax firstly was quite new to me and I had to get used to it. Aside from learning React, I faced a challenge with the friend requests function because our database was not really well designed. Getting friendship statuses and the friend requests sent was quite a challenge. Another major challenge was trying to merge our code with one of our teammates which brought up quite a few issues and problems with the functionalities of our app. In the end, the challenges were overcome and our app is built.

Medhun One of the biggest challenges I faced was learning the React Framework. For CA1, my application was solely built on html, css and js. Therefore, I felt that making the jump to React was going to be tough. However, with some practice and understanding and a lot of youtube videos, I was able to understand and grasp the concept of React and was able to implement it to the application. One of the functions assigned to me was the search function. During the CA1 presentation, the lecturer had stated that there were students who had built a fully working search with autocomplete and other additions which made me slightly worried but in the end I feel that I was able to complete the function fully while also learning a new Javascript Library. Another challenge my teammates and I faced was when one of my teammate's code was causing merge conflicts towards the end of the assignment. This was the toughest challenge to overcome as the functions that the particular teammate was supposed to do were not able to be integrated into our application.

Yiping One of the major hurdles I faced when coming into this project was learning how to use React. Our team had actually changed projects from the previous term and it was quite disorientating to suddenly start working on an unfamiliar code using a new language, it took me awhile to read through and understand the code. However, I slowly managed to understand React with the help of my team members and in the end we were able to complete most of the features we planned to implement.

Kavin The biggest challenge for me by far was time management. I had to juggle my other modules including one of my electives which had a lot of requirements. Because of that I did not have much time left for this project. I had initially planned to add a lot of new features such as google sign in. I had already read up on it but I did not have time to add it due to my elective taking up my time. My existing features also had minor bugs mostly design related that I didn’t have time to fix despite knowing how to do so. Facebook is a huge project and there are a lot of features that I could potentially add. I am very interested in this idea and I would like to work on it further in my free time by fixing bugs and adding the features I initially wanted.

Brennan The hardest part was learning to use all of react's hooks as well as learning how to deal with asynchronous programming. I also had to adapt to react's different component functions and had to learn all I could about them to optimally use them. Merging the code also brought many issues as my lack of frequent commits and merges lead to several merge conflicts. Dealing with react forms also posed some difficulty but once I understood how to process user input it became easier. Checking if components were in the visible DOM also posed a challenge but after lots of research I found a few methods that were easy to implement.

Accomplishments that we're proud of

How we worked well with each other
Game animation
Socket.IO messaging
Video calls
Notifications
Markdown
Framer motion
Many more...

What we learned

One key learning point we had as a team is working together even though we may have our differences. This is very useful in the future where we will encounter even more people who may have different opinions and approaches as us. We also learned to adapt quickly to new things as most of us in the group have not actually worked with React before. This allows us to pick up new skills and techniques that we may use in other projects. Lastly, I think that being focused on the goal and the targets we have set without being distracted by other things such as other projects we may have and managing our time wisely is an important takeaway.