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.
You can experience the app live at .
- 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
- 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.
To install the application, follow these steps:
- Clone the repository:
git clone https://github.com/Trayshmhirk/traysapp.git - Navigate into the project directory:
cd traysapp - Install the dependencies:
npm install - Start the application:
npm run devoryarn devif you prefer yarn.
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.
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.
- Frontend Mentor - @Trayshmhirk
- Twitter - @TrayShmhirk01
- LinkedIn - @Micheal Osunbajo