Skip to content

andriibezkorovainyi/dzen-client

Repository files navigation

DZEN-CLIENT

Dzen-client is a front-end part of SPA commentaries application. It gives a user interface to interact with an App.

DEMO

Back-end:

  • dzen-api - responsible for maintaining a WebSocket connection with the client, commentaries service
  • dzen-http-server - establishing an HTTP connection, providing users, files, and captcha services

Table of Contents

Features

  • Store data in database: All the comments are stored in database, including user's name, message, date, time of sending and user's ip.
  • Real-time messages: All the messages are sent and received in real time.
  • Replying: You can reply to the comment by clicking on the reply button.
  • Files sharing: Pin a file to your message and share it with other users. You can upload .jpg, .jpeg, .png, .gif, and .txt files.
  • Files validation: The maximum image size is 320x240px, if you try to upload larger image - it will be automatically resized to maximum allowed dimensions and the maximum file size is 100 KB.
  • Files preview: You can preview the image before sending it.
  • Files download: You can download the image by clicking on it.
  • SignUp/LogIn: You can sign up or log in to your account to send messages.
  • User data validation: All the user data is validated on the client side and on the server side.
  • Comment preview]: You can preview your comment before sending it.
  • Sorting: You can sort the comments date, username and user's email.
  • Pagination: You can navigate through the comments using pagination.
  • Captcha: You can't send a message if you didn't pass the captcha.

Technologies

  • Vite - a build tool that aims to provide a faster and leaner development experience for modern web projects.
  • React - a JavaScript library for building user interfaces.
  • TypeScript - a typed superset of JavaScript that compiles to plain JavaScript.
  • Axios - a promise-based HTTP client for the browser and node.js.
  • React Router - a collection of navigational components that compose declarative with your application.
  • Browser WebSocket - a communication protocol that allows for full-duplex communication between a client and a server.
  • Yet another react light box - a lightbox component for React.
  • React image file resizer - a React component that resizes an image file before uploading to server.
  • Lodash - a JavaScript library that provides utility functions for common programming tasks.
  • React google recaptcha - a React component for Google reCAPTCHA v2.

Installation

To install the project, follow these steps:

  1. Clone the repository with git clone
  2. Run npm install in the root directory
  3. The project requires these environment variables to be set:
    • VITE_HTTP - the url of the http server part of the application including the port(e.g. http://localhost:3000)
    • VITE_WSS - the url of the websocket server part of the application(e.g. ws://localhost:5000)
    • VITE_SITE_KEY - the site key of the captcha. Use your own or request it from the author.
    • VITE_SECRET_KEY - the secret key of the captcha. Use your own or request it from the author.
  4. Run npm run dev in the root directory to start the development server

Contributing

Contributions are welcome! If you want to contribute to [dzen-client], follow these steps:

  1. Fork the repository.
  2. Create a new branch.
  3. Make your changes.
  4. Submit a pull request.

License

MIT

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages