https://github.com/shubhamsinha21/chatapp-interface
Chat Application Interface with Responsiveness
https://github.com/shubhamsinha21/chatapp-interface
chakraui nextjs reacticons reactjs reactrouterdom
Last synced: 8 months ago
JSON representation
Chat Application Interface with Responsiveness
- Host: GitHub
- URL: https://github.com/shubhamsinha21/chatapp-interface
- Owner: shubhamsinha21
- Created: 2023-12-05T22:19:51.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-06T10:06:29.000Z (almost 2 years ago)
- Last Synced: 2025-01-05T16:40:11.494Z (9 months ago)
- Topics: chakraui, nextjs, reacticons, reactjs, reactrouterdom
- Language: JavaScript
- Homepage:
- Size: 97.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Chat Interface App
# This is a chat interface 💻 web application built using Next.js 🌟 and Chakra UI. The combination of Next.js and Chakra UI provides a powerful and efficient framework for building React applications with enhanced developer experience and responsive design.
Lets have a look of the ChatApp Interface 🙂 -
Deployed Link - https://chatinterfaceapp.netlify.app/
## Main Components 🤔
1. NavBar:
- Displays a navigation bar with a logo, explore, create, edit, and login button.
2. ChatList:
- Lists all chats on the left side.
- Each chat entry includes the sender's image and name.
3. ChatWindow:
- Displays selected chat details on the right side.
- Sender's image and name appear on the left side.
- Messages displayed with alternating background colors for sender and recipient.
## Project Structure
## Features 💁♂️
1. Server-Side Rendering (SSR):
- Utilizes Next.js for server-side rendering, improving performance and SEO.
2. Chakra UI for Styling:
- Uses Chakra UI for styling components, providing a customizable and consistent design system.
3. Navbar:
- Simple navigation with a logo, explore, create, edit, and login button.
4. Chat List:
- Displays a list of chats on the left side.
- Each chat entry includes the sender's image and name.
- Clicking on a chat opens the corresponding chat window on the right side.
5. Chat Window:
- Presents selected chat details with a responsive design.
- Sender's image and name appear on the left side.
- Messages displayed with alternating background colors for sender and recipient.
- Responsive design for both desktop and mobile views.
6. Responsive Design:
- Ensures a fully responsive design for a seamless experience on various devices.
- On desktop, both the chat list and chat window are visible.
- On mobile, only the chat list is initially visible. Clicking a chat opens the chat window.
## How to Run on your PC 👇🏻
1. Clone the repository:
```bash
git clone
cd
2. Install Dependencies
npm install
4. Run the application
npm start