Let's build a NEXT Chatroom with React!

App.css

.message-bubble {
  margin: 0;
  padding: 10px;
}

.message-bubble:nth-child(even) {
  background-color: #F5F5F5;
}

.message-bubble > * {
  padding-left: 10px;
}

.panel-body {
  padding: 0px;
  height: calc(100vh - 102px);
  overflow-y: auto;
}

.panel-heading {
  background-color: #009999 !important;
  color: white !important;
}

.panel-footer {
  background-color: white;
}

#name-input {
  width: 110px;
  text-align: center;
}

App.js

import React, { Component } from 'react'
import { Panel,
         Button,
         FormControl,
         InputGroup } from 'react-bootstrap';
import './App.css'

class App extends Component {

  render() {
    return (
      <div className="container">
        <Panel>
          <Panel.Heading>Welcome to this friendly chatroom!</Panel.Heading>
          <Panel.Body>
            <div className="message-bubble">
              <p className="text-muted">Aiman</p>
              <div>LOOK AT THIS CHAT ROOM!</div>
            </div>

            <div className="message-bubble">
              <p className="text-muted">Liren</p>
              <div>This is the future I tell ya</div>
            </div>

            <div className="message-bubble">
              <p className="text-muted">Lorem Ipsum</p>
              <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>

            <div className="message-bubble">
              <p className="text-muted">Aiman</p>
              <div>Shut the fuck up lorem</div>
            </div>
          </Panel.Body>
          <Panel.Footer>
            <form>
                <InputGroup>
                  <InputGroup.Button>
                    <FormControl
                      id="name-input"
                      type="text"
                      placeholder="Name"
                    />
                  </InputGroup.Button>
                  <InputGroup.Addon>says</InputGroup.Addon>
                  <FormControl
                    type="text"
                    placeholder="Message"
                  />
                  <InputGroup.Button>
                    <Button type="submit">Send!</Button>
                  </InputGroup.Button>
                </InputGroup>
            </form>
          </Panel.Footer>
        </Panel>
      </div>
    )
  }
}

export default App

firebase.js

import firebase from 'firebase'

const config = {
  databaseURL: 'https://react-livechat.firebaseio.com/'
}
const Firebase = firebase.initializeApp(config)
const FirebaseChatDb = Firebase.database().ref('next-chat')

export default FirebaseChatDb

index.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#root {
  overflow: hidden;
  height: 100vh;
}