Dzen-client is a front-end part of SPA commentaries application. It gives a user interface to interact with an App.
- 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
- 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.
- 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.
To install the project, follow these steps:
- Clone the repository with git clone
- Run
npm install
in the root directory - 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.
- Run
npm run dev
in the root directory to start the development server
Contributions are welcome! If you want to contribute to [dzen-client], follow these steps:
- Fork the repository.
- Create a new branch.
- Make your changes.
- Submit a pull request.