Chat-App

Hybrid live chat app where people are able to login anonymously and write in chat rooms about specific topic. Deployed demo can be accessed here.

Technologies used:

• Frontend: React (React Toolkit for state management) and Framework7.
• Database and authentication: Firebase.
• Hybrid deployment: Monaca.

chat_app_preview.mp4

Figma wireframe.

Tutorial

Tutorial will be available in Medium soon.

How to start

1. Download the project.
2. Run npm install in the directory.
3. Run npm run dev to start the project.
4. If the browser opens url 0.0.0.0:8080, change it to localhost:8080.

Important files

JS

• store.js - Redux Toolkit store
• groupsSlice.js - Redux Toolkit slice for chat group information
• userSlice.js - Redux Toolkit slice for user information

React

• LoginPage.jsx - login page to write name and choose gender
• GroupsPage.jsx - screen containing chat groups
• MessagesPage.jsx - screen with chat messages