# TheraChat | Enactus Eswatini | OnPoint Systems

> author: Dlamini Lindelwa<sfisolindelwa@gmail.com>

TheraChat is an Eswatini based platform that was initiated in 2024 to address mental health related issues.

## Mission and Vision

Our mission is to mitigate the increasing prevalence rate of depression post COVID 19 especially amongst the youth,
create a bridge between mental health services and technology, reduce the stigma related to mental health issues, offer
mental health services at affordable prices and allow people from different society classes to receive mental health
services.

# Documentation - Devs

TheraChat leverages the following technologies:

#### 2.1 Next.js

- **Reasoning**: Next.js was chosen as the frontend framework due to its robust features, including server-side
  rendering (SSR), static site generation (SSG), and excellent developer experience.
- **Benefits**:
    - **Built-in API Support**: Next.js allows us to create API routes alongside our frontend components, making it
      seamless to handle backend functionality.
    - **Extensibility**: The modular architecture of Next.js enables easy integration with other libraries and tools.
    - **SEO Optimization**: SSR and SSG enhance SEO performance.
    - **TypeScript Support**: Next.js provides strong TypeScript integration, which aligns with our tech stack.

#### 2.2 AppWrite (Pluggable Backend)

- **Reasoning**: AppWrite was chosen as the initial backend solution primarily for its authentication capabilities.
- **Benefits**:
    - **Authentication**: AppWrite provides secure authentication out of the box.
    - **Pluggability**: We recognize that backend requirements may evolve. AppWrite's pluggable nature allows us to
      switch to a different backend solution (e.g., Firebase, AWS Amplify) as needed for scalability.
    - **RESTful APIs**: AppWrite offers RESTful APIs, which align with Next.js API routes.

### 3. Backend Extensibility

TheraChat's backend is designed to be pluggable. As the platform grows, we can seamlessly transition to a more scalable
solution without disrupting the frontend. Considerations for future backend changes include data storage, real-time
communication, and scalability.

### 4. Next.js Usage and Extensibility

Next.js provides a powerful foundation for TheraChat:

#### 4.1 API Routes

- **Usage**: We create custom API routes (e.g., `/api/messages`, `/api/users`) to handle backend logic.
- **Extensibility**: As new features are added, we can expand our API routes to accommodate additional functionality.

#### 4.2 Pages and Components

- **Usage**: Next.js pages represent different views (e.g., login, chat, user profile). Components are reusable building
  blocks.
- **Extensibility**: We can easily add new pages and components as TheraChat evolves.

#### 4.3 TypeScript Integration

- **Usage**: TypeScript enhances code quality, type safety, and developer productivity.
- **Extensibility**: As the codebase grows, TypeScript helps prevent common errors and facilitates collaboration.

### 5. Conclusion

TheraChat's technology stack, combined with its pluggable backend and extensible Next.js architecture, positions it well
to address mental health needs effectively.

## Getting Started - Developers | Installation and Development

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and
load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use
the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

# Cheat - Codes

### Static deployment, with SSR

> :warning: **Note:** use only for development purposes, never deploy this to production.

```javascript
const nextConfig = {
    output: "export",
    images: {
        unoptimized: true,
        remotePatterns: [
            {
                protocol: "https",
                hostname: "placehold.co",
            },
        ]
    }
};
```


# Inspiration

- https://lettstartdesign.com/themes/proctu-react-template/app/doctor-overview
