This project started out as a brief case study to learn socket.io by creating a simple chat app and then implement those newly learned technologies into my other project, Insta-sham. However after spending sometime with this, it expanded a bit beyond its inital scope and became a testbed to learn alternatives for implementing authentication, form logic, and CSS in JS. In my previous project, referenced above, I created all of those, for all intents and purposes, from the ground up. This time, I learned why it is commonly said not to reinvent the wheel.
This project does have a backend hosted, the repo can be found here. It does not have persistant storage, no database is used. Chat data is stored via express and user data via local storage. This project could be expanded to allow user creation of accounts, servers, rooms, etc. However, I felt that to be redudant for my learning purposes, but could see it used as a great springboard for someone looking to learn a DB technology.
Client: https://chatapp-fe-eta.vercel.app/
Client: React, NextJS, Next-Auth, React-hook-form, Socket.io-Client, ChakraUI, React-Icons, React-Swipeable
Server: Node, Express, Socket.io-Server
- Change rooms/servers, and send messages
- Form validation for messages
- Light/dark mode toggle
- User persistance, both live connections to room and logged in users to server
- Responsive, both mobile and desktop versions
Clone the project
git clone https://github.com/mhaslinsky/chatappFEGo to the project directory
cd my-projectInstall dependencies
npm installStart the server
npm run devOpen http://localhost:3000 with your browser to see the result.
To run this project, you will need to add the following environment variables to your .env.local file
SOCKETIO pointing to your socket io server
NEXTAUTH_URL pointing to your local server if taking advantage of NextJS/vercel lambdas
CLIENT_ID and CLIENT_SECRET for each 3rd party Oauth provider you wish to use.
This project provides configuration for Discord and Google, however most are pretty simple to setup
once you have a developer account.
and a NEXTAUTH_SECRET for Next Auth to use when encrypting session data in JWTs