Warning: This a mobile template designed for developers.
Please check out our fully-hosted cloud solution for chatbots at Chatness website

App Stack

About the tech stack

Chatness v2 is built on top of the following technologies:

• Firebase – Google’s infrastructure for Realtime database, authentication, storage, hosting, functions, analytics, crashlytics, remote config, etc.
• Angular – Google’s frontend framework.
• Ionic – Hybrid components library.
• Capacitor – Native mobile app runtime by the Ionic creators.
• ChatGPT – Chatbot framework developed by OpenAI.

Together these technologies provide a very powerful and versatile stack that can be used to build a wide variety of apps, not only chat apps.

Features

• ✨ Offline Support
• ✨ Light and Dark UI
• ✨ Chat in Groups
• ✨ Chat in Private
• ✨ Chat Contacts with search
• ✨ Chat Pagination
• ✨ Take Photos
• ✨ Select Photos
• ✨ Add Videos
• ✨ Message Deletion
• ✨ App Notifications
• ✨ App Settings
• ✨ Authentication
• ✨ Chatbot

Those are real working features, not just a list of buzzwords. You can see them in action in the web demo app or test native functionalities by downloading Chatness from the stores. If something doesn’t work as expected, please let me know and I’ll fix it as soon as possible and release for free for everyone with a license.

What you’ll get

• A fully functional chat app and code for infrastructure (Push Notifications) that can be used as is, or it can be customized to fit your needs.
• A dedicated support channel for any questions or issues you may have.
• Extensive documentation with step-by-step instructions on how to set up the app and infrastructure.
• A video tutorial on how to set up the app for local development.
• Future updates and new features for free.

What you won’t get

• A dedicated developer to work on your project.
• A custom design.
• A custom feature.
• A custom backend.
• A custom infrastructure.
• A custom app.
• A custom anything.

Yet, if you need any of the above, you can always hire my company to do it for you . We’re a small team of developers and designers that can help you build your idea from scratch. We’re also available for freelance work. Contact me via PM if you’re interested.

What you need to know before buying

• You need to have a basic understanding of how to use the command line.
• You need to have a basic understanding of how to use Git.
• You need to have a basic understanding of how to use Firebase.
• You need to have a basic understanding of how to use Angular.
• You need to have a basic understanding of how to use Ionic.
• You need to have a basic understanding of how to use Capacitor.
• You need to have a basic understanding of how to use TypeScript.
• You need to have a basic understanding of how to use JavaScript.
• You need to have a basic understanding of how to use HTML.
• You need to have a basic understanding of how to use CSS.

App engineering overview

The app is built on top of the following concepts:

• It must be easy to set up and reuse.
• It must be easy to customize.
• It must be easy to maintain.
• It must be easy to scale.
• It must be easy to deploy.
• It must be easy to test.
• It must be easy to debug.
• It must be easy to integrate with other apps.
• It must be easy to integrate with other services.

That said, the project structure is arranged in a way that makes it easy to understand and maintain, and it’s also easy to customize and extend. Take a look at the project folder structure below and what they mean.


├── src
│ ├── app
│ │ ├── actions
│ │ ├── api
│ │ ├── components
│ │ ├── configs
│ │ ├── effects
│ │ ├── guards
│ │ ├── pages
│ │ ├── reducers
│ │ ├── theme
│ │ ├── types


Actions

Plain JavaScript objects that represent an intention to change the state of the application. They contain a type property that describes the type of action being performed and any additional data required to complete the action. Actions are typically created by action creators, which are functions that return an action object.

We use actions on Chatness to dispatch events to the Redux store, which will then update the global state of the application. We don’t rely on Angular Services, NGRX, or any other state management system to handle global states. We aim to keep the app as simple as possible, and we don’t want to introduce unnecessary complexity.

API

The API folder contains all the external requests being made and is shared across components. Those are “pure functions” that only return data and don’t have any side effects. They are responsible for fetching data from external sources, such as Firestore, and returning the data in a format that the application can use. That said, in case you want to use a different API you can easily replace the functions inside this folder.

Components

The components folder contains reusable UI elements that can be used throughout the application. These elements are written as Angular components, which consist of a TypeScript class and an HTML template. We rarely use Angular directives, pipes, or services in our components, and we try to keep all the source code deadly simple in order to make them “portable” to other frameworks if needed.

Configs

The configs folder contains configuration files for the application, such as environment variables, API keys, and other settings that need to be loaded at app runtime.

Effects

Effects are functions that handle side effects in the application. Again not tied to Angular at all, they allow you to perform actions in response to specific events, such as when an action is dispatched, when a component is initialized, the user navigates, or when the user interacts with the UI.

Guards

Guards and routes are the only framework-specific Angular thing used in Chatness. They are used to control access to specific routes or parts of the application based on certain conditions. For example, a guard is used to prevent unauthenticated users from accessing sensitive areas.

Pages

The pages folder contains the main views or screens connected to routes. Each page consists of one or more components.

Reducers

Reducers are pure functions that take the current state of Chatness and the action and return a new state that reflects the changes made by this action. In other words, they are responsible for updating the store in response to actions. We use Redux only to manage the global state of the application, components are still responsible for handling their own local state.

Theme

The theme folder contains stylesheets and other resources related to the visual design of Chatness.

Types

The types folder contains all shared type definitions for various parts of Chatness. These types are used to ensure type safety and catch errors at compile time. We use TypeScript and Angular templates in strict mode to ensure the most type safety possible.

Documentation

https://v2.chatness.app

Support

https://chatness.app/support

Demo

• App Store    https://apple.co/41VpNh8
• Google Play    https://bit.ly/chatness-android
• Self Hosted    https://demo.chatness.app