https://github.com/solygambas/react-blogging-platform

A blogging platform using React Hooks, MongoDB Atlas, Express and Node.js.
https://github.com/solygambas/react-blogging-platform

express expressjs javascript mongodb node node-js react reactjs socket-io

Last synced: 22 days ago
JSON representation

A blogging platform using React Hooks, MongoDB Atlas, Express and Node.js.

• Host: GitHub
• URL: https://github.com/solygambas/react-blogging-platform
• Owner: solygambas
• Created: 2020-05-12T10:15:37.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T22:26:13.000Z (over 1 year ago)
• Last Synced: 2024-10-11T11:08:36.164Z (about 1 month ago)
• Topics: express, expressjs, javascript, mongodb, node, node-js, react, reactjs, socket-io
• Language: JavaScript
• Homepage: https://react-blogging-platform.netlify.app/
• Size: 1.83 MB
• Stars: 3
• Watchers: 4
• Forks: 1
• Open Issues: 45
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blogging Platform

A blogging platform using React Hooks, MongoDB Atlas, Express and Node.js.

## Demo

[See Demo deployed on Netlify](https://react-blogging-platform.netlify.app/)



  

    

  



## Core features

- handling routes with React Router.

- connecting the front-end to an Express back-end with a MongoDB Atlas database.

- sending requests to the server with useEffect, Axios and async/await method.

- managing connected users with localStorage.

- combining useReducer and Context to handle global state.

- handling form validation with React hooks and useImmerReducer.

- displaying error/success messages with Context.

- performing CRUD operations (create, read, update, delete) for posts.

- displaying profile with the latest posts published by author.

- handling markdown in posts with react-markdown.

- showing user-friendly messages with react-tooltip.

## Live Search Feature

- handling key press events with useImmer and setTimeout().

- showing/hiding the modal gradually with CSS animations and react-transition-group.

- creating an index in MongoDB Atlas.

## Follow Feature

- handling follow and unfollow features on author profile.

- retrieving followers and followed users from the database.

- showing posts, followers and followed users in tabs with Switch and NavLink.

- displaying a feed on the dashboard with the latest posts published by followed users.

## Live Chat

- handling realtime communication between web clients and server with Socket.IO.

- sending messages with emit() and waiting for messages with on().

- listening to an input field with useRef.

- displaying usernames and avatars in the live chat.

## Live Validation

- displaying errors on the fly for registration form with regex.

- checking if username and email are already taken with useImmerReducer.

- performing a last check before submitting the form.

## Performance

- cleaning useEffect to avoid memory leaks.

- lazy-loading Search and Chat components with Suspense.

- building a HTML pre-render with ReactDOMServer and @babel/node.

## Deployment

- deploying the back-end on Render.

- deploying the front-end on Netlify.

Based on [React For The Rest Of Us](https://www.udemy.com/course/react-for-the-rest-of-us/) by Brad Schiff (2020).