Full Stack chat application created w/ Next.js, Socket.IO, Express, React and TypeScript.
Live demo deployed on Heroku is here.
๐จ Creating chat rooms for real-time chat
โ
Joining conversations by using themed rooms
๐ JWT based anonymous authentication
โจ Users can set their username and conversation bubble color
๐ผ Sending images/gifs
๐ Emoji picker
โจ "User is typing" notifications
โซ Dark theme
โ๏ธ Automatically linkifying urls, emails etc
๐ Invite/share buttons
๐ Sound notification when the window is not focused
โฌ "Back to bottom" button to scroll down automatically
- Framework: Next.js (w/ Custom Express Server Integration)
- Real-Time Engine: Socket.IO
- Authentication: JSON Web Token
- UI Components: Material-UI
- Styling: styled-components
- Forms: Formik
- Form Validations: Yup
- Illustrations: unDraw
- Linting: ESLint
- Code Formatting: Prettier
To run it in development mode:
To create a production build ready to deploy, you need to set a JWT_SECRET_KEY
in .env
file first.
After that, run: