Trayshmhirk / traysapp

(in development) TraysApp, a whatsapp web clone, chat app built with react, redux toolkit and firebase, including other technologies...

TraysApp (under development)

TraysApp is a comprehensive chat application built with React, Redux Toolkit, Firebase, React Router DOM, Bootstrap, and Sass. It provides a platform for users to engage in real-time conversations, make phone calls, and express themselves with an extensive emoji keyboard. TraysApp is designed to deliver a seamless and interactive communication experience, similar to popular chat applications like WhatsApp.

Table of Contents

• TraysApp (under development)
  • Table of Contents
  • Demo
  • Features
  • Technologies Used
  • Installation
  • Usage
  • Project Structure
  • Author

Demo

You can experience the app live at .

Features

• User authentication with Firebase Authentication
• Real-time chat functionality with Firebase Realtime Database
• Phone call functionality
• Emoji keyboard
• Notifications with Firebase Cloud Messaging (planned)
• State management with Redux Toolkit
• Routing with React Router DOM

Technologies Used

• React: A JavaScript library for building user interfaces.
• Redux Toolkit: The official, opinionated, batteries-included toolset for efficient Redux development.
• Firebase: A platform developed by Google for creating mobile and web applications.
  • Firebase Authentication: Provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app.
  • Firebase Realtime Database: A cloud-hosted NoSQL database that lets you store and sync data between your users in realtime.
  • Firebase Cloud Messaging: A cross-platform messaging solution that lets you reliably send messages at no cost.
• React Router DOM: A collection of navigational components that compose declaratively with your application.
• React Bootstrap: A library of reusable front-end components.
• Bootstrap: The most popular CSS Framework for developing responsive and mobile-first websites.
• Sass: A preprocessor scripting language that is interpreted or compiled into CSS.
• FontAwesome: A library for adding vector icons and social logos to your website.
• emoji-picker-react: A customizable, simple, and lightweight emoji picker plugin for React.

Installation

To install the application, follow these steps:

1. Clone the repository: git clone https://github.com/Trayshmhirk/traysapp.git
2. Navigate into the project directory: cd traysapp
3. Install the dependencies: npm install
4. Start the application: npm run dev or yarn dev if you prefer yarn.

Usage

After starting the application, navigate to http://localhost:3000 in your web browser. You can log in or sign up to start using the application.

Project Structure

• src/components: This directory contains all the React components.
• src/assets: This directory contains static assets such as images.
• src/scss: This directory contains all the SASS custom variables.

Author

• Frontend Mentor - @Trayshmhirk
• Twitter - @TrayShmhirk01
• LinkedIn - @Micheal Osunbajo