Click to Visit Site (클릭시 사이트 이동) (https://shanabuddy.online/)

Built With

Functionality

Login

Write, Edit, Delete Post

Send, Accept, Cancel Friend Request

Change Application Language

Edit, Upload, Delete Profile Image

Like, Unlike, Comment on Post

Join Chat Room

Chat Privately with Friend

Implementations

Log In Process

Client sends login request to API server containing user credentials and API key.
An API server receives login request from client.
If user credentials are valid, server queries MySQL database and fetches user information.
Server removes private data (i.e password) from user data and sends it as response with authToken (Json Web Token) as HTTP Only Cookies.
Cookies are set in browser by server.
Client receives and user data, verifies its validity and stores user information in Redux store and local storage (Redux Persist)

Verifying User Credentials

Protected Routes

Implementation of protected Route components to only grant access to authorized users. Authorization check request is sent to server on every Route transitions.

HTTP Only Cookie

Every request sent to server carries HTTP only Cookies to verify its authToken stored in browser.

Redux & Redux Persist (Local Storage)

Redux Persist allows states to be saved in multiple storage environments. While values like user input can be subjected to single component, values that are used throughout the application may be better stored persistently (i.e: currently logged in user). Implementing custom solution to persist those values would require extensive time for debugging and standardizing for cross platforms so I have settled on using Redux Persist.

Current logged in user information is saved in Local Storage through Redux Persist. Upon removing user crendentials, current user information is reset.

PROJECTS