do-chat
This is a sample ChatApp project that uses redux-pender to handle asynchronous actions. This project is a good examplary project that uses Ducks Structure for redux. It is very well-commented, so reading through the codes of this project might be useful if you are a React beginner.
Firebase is used as backend in this app.
Preview is available at: https://dochat.vlpt.us/
Features
- Realtime chat
- Optimized Infinite Scrollable MessageList component
- Notification sound when the page is not focused.
Getting Started
Create Firebase Project
This chat application uses firebase to store messages. Go to Firebase Console and create a new project. Then, open the database from the sidebar, then click the Rules tab.
Copy & Paste the rule below:
{
"rules": {
"online": {
".write": true,
".read": true
},
"messages": {
".write": true,
".read": true,
".indexOn": "time"
}
}
}
Since this project is just a sample project, this database is not secured enough, and allows every data read & write on online and messages. To make it more secure, you will need to implement the user authentication part, and alter the database rules accordingly.
Prerequisites
- yarn (or npm)
That's all!
Installing
yarn
# or npm install
Use yarn, it is way faster than npm.
Development Server
This command will start the webpack-dev-server
yarn start
Build
This command will create optimized bundle files of the project.
yarn build
This project does not come with a backend server. Every data logic is dependant on firebase.
Serve the public directory on your static web server. (You can use surge or now)