MERN Chat app

• 

  The sign in page

• 

  The conversation page

Inspiration

I wanted to create a MERN app which is a messenger clone because creating a real-time conversation app is useful for understanding the structure of API. I have created a small chat application with the socket.io. However, the application had no registration functions and couldn't save user information and conversation logs.

What it does

This is a clone of Messenger, which a user can use as a chat application. The user can create an account, send messages, and create a chat group. Furthermore, the user can edit the profile information (name and image) and delete conversations. The authentication method is email and password.

How I built it

Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, and Pusher

Challenges I ran into

Using Prisma was one of the differences between my previous MERN app and this app because I simply set the MongoDB schema used by Express.js, but this time, I used Prisma to manage and update the data structure. Consequently, I was new to the syntax, and it took time to understand the code. Additionally, I configured Google authentication and GitHub authentication, but the Google one didn't work. The reason was that I couldn't complete the transition from 'Testing' to 'Production.' As a result, I decided to use only email and password as an authentication method. I will try to incorporate them into my next project.

Accomplishments that I'm proud of

I could use the different ways to set the MongoDB environment and that authentication method that I even couldn't complete because finding the different ways is always helpful to extend my knowledge and skills that it was even same things. Also, deploying the project with Vercel was one of the things I struggled with, but when I found errors I could figure them out from my previous deployment. So, I could feel I was getting used to it.

Built With

• mongodb
• next.js-13
• nextauth
• prisma
• pusher
• react
• tailwind