https://github.com/richardhosler/nextjs-zustand-zod-chat-demo

A chat demo I built to experiment with Zustand persistent storage.
https://github.com/richardhosler/nextjs-zustand-zod-chat-demo

nextjs tailwindcss typescript zod zustand

Last synced: about 2 months ago
JSON representation

A chat demo I built to experiment with Zustand persistent storage.

• Host: GitHub
• URL: https://github.com/richardhosler/nextjs-zustand-zod-chat-demo
• Owner: richardhosler
• Created: 2024-11-19T16:00:09.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-19T16:19:53.000Z (about 2 months ago)
• Last Synced: 2024-11-19T17:27:20.511Z (about 2 months ago)
• Topics: nextjs, tailwindcss, typescript, zod, zustand
• Language: TypeScript
• Homepage:
• Size: 681 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.Js Zustand Zod Chat Demo

![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![Yarn](https://img.shields.io/badge/yarn-%232C8EBB.svg?style=for-the-badge&logo=yarn&logoColor=white) ![Zod](https://img.shields.io/badge/zod-%233068b7.svg?style=for-the-badge&logo=zod&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)

A chat demo I built to experiment with Zustand persistent storage.

## Features

- 🐻 Zustand persistent storage

- 🎨 Utility styling with TailwindCSS

- 💬 Interactive message bubbles with avatars

## Screenshots

![Screenshot1](./screenshots/Screenshot_1.png)

![Screenshot2](./screenshots/Screenshot_2.png)

![Screenshot3](./screenshots/Screenshot_3.png)

## Tech Stack

- Next.Js Framework

- Zustand for persistent storage

- Zod for input validation

- TailwindCSS for utilty styling

- ESLint for clean source

## Getting Started

1. **Install dependancies**

   ```

   yarn

   ```

2. **Start the Application**

   ```

   yarn dev

   ```