Angle Berry Client

This project consists of two repositories:

• Angle Berry Client (Current)
• Angle Berry Server

Technology stack

Client

• TypeScript
• Svelte & SvelteKit
• TailwindCSS

Server (Database)

• PocketBase

Dependencies

Angle Berry Client

• @sveltejs/adapter-vercel
• @sveltejs/kit
• @sveltejs/vite-plugin-svelte
• autoprefixer
• cssnano
• phosphor-icons-svelte
• pocketbase
• pocketbase-types
• postcss
• postcss-load-config
• prettier
• prettier-plugin-svelte
• prettier-plugin-tailwindcss
• svelte
• svelte-copy
• svelte-hot-french-toast
• svelte-loading-bar
• svelte-outclick
• sveltekit-superforms
• tailwindcss
• tailwindcss-addons
• typescript
• vite
• zod

Angle Berry Server

• PocketBase

Hosting

• Angle Berry Client is hosted on Vercel.
• Angle Berry Server is hosted on?

Development

• Install NodeJS (v20.10.0 stable).
• Install PNPM (v8.14.0 stable).
• Install Git (v2.40.1.windows.1 stable).
• Install vsCode - Optional.

Clone the repositories

• Run git clone --depth 1 https://github.com/babakfp/angle-berry-client.git.
• Run git clone --depth 1 https://github.com/babakfp/angle-berry-server.git.

Setup

Open the projects in two separate vsCode instances, and:

1. In the angle-berry-server directory, open a terminal and run the following command to start the server: pnpm serve.
2. Once the server is running, copy the domain address displayed in the terminal. For example, it might be http://127.0.0.1:8090.
3. In the angle-berry-server directory, duplicate the .env.example file located in the root of your project and rename the duplicate file to .env.
4. Update the value for PUBLIC_PB_URL in the .env file with the copied domain address.
5. Run pnpm i and pnpm dev.
6. Done 🎉.

angle-berry-client auth credentials

There are two users that you can switch between by the user menu:

• User
  • Username: user
  • Password: useruser
• Admin
  • Username: admin
  • Password: adminadmin

angle-berry-server admin credentials

Use this to log in to the PocketBase dashboard:

• Email: [email protected]
• Password: [email protected]

Commands

• dev: This runs the project in development mode.
• build: This builds the project. You don't need to run this.
• preview: This previews the built project.
• prepare: This isn't important. You don't need to run this.
• format: This makes the code look pretty.
• typegen: This generates PocketBase TS types. Use this to update the types when the PocketBase schema changes.

Todo

• Issue: When sending a new message in the chat and immediately attempting to edit it, the message content is not automatically written in the input box. This issue seems to be related to the "bind" keyword. However, it is important to note that this functionality works fine for old messages.