Git Product home page Git Product logo

mahmodghnaj / chatxo-frontend Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 2.0 814 KB

The ChatXo is a Next.js application that allows two users to communicate with each other through real-time chat. It provides features such as friend management, allowing users to add, delete, and search for friends. The application supports authentication through social media platforms

Home Page: https://chat-xo.vercel.app

JavaScript 15.59% TypeScript 70.09% CSS 14.32%
chat-app chat-application chat-website next-13 nextjs nextjs13 posscss react redux-toolkit socket-client

chatxo-frontend's Introduction

ChatXo

The ChatXo is a Next.js application that allows two users to communicate with each other through real-time chat. It provides features such as friend management, allowing users to add, delete, and search for friends. The application supports authentication through social media platforms

Demo

Check out the live demo of the application.

Backend Repository

You can find the frontend source code in the ChatXo-backend repository.

Features

  • Real-time Chat: Users can engage in real-time chat with each other, sending and receiving messages instantly.
  • Friend Management: Users can add friends, delete friends, and search for friends to initiate chats with them.
  • Last Seen Date: The application displays the last seen date of each user, indicating when they were last active.
  • User Status: Users' online/offline status is shown, indicating whether they are currently active or not.
  • Message Receipt: The application provides flags to indicate whether a message has been received or not.
  • Social Media Authentication: Users can log in or register using their Google or GitHub accounts for seamless authentication.
  • Middleware authentication in Next.js (server-side)
  • State Management: Redux Toolkit is used for efficient state management in the application.
  • UI Design: The application uses Tailwind CSS for a responsive and visually appealing user interface.

Technologies Used

  • Next.js: A React framework for building server-side rendered and statically generated applications.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
  • Socket.IO: A library that enables real-time, bidirectional, and event-based communication between the browser and the server.
  • Redux Toolkit: A package that simplifies Redux state management and provides utilities for efficient development.

Installation

$ npm install

Running the app

# development
$ npm run dev



# production mode
$ npm run build

chatxo-frontend's People

Contributors

mahmodghnaj avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.