Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riteshpuvvada/real-time-chat-supabase-nextjs
Real-Time Data Syncing Chat Application
https://github.com/riteshpuvvada/real-time-chat-supabase-nextjs
chat-application eslint-rules nextjs react reactjs supabase supabase-client supabase-js
Last synced: 27 days ago
JSON representation
Real-Time Data Syncing Chat Application
- Host: GitHub
- URL: https://github.com/riteshpuvvada/real-time-chat-supabase-nextjs
- Owner: RiteshPuvvada
- License: mit
- Created: 2021-08-31T04:09:44.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-24T19:06:21.000Z (over 1 year ago)
- Last Synced: 2024-10-11T02:40:20.893Z (27 days ago)
- Topics: chat-application, eslint-rules, nextjs, react, reactjs, supabase, supabase-client, supabase-js
- Language: CSS
- Homepage: https://real-time-chat-supabase.pages.dev/
- Size: 805 KB
- Stars: 38
- Watchers: 1
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Nightly ☄️
## Real-Time Data Syncing Chat Application with Supabase and Next.js
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).
A full-stack Slack clone example using:
- Frontend:
- Next.js.
- [Supabase.js](https://supabase.io/docs/library/getting-started) for user management and realtime data syncing.
- Backend:
- [app.supabase.io](https://app.supabase.io/): hosted Postgres database with restful API for usage with Supabase.js.
## Getting Started
- Clone the repository with:
```
$ git clone https://github.com/RiteshPuvvada/Real-Time-Chat-Supabase-NextJs.git
```
- Install the dependencies:
```bash
$ npm install
```
- Install supabase Javascript client:
```bash
$ npm install @supabase/supabase-js
```
- Create `.env` file for the Supabase `URL` and `ANON` key:
```
NEXT_PUBLIC_SUPABASE_URL= < YOUR SUPABASE URL >
NEXT_PUBLIC_SUPABASE_API_KEY= < YOUR SUPABASE ANON KEY >
```
- [Install ESLint Plugin](https://reactjs.org/docs/hooks-rules.html):
```bash
yarn add eslint-plugin-react-hooks@next
# or
npm install eslint-plugin-react-hooks@next
```
- ESLint config:
```bash
// Your ESLint configuration
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
}
}
```
- run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 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!
## Deploy on Vercel
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.
## License
This repository is under The MIT License. Read the [LICENSE](https://github.com/RiteshPuvvada/Real-Time-Chat-Supabase-NextJs/blob/main/LICENSE) file for more information.