React Native Messaging Excellence!
Developed with the software and tools below.
Table of Contents
The ChatGPT-App-React-Native-TypeScript project is a mobile application built with React Native and TypeScript. It facilitates real-time chat interactions with an AI-powered chatbot. Users can input messages, receive responses generated by a machine learning model, and view chat history in a user-friendly interface. The project enhances user engagement through dynamic message handling, efficient data fetching, and seamless navigation. Key components include message input, display management, data context, and server integration, all contributing to a robust chat experience.
| Feature | Description | |
|---|---|---|
| ⚙️ | Architecture | This project is built using React Native and TypeScript, following a structured architecture that includes components, screens, hooks, and server files to handle chat interactions. It leverages Expo for cross-platform development, ensuring a seamless user experience. |
| 🔩 | Code Quality | The codebase maintains a good level of quality with well-organized components, clear naming conventions, and consistent code style. TypeScript is used for type safety and improved code readability, enhancing overall maintainability. |
| 📄 | Documentation | The project includes detailed README files and comments within the codebase, aiding developers in understanding the architecture and implementation details. However, additional documentation on code structure and design decisions would be beneficial. |
| 🔌 | Integrations | Key integrations include OpenAI for message generation, Express for backend server setup, and various React Native libraries for UI components and navigation. External dependencies like react-native-screens and react-uuid enhance functionality and user experience. |
| 🧩 | Modularity | The codebase exhibits modularity through separate components, hooks, and screens, promoting code reusability. Data context management and global constants contribute to a cohesive architecture that can easily accommodate future enhancements or feature additions. |
| 🧪 | Testing | Testing frameworks and tools are not explicitly mentioned in the project details. Incorporating unit tests using tools like Jest and React Testing Library could improve code reliability and facilitate future development. |
| ⚡️ | Performance | The efficiency of the application is supported by real-time chat functionalities, server-side processing, and optimized data fetching. Resource usage is well managed, but performance testing under varying loads could provide further insights into scalability. |
| 🛡️ | Security | Security measures like environment variable configuration for sensitive data (e.g., API keys) and server-side message processing enhance data protection. However, additional security practices such as input validation and encryption could further fortify the application. |
| 📦 | Dependencies | Key dependencies include React Native, TypeScript, Expo, Express, OpenAI, and various React Native libraries for UI components. Configuration files like package.json and tsconfig.json manage dependencies and project settings effectively. |
└── ChatGPT-App-React-Native-TypeScript/
├── App.tsx
├── LICENSE
├── README.md
├── app.json
├── assets
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash.png
├── components
│ ├── InputMessage.tsx
│ ├── Layout.tsx
│ ├── ListMessage.tsx
│ └── Message.tsx
├── constants
│ └── constants.ts
├── context
│ └── DataProvider.tsx
├── data
│ └── messages.ts
├── helpers
│ └── getMessage.ts
├── hooks
│ └── useFetchMessage.ts
├── others
│ └── screen.png
├── package-lock.json
├── package.json
├── screens
│ ├── HomeScreen.tsx
│ └── Infomation.tsx
├── server
│ ├── .gitignore
│ ├── config.js
│ ├── index.js
│ ├── package-lock.json
│ └── package.json
├── tsconfig.json
└── types
└── types.d.ts.
| File | Summary |
|---|---|
| App.tsx | Implements a basic navigation structure for ChatGPT AI app using React Native, facilitating user interaction and information access. |
| app.json | Configure app details like name, icons, and splash screen for ChatGPT-App across different platforms using the Expo configuration file, app.json. |
| package-lock.json | Implements real-time chat functionalities in a React Native app using TypeScript, enhancing user engagement within the parent repository's architecture. |
| package.json | Manage dependencies and project configurations for a React Native ChatGPT app utilizing Expo. Facilitate app functionality, navigation, and data handling through specified versions and package inclusions. |
| tsconfig.json | Configures TypeScript strict mode for the Expo project in tsconfig.json, ensuring robust type checking and better code reliability within the React Native app. |
types
| File | Summary |
|---|---|
| types.d.ts | Defines the structure for message objects in the ChatGPT app, including user details, message content, and usage statistics. |
context
| File | Summary |
|---|---|
| DataProvider.tsx | Manages data context for React components, initializing and updating message input. |
constants
| File | Summary |
|---|---|
| constants.ts | Global constant API_URL for backend server connection in the React Native app. |
server
| File | Summary |
|---|---|
| index.js | A server file leveraging Express and OpenAI APIs to handle chat interactions, including message generation based on user input. |
| config.js | Configures environment variables for the OpenAI API key and organization within the ChatGPT-App-React-Native-TypeScript repository structure. |
| package-lock.json | Implements real-time chat functionality using React Native Gifted Chat library in the ChatGPT mobile app, enabling users to communicate seamlessly within the application architecture. |
| package.json | Express server setup for ChatGPT React Native app with nodemon auto-restart, CORS support, body parsing, and OpenAI integration. |
screens
| File | Summary |
|---|---|
| Infomation.tsx | Displays an Infomation screen layout using React Native, presenting centered text within a container. |
| HomeScreen.tsx | Compose the HomeScreen component; integrates ListMessage and InputMessage within a Layout, key to the ChatGPT-App-React-Native-TypeScript architecture. |
components
| File | Summary |
|---|---|
| InputMessage.tsx | Component enabling user input and message sending in ChatGPT app. Dynamically updates message state and triggers message sending with user-defined content. |
| Layout.tsx | Layout component for ChatGPT app providing a styled container with status bar setup, maintaining consistent UI across screens. |
| Message.tsx | Generates styled chat message components for React Native app, includes user avatar, name, text, and clipboard functionality. |
| ListMessage.tsx | Manages message display with real-time updates and user input integration in the React Native app. Handles data fetching, rendering, and refreshing. |
hooks
| File | Summary |
|---|---|
| useFetchMessage.ts | Handles fetching messages based on user input, managing loading state efficiently using React hooks. Establishes a stateful data structure to track message data and loading status dynamically. |
helpers
| File | Summary |
|---|---|
| getMessage.ts | Handles fetching chat messages from an API using given user input, leveraging machine learning model for text generation based on parameters provided. |
Requirements
Ensure you have the following dependencies installed on your system:
- TypeScript:
version x.y.z
- Clone the ChatGPT-App-React-Native-TypeScript repository:
git clone https://github.com/Yuberley/ChatGPT-App-React-Native-TypeScript- Change to the project directory:
cd ChatGPT-App-React-Native-TypeScript- Install the dependencies:
npm installUse the following command to run ChatGPT-App-React-Native-TypeScript:
npm run build && node dist/main.jsUse the following command to run tests:
npm test-
► INSERT-TASK-1 -
► INSERT-TASK-2 -
► ...
Contributions are welcome! Here are several ways you can contribute:
- Report Issues: Submit bugs found or log feature requests for the
ChatGPT-App-React-Native-TypeScriptproject. - Submit Pull Requests: Review open PRs, and submit your own PRs.
- Join the Discussions: Share your insights, provide feedback, or ask questions.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/Yuberley/ChatGPT-App-React-Native-TypeScript
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.' - Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph
This project is protected under the SELECT-A-LICENSE License. For more details, refer to the LICENSE file.
- List any resources, contributors, inspiration, etc. here.