Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sashenjayathilaka/imessage-clone

Realtime Chat App (iMessage Clone) with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript, NextAuth.js, Google Authentication, Chakra UI, (1-1 Messaging, Real Time Messaging, Creating chat conversation, joining chat conversation, Leaving chat conversation)
https://github.com/sashenjayathilaka/imessage-clone

apollo-client apollo-server body-parser chakra-ui-react cors dotenv express framer-motion graphql graphql-subscriptions graphql-tag graphql-tools graphql-ws lodash-merge next-auth-adapter next-js prisma react-hot-toast react-js typescript

Last synced: about 12 hours ago
JSON representation

Realtime Chat App (iMessage Clone) with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript, NextAuth.js, Google Authentication, Chakra UI, (1-1 Messaging, Real Time Messaging, Creating chat conversation, joining chat conversation, Leaving chat conversation)

Awesome Lists containing this project

README 

        



  logo

  

  
iMessage Clone



  


Realtime Chat App (iMessage Clone) with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript, NextAuth.js, Google Authentication, Chakra UI, (1-1 Messaging, Real Time Messaging, Creating chat conversation, joining chat conversation, Leaving chat conversation).

  


  

  



![](https://img.shields.io/badge/Maintained-Yes-indigo)

![](https://img.shields.io/github/forks/SashenJayathilaka/iMessage-Clone.svg)

![](https://img.shields.io/github/stars/SashenJayathilaka/iMessage-Clone.svg)

![](https://img.shields.io/github/issues/SashenJayathilaka/iMessage-Clone)

![](https://img.shields.io/github/last-commit/SashenJayathilaka/iMessage-Clone)





    View Demo

   · 

    Documentation

   · 

    Report Bug

   · 

    Request Feature

  









## :notebook_with_decorative_cover: Table of Contents



- [About the Project](#star2-about-the-project)

  - [Screenshots](#camera-screenshots)

  - [Tech Stack](#space_invader-tech-stack)

  - [Environment Variables](#key-environment-variables)

- [Getting Started](#toolbox-getting-started)

  - [Prerequisites](#bangbang-prerequisites)

  - [Installation](#gear-installation)

  - [Run Locally](#running-run-locally)

  - [Deployment](#triangular_flag_on_post-deployment)

- [Contact](#handshake-contact)



## :star2: About the Project



### :camera: Screenshots



- Google Authentication using Next Auth





image








- Searching & Creating chat conversation





  image








- 1-1 Messaging, Real Time Messaging & joining chat conversation





  image








- 1-1 Messaging, Real Time Messaging & joining chat conversation





  image








- Leaving chat conversation





  image




![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)

![forthebadge](https://forthebadge.com/images/badges/for-you.svg)

![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)



### :space_invader: Tech Stack



  Client

  



Backend

  







Facebook

Instagram

Instagram

Instagram

Instagram

Instagram

Instagram

Instagram

Instagram



## :toolbox: Getting Started



### :bangbang: Prerequisites



- Sign up for a MongoDB account HERE

- Install Node JS in your computer HERE



### :key: Environment Variables



To run this project, you will need to add the following environment variables to your .env file



##### Frontend



`NEXTAUTH_URL`



`NEXTAUTH_SECRET`



`GOOGLE_CLIENT_ID`



`GOOGLE_CLIENT_SECRET`



`NODE_ENV`



`MONGODB_URI`



`NEXT_PUBLIC_BASE_URL`



##### Backend



`CLIENT_ORIGIN`



`MONGODB_URI`



This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).



### :gear: Installation



![](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![](https://img.shields.io/badge/next.js-20232A?style=for-the-badge&logo=next.js&logoColor=61DAFB)



Install my-project with npm



```

npx create-next-app@latest --ts my-project

```



```

cd my-project

```



Install dependencies



### In your Next.js project, install Chakra UI



![](https://img.shields.io/badge/UI-Chakra%20UI-green)



#### Installation



In your Next.js project, install Chakra UI by running either of the following:



```bash

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

```



Provider Setup

After installing Chakra UI, you need to set up the `ChakraProvider` at the root of your application.



Go to `pages/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the `Component` with the `ChakraProvider`:



```ts

// pages/_app.js

import { ChakraProvider } from "@chakra-ui/react";



function MyApp({ Component, pageProps }) {

  return (

    

      

    

  );

}



export default MyApp;

```



🔷 Customizing theme & More



Install dependencies



🔶 Dependency Info (Backend)

🔶 Dependency Info (Frontend)



### :running: Run Locally



![](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white)



Clone the project



```bash

  git clone https://github.com/SashenJayathilaka/iMessage-Clone.git

```



change directory



```bash

  cd iMessage-Clone

```



Install dependencies



Frontend & Backend



```

cd backend

&

cd frontend

```



```bash

  npm install

```



Start the server



Frontend & Backend



```

cd backend

&

cd frontend

```



```bash

  npm run dev

```






This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).






Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.



You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.



[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.



The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.



### Learn More



To learn more about Next.js, take a look at the following resources:



- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.



You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!



### :triangular_flag_on_post: Deployment



To deploy this project run



##### Deploy on Vercel



![](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)



The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.



## :handshake: Contact



Sashen - [@twitter_handle](https://twitter.com/SashenHasinduJ) - [email protected]



Project Link: [https://github.com/SashenJayathilaka/iMessage-Clone.git](https://github.com/SashenJayathilaka/iMessage-Clone.git)