Tomogatch.AI 🐾

🌐 Live Demo

---

Table of Contents

• Tomogatch.AI 🐾
• Table of Contents
  • Project Description
  • Screenshots
  • Features
  • Technologies Used
  • Setup and Installation
  • Usage
  • Project Structure
  • Contributors
  • License
  • Acknowledgments
  • Future Enhancements

---

Project Description

Tomogatch.AI is an engaging and interactive virtual pet application developed using React for the client-side interface and Node.js + Express for the server. This unique platform allows users to build relationships with their AI-powered pets through real-time chat interactions, powered by GPT-based AI.

The virtual pet evolves over time based on user interactions, offering a personalized and dynamic user experience. User activities are stored in a document database, which compiles interaction summaries to provide context for the OpenAI API, enriching the conversation with relevant background information.

When users create an account, they receive an initial allotment of virtual currency (yarn). Yarn can be spent on activities to feed and play with their AI pets, adding a gamified element to the experience. The SQL database tracks users’ yarn balance, manages bonuses for returning users, and logs expenditures via the server's API endpoints, enhancing engagement and continuity when users visit different parts of the app.

This project is designed with scalability and user feedback in mind, allowing for continuous evolution and feature expansion.

---

Screenshots

• Landing Page:

• Home Page:

• Cat Profile Page:

• Chat with Whiskers:

• Chat with Whiskers - Mobile:

---

Features

• Real-time chat interactions with a virtual pet.
• Context-aware responses leveraging AI-backed logic and document database.
• Persistent memory using SQL for long-term engagement and data accuracy when injected into prompts.
• Client-side chat management with interaction-based memory synchronization.
• Interactive UI built with React for a seamless user experience.
• Full-stack deployment on Render for easy accessibility.

---

Technologies Used

• Backend: Node.js, Express.js
• Frontend: React, TypeScript
• Database: SQL-based storage (e.g., PostgreSQL)
• AI Integration: OpenAI GPT model 3.5-turbo (cost effective)
• Deployment: Render
• Version Control: GitHub

---

Setup and Installation

Follow these steps to get the application running on your local machine:

1. Clone the Repository

   git clone <your-repository-url>
   cd Tomogatch.ai

2. Install Dependencies

   npm install

3. Set up Environment Variables
   Create a .env file in the root directory and add the necessary environment variables:

   OPENAI_API_KEY=<your-openai-api-key>
   DATABASE_URL=<your-database-url>
   
   The remaining env variables for the project can be found in the .env.example file.
   
   

4. Run the Application - Locally

   First seed the db with the seed script in the /server:

   npm run render:start

   In the project root dir:

   npm run render:start

   Then open an additional terminal in the /client folder to allow vite to serve as your local proxy on 5173:

   npm run dev

5. Access the App
   Open your browser and navigate to http://localhost:5173.

---

Usage

1. Adopt a Virtual Pet: Choose your cat and give it a name.
2. Chat with Your Pet: Interact through real-time chat to build a relationship with your pet.
3. Experience Pet Growth: See your pet evolve based on how you treat it.
4. Long-Term Memory Updates: Enjoy contextual interactions that reflect past interactions.

---

Project Structure

The Tomogatch.ai project is organized as follows:

Tomogatch.ai/
├── client/                  # React frontend
│   ├── src/
│   │   ├── api/             # API functions for frontend requests
│   │   ├── components/      # Reusable UI components
│   │   ├── context/         # React Context for state management
│   │   ├── interfaces/      # TypeScript interfaces for type safety
│   │   ├── pages/           # React pages for routing
│   │   │   ├── Cat.tsx
│   │   │   ├── Chat.tsx
│   │   │   ├── Error.tsx
│   │   │   ├── Home.tsx
│   │   │   ├── Landing.tsx
│   │   │   ├── Login.tsx
│   │   │   ├── Profile.tsx
│   │   │   ├── signup.tsx
│   │   │   └── welcome.tsx
│   │   ├── utils/           # Utility functions
│   │   ├── App.tsx
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── main.tsx
│   │   ├── react-app-env.d.ts
│   │   └── vite-env.d.ts
│   ├── public/              # Public assets for the client - Includes all images
│   ├── dist/
│   └── .env                 # Environment variable for CATApi - landing page photos
│
├── server/                  # Express backend
│   ├── controllers/         # API request handlers
│   ├── middleware/          # Middleware functions
│   ├── models/              # SQL database models
│   ├── routes/              # API routes
│   ├── seeds/               # Seed data for testing
│   ├── templates/           # Custom prompt templates for GPT
│   ├── .env                 # Environment variables
│
├── package.json             # Project dependencies and render scripts
└── README.md                # Project documentation

---

Contributors

This project is a collaborative effort by the following contributors:

Dario dariojzb87@gmail.com

Souad souadsalahh@gmail.com

Thomas stemlertho@gmail.com

Greg gregcbarker@gmail.com

---

License

This project is licensed under the MIT License.

---

Acknowledgments

Special thanks to all contributors and the open-source community for their tools and frameworks that made this project possible.

---

Future Enhancements

• Gamification: Introduce more interactions like toys, rewards, and challenges.
• Advanced Memory Management: Implement more uses of various AI models with enhanced memory and capabilities.
• Push Notifications: Alert users when the pet needs attention.
• Mobile App: Expand the application to mobile platforms.