Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prasanth2817/chat-application-frontend
The chat application frontend, built with React and Vite, offers a responsive UI styled with Tailwind CSS. It features a sidebar for recent conversations and a real-time chat window using WebSocket. Zustand manages state, while JWT handles user authentication. The app is fully mobile-responsive and interacts with the backend via REST APIs.
https://github.com/prasanth2817/chat-application-frontend
bootstrap5 context-api css3 javascript react react-router tailwindcss zustand-state-management
Last synced: 17 days ago
JSON representation
The chat application frontend, built with React and Vite, offers a responsive UI styled with Tailwind CSS. It features a sidebar for recent conversations and a real-time chat window using WebSocket. Zustand manages state, while JWT handles user authentication. The app is fully mobile-responsive and interacts with the backend via REST APIs.
- Host: GitHub
- URL: https://github.com/prasanth2817/chat-application-frontend
- Owner: prasanth2817
- Created: 2024-10-08T18:30:44.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-17T18:15:48.000Z (29 days ago)
- Last Synced: 2024-10-29T09:09:34.466Z (17 days ago)
- Topics: bootstrap5, context-api, css3, javascript, react, react-router, tailwindcss, zustand-state-management
- Language: JavaScript
- Homepage: https://chat-app-wechat.netlify.app/
- Size: 109 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Chat Application Frontend :
Overview
The frontend of this chat application is built with React and Vite, offering a responsive, modern user interface. It allows real-time messaging, user authentication, and smooth navigation between conversations. The design is implemented using Tailwind CSS for a seamless user experience on both desktop and mobile devices.
Features
React with Vite for fast development and optimized performance.
Zustand for lightweight state management.
Socket.IO for real-time messaging.
JWT Authentication for secure login and session management.
Tailwind CSS for responsive, mobile-first design.
Dynamic API URL handling using environment variables (import.meta.env).
Deployed on Netlify.
Installation:
1.Clone the repository.
2.Install dependencies:
npm install
3.Create a .env file and add your environment variables:
VITE_API_URL=
4.Start the development server:
npm run dev
Scripts:
npm run dev: Start the development server.
npm run build: Build the project for production.
