About The Chat'Inn.

Just as the name says Chat'Inn is an online chating application and since I am a web developer to be more specific a web application. Build using the frontend library react.js and CSS. Chat'Inn is one of my favourite apps built until now. This application helped me to realize several things and helped me changed my mindset.

The Idea.

The Idea of building a chat application is quite common nowadays, and there are several tutorials on YouTube having the title "Build a Chat Application with Firebase". Since I was a developer who was bad at ideating things and good at executing things, I didn't want to spend time thinking for ideas. All I wanted was to learn Firebase easily by building something.

There is no challenge in watching that random YouTube video who screen shares each and every line of code and explains it in clear words. Since the Idea was quite common, I wanted to add in some kind of challenge to make it unique as well as interesting for me.

The Challenge.

So, What did I do to make the project more interesting?. The thing which made this project uninteresting was the fact was that there were so many videos available to make this same project. But what If I forgot that and build this app using the firebase documentation only.

Benefits

• Unique Bugs
• Unique User Interface.
• Unique Code Structure and File Structure.
• Learning to Use the Documentation Properly.

Cons

• A bit time-consuming.
• Have to figure out everything by myself.

But by building the application with above-mentioned cons. In future, they could be my benefits. How?

Imagine I was in a Interview.

Interviewer: Tell me about this project of yours.

Me: Building this project Chat'Inn was a bit time-consuming but while building this application I was able to figure out many things by my own and it was a wonderful experience.

Points which were once disadvantages could be turned to benefits and can be listed as challenges which I have faced and overcome during the building phase of this application and if done well this could give me a positive impression and my eventually lead to a job.

At first, I felt the Firebase documentation like a maze and since I was new there I spend a lot of time wandering in the deepest page searching for the answer to my unique bugs. But over the course of the project, I was able to create a mind map of the documentation and easily decrypt what the heading meant by one look (maybe two).

Firebase.

I started doing this project with only one aim in mind, and that was to learn firebase no matter what. My first impression about firebase before doing this project was that Firebase was something that can be done only by the backend developers, and it would be a hard task for a frontend developer like me to do. This is the sole reason why I wasn't able to learn Firebase until then.

Just before starting to do this project. I got a glimpse of firebase from a project which I have been working on earlier and since this project (earlier one) was documented well by the client I found it easy to integrate firebase and this gave me confidence to work on this project (This one: Chat'Inn).

For the first few days after starting to work on Chat'Inn, I found it a bit difficult to work on the project by referencing the docs, as it was the first time I am doing a project by completely depending on the official documentation. But over the course of the project this changed and by the end of the project I could easily find out solutions for my unique bugs by reading the official docs.

What Did I Learn?

via GIPHY

While building this project, my main aim as already mentioned was to learn and get of glimpse of firebase. So the place where I have used firebase in this chat application are.

• Authentication: The Login as well as the SignUp functionality of the chat application has been build using firebase auth. The login used in this project is the default one with email and password authentication and the Signup consists of a username, email and a password.

• Real-Time Database: Since this is a chat-application the chat has to be managed on real-time, this I did with the help of firestore. The message which is sent by the user is stored to the database and a listener on the app is triggered when a new message has been added to the database and this updates the chat in the frontend.

• Reading Documentation: The most obvious outcome, I learned how to use official documentations well and now has the confidence to build any app by referring the official documentations which are being provided by the creators.

• State Managing in React.js: Even though I was working on React.js for the past one year. Managing state variable is still confusing after a certain point, though I will find the solution to it at the end. In the case of this project, managing the state variable for the message past was quite a confusion. It took me a while to figure out how to load the chat interface when a new message has been received in the server. But as someone said every problem has a solution, I too figured out this one.

• User Interface Design: I don't have any specific point or area to stress on in the designing part, but I am sure that I learnt something. Ya, I do remember one thing. The chat area designing was a bit tricky one as I haven't done a similar one before. But once I did complete it. The design turned out to be amazing.

One Last Paragraph

Since, You have read until this paragraph. It's time for you to experience the web app I have been talking about. Here is the link to the Inn: Chat'Inn. The Chat'Inn is presently hosted at Vercel and its codebase is available at GitHub