# React Chat App This is a messaging app developed using React, Material UI and Firebase ## Design The mockup for the application has been created using Adobe XD with some borrowed inspiration from the internet. This is what the final product is expected to look like <div> <img src='/design/Home Page.png' width="49%" style="margin-bottom=0.5%"> <img src='/design/Log In.png' width="49%" style="margin-bottom=0.5%"> <img src='/design/Sign Up.png' width="49%" style="margin-bottom=0.5%"> <img src='/design/Chat List Expanded.png' width="49%" style="margin-bottom=0.5%"> <img src='/design/Chat List Contracted.png' width="49%" style="margin-bottom=0.5%"> </div> ## Code Architecture - **src** (contains all the react code) - **components** (contains all react components) - **auth** (contains signin and signup components for authenticating the user) - **chats** (contains components for showing chats of every sender) - **layout** (contains components placed in the UI) - **ChatPage** (contains components required for chats) - **HomePage** (contains components that will be displayed on the home page) - **data** (contains dummy data used for local testing) - **redux** (contains all redux boilerplate- actions, reducers) - **actions** (all actions have been defined here) - **contants** (names of actions have been defined here for easy use) - **reducers** (contains reducers for every action) - **resources** (contains images and icons) ## Running Locally 1. Clone the repository and ```cd``` into it. 2. Install all packages<br> ```npm install``` 3. Start the local server.<br> ```npm start``` ## Dependencies 1. Material UI (for UI) 2. Redux (for managing state) 3. Firebase (as the backend) 4. Redux-Thunk (as middleware for redux for performing API requests) 5. *(Optional)* Firebase Emulators (for using all features of the app locally)