https://github.com/kvbc/react-messenger
Simple messaging app built on a Next.js frontend with an Express backend and a SQLite database, using Github authentication services
https://github.com/kvbc/react-messenger
back-end backend database express expressjs front-end frontend github github-authentication github-oauth messaging messanger next nextjs react reactjs tailwind typescript
Last synced: 8 months ago
JSON representation
Simple messaging app built on a Next.js frontend with an Express backend and a SQLite database, using Github authentication services
- Host: GitHub
- URL: https://github.com/kvbc/react-messenger
- Owner: kvbc
- Created: 2024-02-05T11:40:04.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-25T15:49:57.000Z (about 2 years ago)
- Last Synced: 2025-05-30T07:37:15.193Z (10 months ago)
- Topics: back-end, backend, database, express, expressjs, front-end, frontend, github, github-authentication, github-oauth, messaging, messanger, next, nextjs, react, reactjs, tailwind, typescript
- Language: TypeScript
- Homepage:
- Size: 508 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-messenger
Simple messaging app built on a Next.js frontend with an Express backend and a SQLite database, using Github authentication services (OAuth Apps)
This project was a great introduction to the world of third-party auth providers, as well as a huge help to familiarize myself with a simple potential login/logout user flow in a React application. Learned a lot of do's and dont's when it comes to access tokens. HttpOnly cookies for the win!
Tech Stack:
- **T**ypescript
- **E**xpress.js
- **N**ext.js (React)
- **T**ailwind CSS
- **S**QLite
###### (new TENTS stack?)
Lessons learned:
- Should have used React Query 😅
## Installing
1. Run `install.bat`
or
1. Run `npm run install-link` in `shared/`
2. Run `npm run install-link` in `frontend/` and `backend/`
## Running / Development
There must exist an `.env` file in `backend/` with the following properties:
- `CLIENT_ID` - Github OAuth app client ID (see [Resources](#Resources))
- `CLIENT_SECRET` - Github OAuth app client secret (see [Resources](#Resources))
---
1. Run `dev.bat /ob`
or
1. Run `npm run dev` in `backend/`, `frontend/` and `shared/`
2. Open up http://localhost:3000
## Resources
- [Github - OAuth Apps](https://docs.github.com/en/apps/oauth-apps)
- [Github User API](https://docs.github.com/en/rest/users?apiVersion=2022-11-28)