About Drawthing

The main concept and idea of this project is learning and discovering the ways in which new and modern web technologies work, the way that they cooperate with each other in order to breathe life into today's modern web applications. The main focus in this application is real-time communication between server and clients provided by WebSockets. In the process of creating this web application I have tried to explore all the possibilities and benefits that WebSockets offer. WebSockets are interesting and popular on the web today, also they are relatively new to me and that's the reasons why I chose this kind of project. Large number of guides that I've run into led me to Node.js, but I wanted to do it in PHP, and then I met Swoole (PHP framework). It supports WebSockets along with a bunch of other stuff. Been playing with it for three days, and all I can say is that it's really amazing. I want to point out that these technologies are not randomly selected. Each of them has its own purpose, and task to do (problem to solve). Below you can read more about what they do in this application.

Technologies that made Drawthing project possible:

Backend

Laravel

Main component that connects other components, handles the whole game (routing, authentication, restfull API...). I chose this framework because it is much simpler than the others, do complex things without pain, written code is very intuitive.

Swoole

Provides HTTP and WebSocket Server. Responds to requests from outside with help of NGINX's reverse proxy. Powers up Laravel (giving him huge speed) by keeping bootstrap files in memory, giving PHP possibility to do tasks asynchronously.

Node.js

Primarily used for server side rendering (SSR). Render HTML from React.js app, so we can solve SEO problem by not providing blank page, also used in dev environment.

Frontend

React.js

This project was imagined to be Single Page Application (SPA) and that wouldn't be possible without React.js All HTML elements, all forms, the whole game UI that you see here is rendered by React.js.

Redux.js

Used in combination with React. manages application state. Thanks to redux i have access to data in any React component without (passing props) pain. Gives you ability to separate your code logic from view.

Storage

MySQL

Relational Database Management System, really efficient way for manipulating important game data.

Redis

Efficcient and fast in-memory key-value database with optional durability. Used to cache data for better application performance.