iMessage-Clone

KO | EN

gitlite — search

#python #hacktoberfest #typescript #golang #android #macos #java #nodejs #windows #cli #vue #awesome-list #ios #open-source

(★ 61)

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)

iMessage-Clone Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<img src="https://user-images.githubusercontent.com/99184393/214863304-edd5e3d9-ac65-4c6e-8697-5424f89c0368.png" alt="logo" width="200" height="auto" />
  
  <h1>iMessage Clone</h1>

<p>
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).
  </p>

![](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)

<h4>
    <a href="">View Demo</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/iMessage-Clone/blob/main/README.md">Documentation</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/iMessage-Clone/issues">Report Bug</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/iMessage-Clone/issues">Request Feature</a>
  </h4>
</div>

<br />

## :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

<br />

- Searching & Creating chat conversation

<br />

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

<br />

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

<br />

- Leaving chat conversation

![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

<details>
  <summary>Client</summary>
  <ul>
    <li><a href="https://#/">Typescript</a></li>
    <li><a href="https://nextjs.org/">Next.js</a></li>
    <li><a href="https://reactjs.org/">React.js</a></li>
    <li><a href="https://chakra-ui.com/">Chakra UI</a></li>
    <li><a href="https://www.prisma.io">Prisma</a></li>
    <li><a href="https://www.apollographql.com">Apollo</a></li>
  </ul>
</details>

<details>
<summary>Backend</summary>
  <ul>
    <li><a href="https://www.mongodb.com">MongoDB</a></li>
     <li><a href="https://www.prisma.io">Prisma</a></li>
    <li><a href="https://www.apollographql.com">Apollo</a></li>
  </ul>
</details>

<br />

## :toolbox: Getting Started

### :bangbang: Prerequisites

- Sign up for a MongoDB account <a href='https://www.mongodb.com'>HERE</a>
- Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a>

### :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 (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;
```

<a href="https://chakra-ui.com/getting-started/nextjs-guide" target="_blank">🔷 Customizing theme & More</a>

Install dependencies

<a href="https://github.com/SashenJayathilaka/iMessage-Clone/blob/main/Backend/package.json" target="_blank">🔶 Dependency Info (Backend)</a>
<a href="https://github.com/SashenJayathilaka/iMessage-Clone/blob/main/frontend/package.json" target="_blank">🔶 Dependency Info (Frontend)</a>

### :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
```

<hr />

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).

<hr />

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) - sashenjayathilaka95@gmail.com

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

iMessage-Clone

iMessage-Clone Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

iMessage-Clone

iMessage-Clone Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README