A MERN stack blogging PWA(Progressive Web App), with user authentication and social login using Twitter and Google accounts.
git clone <forked repo>command from your terminal/bash
.envfile in the root directory and store the following:
You can obtain the MONGO_URI after create a collectoin on mongodb atlas. For the GOOGLE_CLIENT_ID and the TWITTER_CONSUMER_SECRET/ID, you will need to go through the Google developer console and the Twitter developer accounts page respectively
The app has been hosted on heroku here. P.S: You might have to wait for a few seconds for the heroku site to respond.
There were a few challenges that came up during the development of the application. In this section, I aim to clarify my approach in overcoming these challeges, as a way to help you understand the code better, in case you decide to dive in!
I initially intended on using the authentication token strategy to authenticate users, but that process of authentication seemed to be a little more cumbersome for the final user. This is why the social logins was the next solution to try and implement using the passport-google-oauth and the passport-twitter strategies. The server side of the implementation involves obtaining a JWT from the client, based on the unique IDs assigned by either Google/Twitter and processing it to validate the user session or revoke it. The clint side implementation involves displaying the correct social login buttons using react-google-login and react-twitter-login. Note that these npm packages aren't meant to be used as stand-alone modes of user authentication in production sites. They are only used to obtain the valid JWT in each case, these session cookies are stored in the local storage of the user's browser for a day, and are then timed out (user is logged out) in case of inactivity. The credentials for the google and twitter login can be obtained using the developer accounts for both platforms.
Another important issue that I realized during the development process was that the blog input is basically an open ended user input that is being stored in the DB and is displayed to the user screens(for users who haven't registered, as well as registered users). This could lead to potential XSS attacks as any malicious code injection can also take place in the comment section/ blog post input. To avoid any such risks, it is important to sanitize the user input before POSTing it to the DB. The sanitize-html-react package is a handy subsidiary to the more widely used sanitize-html package, which removes any potential script tags from begin executed as part of the user input blog post/comment.
Although it may seem obvious that the editor used in a blogging platform needs to support multiple text editing options, it was a little challenging to find the appropriate solution to fit the needs of the current project. There were many WYSIWYG editors which provided sufficient documentation too, but in the end, the most optimal solution to the issue was to use the CKeditor rich HTML editor's React component implementation, with a custom toolbar configuration. The other options included react-markdown-editor-lite and the react-draft-wysiwyg
The Bootstrap classes allowed for the design of the app to become a responsive onw, without many custom CSS media queries. The app design is minimal by design, and the emphasis is laid on the blog posts itself, rather than the design of the app's compnents. The app also has PWA support due to React's ability to activate service workers to cache the required data, as set by the developer. It is not an ideal type of app structure to facilitate the PWA design, but it can work to cache specific blog posts incase it was already accessed beforehand.
The choice to make the comment section anonymous was a deliberate design choice, as it makes it easier to let users engage with the application without much hassle. But the downside to this is that the comment section can seem dull/artificial, without a user name or photo associated with the comment. To overcome this, I have included a unique Jdenticon or user icon, for every comment made under the blog post. The comments are displayed in reverse chronological order and will always have a unique icon associated with it! The other issue with the anonymous comments section, which became apparent after the initial build being pushed to production, was that users now used language that was NSFW. Since this is a project I intend to display on my portfolio, for potential employers, it was necessary to deal with words can be deemed NSFW. The easiest solution is to restrict only authenticated users to comment, along with their public social media name. But trolls with a fake account can easily bypass this. Hence it became necessary to censor certain words from the posted comments using * symbols. This was accomplised using the package bad-words package to censor NSFW words unconditionally. There is scope for improvement in terms of implementing a custom profanity filter, but that seemed to be overkill for the task at hand. It is not my intention to hinder anybody's freedom of speech, but a reactionary decision against a few bad actors, in an effort to maintain the application's presentability.
Any more suggestions are always welcome in the PRs!
Some of the technologies used in the development of this web application are as follow:
It can be noted that React can be swapped out in favor of any other popular frontend framework like Vue, Angular, Svelte or Ember. The server side can be implemented using Deno/Koa, flask/Django and similarly the data can also be modelled using the similar idea but with a SQL type DB like PS-SQL or MSSQL.