React Social App

Good day, friends!



Looking for inspiration, I came across this great tutorial on developing a "social" client-server application in MERN + GraphQL.



I decided to decipher it and modify it a bit for those interested. Decryption means that each line of code is provided with a detailed commentary. The refinement consists in adding a user avatar and fixing several critical errors for the application.



The project code is here .

Main features of the application

• Registration / authorization of users
• Add / remove posts
• Like / dislike posts
• Add / remove comments to posts
• Displaying the number of likes and comments

Technology stack

Server:

• Apollo Server
• GraphQL + GraphQL Tag
• Mongoose
• JSON Web Token
• Bcrypt
• Supervisor
• Concurrently

Client:

• React
• ReactDOM
• React Router DOM
• Apollo Client
• GraphQL + GraphQL Tag
• JWT Decode
• React Loader Spinner
• Semantic UI React

Project structure

- client - 
  - public
    - index.html -  
  - src
    - modules
      - components
        - CommentButton.js -   
        - DeleteButton.js -      
        - LikeButton.js -   
        - MenuBar.js -  
        - PostCard.js -  ,    
        - PostForm.js -     
        - index.js -  
      - context
        - auth.js -     
        - ...
      - pages
        - Home.js - / 
        - Login.js -  
        - Register.js -  
        - SinglePost.js -   
        - index.js -  
      - utils
        - Loader.js -  
        - MyPopup.js -  
        - authRoute.js -    
        - convertImg.js -      base64-
        - formatDate.js -    
        - useForm.js -      
        - index.js -  
      - graphql.js -    graphql
    - ApolloProvider - ,     
    - App.css -   semantic
    - App.js -   
    - index.js -   ,    Webpack
  - jsconfig.json -  
  - ...
- graphql
  - resolvers - ,          graphql
    - comments.js -   
    - posts.js -     
    - users.js -   
    - index.js -    
  - typeDefs.js -   () ,   
- models
  - Post.js -  
  - User.js -  
- utils
  - check-auth.js -    
  - validators.js -     
- index.js -   
- ...

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Installation and launch instructions are in the project repository.

Application screenshots

For obvious reasons, I cannot show the demo of the application, so I will limit myself to screenshots.



Registration







Authorization







Main page







Post page







Delete post or comment







Database







As always, I will be glad to any form of feedback.



Thank you for your attention and have a nice day.