Whales Chat is a mobile chat application built using React Native and Expo, providing users with a platform to communicate with each other through text messaging and real-time chat functionalities.
- Users can sign up and sign in securely using email and password authentication.
- Ability to manage user credentials and perform automatic user login.
- Real-time messaging feature allowing users to send and receive messages instantly.
- Support for creating new chat groups and adding or removing participants.
- Options for replying to messages and obtaining message history.
- Users can manage their profiles, including the ability to upload and edit their profile images.
- Smooth and intuitive navigation features, including an organized chat list and settings screens.
The following is a Markdown table with a brief description of each file's function:
| File | Description |
|---|---|
userSlice.js |
Defines the user storage slice, handling state updates and storage of user data. |
chatSlice.js |
Defines the chat storage slice, managing state updates and storage of chat data. |
authSlice.js |
Defines the authentication storage slice, managing user authentication and auto-login state. |
messagesSlice.js |
Defines the message storage slice, managing state updates and storage of message data. |
MainNavigator.js |
Defines the main navigation logic of the application, including bottom navigation and page stack navigation. |
AppNavigator.js |
Determines the navigation logic to display authentication, main navigation, or splash screen based on user authentication state. |
colors.js |
Exports a constant object of color constants for styling and theming in the application. |
commonStyles.js |
Contains commonly used styles such as centering styles, reusable throughout the application. |
DataItem.js |
Used to display data items, including title, subtitle, image, and various types of icons. |
Input.js |
Renders an input field along with related labels, icons, and error messages. |
SignUpForm.js |
Renders the user registration form, handling form input and submission logic. |
Bubble.js |
Used to render chat message bubbles along with related action menus. |
SubmitButton.js |
Creates a submit button with different styles and behaviors based on different states. |
ProfileImage.js |
Displays user avatars and provides functionality to edit and remove avatars. |
ReplyTo.js |
Displays reply information to messages and provides functionality to cancel replies. |
CustomHeaderButton.js |
Defines a custom header button component for creating custom buttons in the application. |
PageContainer.js |
Defines a React Native component for wrapping page content and applying styles. |
SignInForm.js |
Implements a form for user sign-in, including data validation, handling user sign-in requests, and displaying loading states. |
PageTitle.js |
Defines a React Native component for displaying page title text. |
validationConstraints.js |
Contains data validation functions such as length validation, string validation, email validation, and password validation. |
imagePickerHelper.js |
Provides helper functions for image selection and uploading, including launching image library picker, opening camera, and uploading images to Firebase storage. |
firebaseHelper.js |
JavaScript module for connecting to Google Firebase, initializing the application, and retrieving configuration information. |
userActions.js |
Contains functions for user data and chat record operations, using Firebase real-time database for operations. |
formActions.js |
Handles form input validation operations, including validating input data. |
authActions.js |
Contains authentication operations for user authentication and management, including user registration, user login, and user logout. |
chatActions.js |
Implements chat application functionality module, storing messages and related information in Firebase database. |
formReducer.js |
Implements a reducer function for updating state objects based on action objects. |
- React Native
- Expo
- Firebase (for authentication, database, and storage)
- Redux (for state management)
To run the application locally, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/yourusername/whales-chat.git
- Navigate to the project directory:
cd whales-chat - Install the required dependencies using npm:
npm install
- Run the application using Expo CLI:
npm start
To further explore and contribute to the Whales Chat application, follow these steps:
- Fork the repository to your GitHub account.
- Clone the forked repository to your local machine:
git clone https://github.com/yourusername/whales-chat.git
- Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-name
- Make your changes and commit them with descriptive commit messages:
git commit -m "Description of your feature or fix" - Push your changes to your branch on your remote repository:
git push origin feature/your-feature-name
- Create a pull request to merge your changes to the original repository.
Made with ❤️ by Edison www.Edisonwhale.com
Have any questions? Email me! [email protected]
This project is licensed under the MIT License. See the LICENSE file for details.
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent