App.css

* {
  box-sizing: border-box;
}

.App {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

.App-header {
  text-align: center;
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}


.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.inputForm {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}
.inputForm input {
  width: 100%;
  font-size: 1.1em;
}

.messages {
  margin: 0;
  padding: 15px;
  list-style: none;
  background: #eceff1;
}
.message {
  margin: 0 0 45px;
  padding-top: 65px;
  max-width: 90%;
}


.message-text {
  position: relative;
  display: inline-block;
  margin: 0;
  border: 1px solid #ddd;
  padding: 15px;
  background-color: #fff;
  text-align: left;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.message-user {
  position: absolute;
  bottom: 100%;
  left: 15px;
  margin-bottom: 0px;
  max-width: 64px;
  max-height: 64px;
}

.message[data-is-ours="true"] {
  margin-left: auto;
  text-align: right;
}

[data-is-ours="true"] .message-text {
  background-color: #cfd8dc;
}
[data-is-ours="true"] .message-user {
  left: auto;
  right: 15px;
}


.connect {
  display: block;
  margin: 50px auto;
  padding: 20px;
  max-width: 300px;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}
.connect button,
.connect input {
  display: block;
  margin-bottom: 20px;
  padding: 5px 10px;
  width: 100%;
  font-size: 1.2rem;
}

.connect button {
  background: #e0821a;
  border: none;
  cursor: pointer;
  color: white;
}

base.js

import Rebase from 're-base'

const base = Rebase.createClass({
  apiKey: "AIzaSyDWuC8gHZSdHsTO7mOt0hcOmBRMo6gPBv8",
  authDomain: "pl-react-chat.firebaseapp.com",
  databaseURL: "https://pl-react-chat.firebaseio.com",
})

export default base

sample-messages.js

module.exports = {
  message1: {
    userId: "pansy-johns",
    userAvatar: "http://unsplash.it/64/64?image=11",
    userName: "Pansy Johns",
    text: "Do quis ex aute ex. Cillum pariatur commodo sit voluptate. Exercitation sunt anim culpa cillum duis dolor. Enim aute cillum nostrud aute aliquip nostrud sit ut nostrud irure quis. Consequat cupidatat ea sit dolore et sit sit. Ut velit et incididunt dolor qui tempor ipsum tempor adipisicing et reprehenderit.\r\n"
  },
  message2: {
    userId: "ratliff-alexander",
    userAvatar: "http://unsplash.it/64/64?image=12",
    userName: "Ratliff Alexander",
    text: "Cillum est nisi nostrud pariatur aute do laborum. Occaecat fugiat adipisicing sunt nostrud aute minim et nostrud exercitation. Ullamco irure ea fugiat ullamco veniam pariatur anim. Aliqua enim commodo aliqua duis anim Lorem ut cillum amet ipsum deserunt ea mollit cupidatat. Ullamco minim veniam proident id ullamco ea. Ex adipisicing Lorem aliquip incididunt aute fugiat.\r\n"
  },
  message3: {
    userId: "roberts-oneal",
    userAvatar: "http://unsplash.it/64/64?image=13",
    userName: "Roberts Oneal",
    text: "Dolor amet Lorem et occaecat est officia voluptate veniam. Anim velit nisi cillum voluptate dolor aute dolore ipsum labore veniam. Ad occaecat minim velit occaecat magna exercitation nisi commodo.\r\n"
  },
  message4: {
    userId: "karen-griffith",
    userAvatar: "http://unsplash.it/64/64?image=14",
    userName: "Karen Griffith",
    text: "Aliqua sunt in mollit in cupidatat ipsum fugiat ipsum adipisicing cupidatat. Quis minim magna eu amet incididunt velit dolor dolor id culpa eiusmod dolore. Sunt nostrud aute ex exercitation deserunt eu consequat est officia ea cillum reprehenderit officia. Mollit aliquip fugiat dolor est nulla magna ut veniam adipisicing irure veniam ipsum quis enim. Et labore incididunt in quis eiusmod Lorem ad amet. Non commodo sit laborum esse sit sunt excepteur id amet nostrud pariatur aute enim tempor.\r\n"
  },
  message5: {
    userId: "bryan-thornton",
    userAvatar: "http://unsplash.it/64/64?image=15",
    userName: "Bryan Thornton",
    text: "Ad esse nostrud occaecat duis aliquip consectetur. Reprehenderit exercitation dolore minim quis nostrud elit qui do minim eu esse sit nulla. Ex deserunt quis nulla voluptate cillum occaecat laborum duis velit. Dolore enim ipsum dolor qui eiusmod enim duis nostrud proident consequat consequat. Nisi voluptate eiusmod laboris labore aute. Sunt laborum duis elit ipsum velit nisi adipisicing deserunt qui.\r\n"
  },
  message6: {
    userId: "kerr-mcleod",
    userAvatar: "http://unsplash.it/64/64?image=16",
    userName: "Kerr Mcleod",
    text: "Et pariatur dolor enim id sint magna quis dolor. Aliqua esse commodo exercitation nisi consectetur aliquip aliquip nulla anim. Ad laborum ea eu consectetur deserunt pariatur anim ut voluptate reprehenderit in aliquip non commodo. Labore consequat adipisicing amet eu. Aliqua ipsum id culpa incididunt exercitation exercitation. Sit sunt sunt laboris nostrud Lorem veniam fugiat officia eiusmod consequat enim sint. Et amet excepteur consectetur irure ea anim sunt sint.\r\n"
  },
  message7: {
    userId: "spencer-farmer",
    userAvatar: "http://unsplash.it/64/64?image=17",
    userName: "Spencer Farmer",
    text: "Adipisicing ullamco laborum sit reprehenderit laboris nisi dolor eiusmod. Minim dolore voluptate et tempor. Consectetur reprehenderit voluptate eu ut in officia eu sunt ullamco labore labore fugiat irure. Eu officia nulla esse eu do nisi nostrud deserunt commodo adipisicing esse. Ex proident aliquip laborum laboris quis tempor officia exercitation ea mollit. Do ullamco cillum ex anim pariatur incididunt. Irure labore reprehenderit labore ea cupidatat.\r\n"
  },
  message8: {
    userId: "wilkins-leblanc",
    userAvatar: "http://unsplash.it/64/64?image=18",
    userName: "Wilkins Leblanc",
    text: "Lorem ex laborum ex pariatur veniam Lorem consequat et sit excepteur consequat ex. Sit ad sit aliqua ut irure laboris ex laborum ut incididunt nisi. Aliquip veniam consequat deserunt Lorem deserunt labore magna.\r\n"
  },
  message9: {
    userId: "cecile-hammond",
    userAvatar: "http://unsplash.it/64/64?image=19",
    userName: "Cecile Hammond",
    text: "Sunt eu duis nulla officia. Incididunt amet aliqua aliqua reprehenderit in duis ex minim cillum fugiat dolore. Ullamco adipisicing officia culpa dolore irure excepteur ad duis tempor. Consectetur eu duis reprehenderit dolor. Sit anim veniam irure anim duis ex occaecat aliqua excepteur. Eu fugiat reprehenderit reprehenderit nisi officia ullamco consequat ad sint veniam esse labore aute. Exercitation nisi excepteur cillum in amet pariatur sunt anim labore duis irure.\r\n"
  },
  message10: {
    userId: "angela-burnett",
    userAvatar: "http://unsplash.it/64/64?image=110",
    userName: "Angela Burnett",
    text: "Qui deserunt magna dolore Lorem Lorem minim dolor cupidatat exercitation esse excepteur fugiat. Qui sit qui laboris excepteur sunt ea veniam laborum eiusmod consectetur culpa cupidatat id quis. Eiusmod eu sint cupidatat exercitation enim consectetur excepteur cillum sint sunt velit ad.\r\n"
  },
  message11: {
    userId: "hilda-rich",
    userAvatar: "http://unsplash.it/64/64?image=111",
    userName: "Hilda Rich",
    text: "Voluptate fugiat irure consectetur ipsum labore ex exercitation. Adipisicing duis qui culpa reprehenderit. Dolor reprehenderit elit duis esse non eiusmod minim commodo qui. Aute eiusmod amet laborum minim dolor cillum id. Aliquip dolor adipisicing veniam ipsum ex culpa esse quis non ad. Irure exercitation ullamco non minim amet quis.\r\n"
  },
  message12: {
    userId: "alvarado-marsh",
    userAvatar: "http://unsplash.it/64/64?image=112",
    userName: "Alvarado Marsh",
    text: "Sunt incididunt ad ut consectetur irure. Eu aliquip mollit proident incididunt dolore labore amet ex. Laboris proident aliqua qui ullamco dolore amet cillum sit laboris veniam sit. Consequat in laboris adipisicing veniam. Non adipisicing aute dolor aliquip dolor ad esse minim. Aute excepteur qui ut sunt pariatur exercitation amet duis quis.\r\n"
  },
  message13: {
    userId: "jennie-porter",
    userAvatar: "http://unsplash.it/64/64?image=113",
    userName: "Jennie Porter",
    text: "Pariatur non eiusmod excepteur excepteur esse ex ad tempor laborum. Qui amet deserunt esse eu cupidatat labore sit quis qui sit sunt sint anim. Fugiat nisi Lorem ut esse aliquip eiusmod minim duis est consectetur.\r\n"
  },
  message14: {
    userId: "goodman-lawrence",
    userAvatar: "http://unsplash.it/64/64?image=114",
    userName: "Goodman Lawrence",
    text: "In eu ullamco aliquip anim pariatur. Lorem mollit nisi aliqua sint ex aliqua. Magna minim ex ad id. Sint cupidatat cillum elit elit duis irure. Et occaecat esse voluptate laborum irure esse mollit esse laboris laborum nisi eiusmod incididunt pariatur. Cillum tempor ipsum do qui labore dolor ex. Eu est labore aliqua dolor veniam aliquip qui in.\r\n"
  },
  message15: {
    userId: "glenn-sherman",
    userAvatar: "http://unsplash.it/64/64?image=115",
    userName: "Glenn Sherman",
    text: "Qui magna in excepteur Lorem consectetur laborum. Sit est nostrud proident ea commodo labore Lorem ipsum minim elit. Elit commodo elit minim consectetur ex. Proident ex eiusmod anim officia eiusmod exercitation dolor anim qui cupidatat incididunt. Minim sit voluptate nostrud occaecat deserunt ullamco labore aute aliquip. Officia nostrud ut ullamco cupidatat. Mollit nostrud exercitation qui id consequat.\r\n"
  }
}

slugify.js

export default function slugify(text) {
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}