Slack App Clone

A Full-stack chat application from Frontend to Backend with React, Redux, Firebase, and custom SCSS Framework.

• State management with Redux, with simple, straightforward patterns
• Essential features of React Router 4 (Switch component, withRouter HOC, History object)
• User authentication with Firebase (Register & Login)
• Form validations for our Register & Login forms
• Create Public Channels
• Send and receive messages instantly with the real-time Firebase Database
• Upload and Display image in messages using Firebase Storage
• Starred / un-starred public channels
• Show Channel Information with top active users
• Create and Upload user avatars
• Allow user to change their status: Active, Away, Busy, Offline
• Change App theme using React Color picker

Content

• Authentication with Firebase
  • Sign-up with Form Validation
  • Login with Form Validation
• Implement Public Channels
• Implement Message System
  • Add Message to a Channel
  • Show a List of Messages in a Channel
    • Layout Design
    • Implement Infinite Scrolling
  • Add Image with/without Message to a Channel
• Add User Status
• Add Colors
• Starred/Un-starred Public Channels
• Show Channel Information
  • Show Top Posters
  • Channel Description
• Support Internationalization (i18n)

Libraries and Frameworks

Internal

• SCSS Framework

External

• Create React App
• Redux
• Redux Devtools Extension
• Translation
• Firebase
• Material-UI
• Lodash
• Moment
• Classnames
• React Scroll
• React Color

Requirements

node version 10

Information

Check React-Seed to understand how to build and serve this project as well as how to use SCSS and JS linting.