Skip to content

A CRUD (Create, Read, Update, Delete) chat application built with Typescript, React, Styled-Components,Firebase and Immutable.JS.

License

Notifications You must be signed in to change notification settings

csantiago132/chat-app

Repository files navigation

Chat App

Codacy Badge code style: prettier style: styled-components


slack-chat preview

A CRUD (Create, Read, Update, Delete) chat application built with Typescript, React, Firebase and Immutable.JS.

Read the documentation here

Prerequisites

  • Yarn >= 1.5.x
  • Node >=8.x

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

  1. Clone this repo using git clone https://github.com/csantiago132/chat-app.git
  2. Move to the appropriate directory: cd chat-app
  3. Register a database with Firebase
  4. Write a .env file in the root of the project and put your configuration
  REACT_APP_FIREBASE_API_KEY=your_api_key

  REACT_APP_FIREBASE_DOMAIN=your_auth_domain

  REACT_APP_FIREBASE_DB_URL=your_firebase_url

  REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_project_id

  REACT_APP_FIREBASE_PROJECT_ID=your_storage_bucket

  REACT_APP_FIREBASE_STORAGE_BUCKET=your_messaging_id

(This is used on the main state of the App/index container)

  1. Run yarn install or npm install in order to install dependencies
  2. Run yarn start or npm start
  3. The project will be available on http://localhost:4000

Features

  • Typescript
  • Google authentication
  • Public rooms
  • Realtime sending and receiving of messages
  • Able to delete messages (as long as the user was the one that sent it)
  • Able to delete chat rooms (as long as the user was the one that created it it)
  • Private rooms
  • Update previously created messages
  • Rich media attachments (drag and drop)
  • Typing and presence indicators
  • Read message cursors

Sidenote:

UI and UX improvements are in the works, the main priority on my end has been creating the logic, incorporate Typescript, setting up state with Immutable.JS and making sure that the CRUD concepts are covered before moving on.

TODO List

In the near future, I want to add:

  • Redux
  • Reselect
  • React Native or Electron version
  • Eject from create-react-app v2.1 and customize webpack configuration

Built With

  • Typescript - A superset of JavaScript
  • ReactJS - A JavaScript library for building user interfaces
  • Firebase - Firebase is a Backend as a Service (BaaS) provided by Google.
  • Immutable - Immutable collections for JavaScript

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Kenneth Liu - for motivation - github
  • Andy Babbitt - for motivation - linkedin
  • Cory Trimm - for mentoring - github

About

A CRUD (Create, Read, Update, Delete) chat application built with Typescript, React, Styled-Components,Firebase and Immutable.JS.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published