Bubbly

Full Stack chat application created w/ Next.js, Socket.IO, Express, React and TypeScript.
Live demo deployed on Heroku is here.

Features

🗨 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

Stack

• 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

Development

To run it in development mode:

npm install

npm run dev:custom

Production

To create a production build ready to deploy, you need to set a JWT_SECRET_KEY in .env file first.

After that, run:

npm run build

npm start