Skip to content

darccide/bloc-chat-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bloc Chat React Project

Bloc Chat is the second React Single Page Application (SPA) I built while going through my apprenticeship at Bloc. It is an SPA for chatting that uses Firebase for it's backend and Material UI to create a responsive page that also works on mobile devices. This is the first time I created a React application requiring a database. Building this application was a good way to explore using a dynamic database (Firebase) with React.

Build Process

First, I generated a list of chat rooms that updates dynamically when a new chat room is added by a user.Next, I displayed messages that are associated with each chat room. Lastly, to create messages as a registered user, Firebase was added for user authentication and to store user messages. Messages only are shown within the specific chat room in which they were created in. Messages and chat rooms can be edited and deleted.

Note about styling

Currently this app is mobile responsive, however it is currently best used on a desktop.

Built With

  • React: Javascript front-end library for UI (user interface) component rendering
  • Firebase: Backend as a service platform
  • Material-UI: Mobile responsive styling

Screenshots

FullScreen Views

Bloc-Chat Desktop View

Mobile Views

Bloc-Chat Mobile View Chat Rooms Bloc-Chat Mobile View Chat Room Messages

Future Updates

  • Implement admin and premium accounts for private chatting.
  • Add message editing.
  • Improve UX on mobile platform.

Author

Steven Thomson is a Fullstack Developer who recently transistioned back to the U.S. If you would like to contact him:

About

React SPA Chat application using Firebase and Material UI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published