Skip to content

solygambas/react-blogging-platform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blogging Platform

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

Demo

See Demo deployed on Netlify

See Demo deployed on Netlify

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 by Brad Schiff (2020).