This project allows sharing posts between users of this application, in which they can share thoughts, reply with information and vote for the most useful answer. All in a secure way to ensure data consistency and privacy between users.

It is divided into a backend part written in Django and GraphQL and a frontend in React with a custom style made by @threeinfiniteaxes.

Forum App is made in Django and GraphQL (Graphene library) to provide a scalable API for any client, web based and mobile if neccesary. The persistence layer is made using PostgreSQL and Django Models. Secure login is also present in form of JWT which is supported by the front end. In addition, it manages the creation of replies to ensure data consistency on the database.

The React application uses Apollo GraphQL client to connect with the backend service. Internally it uses a cache mechanism which ensures the latest data without making unnecessary requests that is provided from the same library. The security is managed under-the-hood for creating resources, such as posts or replies. For voting, it also ensures consistency to avoid multiple votes for the same user and same reply or post.

Under the hood, it uses styled-components library for a CSS-in-JS solution inside React. What is CSS-in-JS? It is a combination of properties similar to CSS inside JavaScript code that ultimately will be converted to plain CSS but offering the capabilities of adding functions, adapt to property changes in real time with changes of the state of the application and more. It is like giving programming features to styles that in plain CSS or SCSS are not possible to implement.

While this makes the code highly coupled into your style, it offers many benefits - many more compared to what I’ve mentioned. It also makes the CSS and functions testable, so it is rather beneficial at the long run rather than perjudicial. At the beginning it takes time to be accustom, more if you come from a CSS only background, but you’ll see and take the benefits right away.

Styled-components library offers creating components in a React way with also offering the option to pass down properties that could change the style of it, without coding a lot. This also offers the option to distribute the usage of the components inside the application and adapt to styles according to the context of it. This is the main reason here that I decided to use this library.

On the other hand, it is somehow difficult to implement basic responsive behavior using this approach. So a combination of CSS/SCSS with CSS-in-JS is also acceptable at this point, or use hooks to react for width changes of the viewport and display the correct version according to the screen size. This is one of the main challenges of this project for rendering in displays other than desktop or tablet size.