https://harshit-18mcmc42.herokuapp.

com/

Created by -->
*Harshit(18MCMC42).

-----------******** Index ******** ------------

1) Acknowledgment
2) About Project
3) Technologies or Dependencies Required
• MERN
• Axios and Socket.io
• Body-Parser and CORS
• Redux and Thunk
• Semantic UI
4) Detail Discussion of Project
5) Links and References
 Acknowledgement

I would like to express my special thanks of gratitude to my teacher ( Dr. P S V Sai

Prashad ) who gave me the golden opportunity to do this wonderful project on the topic
(REST API and WebSocket -> SOCKET.IO), which also helped me to improving my
knowledge on recent Technology Process and I came to know about so many new things
I am really thankful to him. I really enjoyed while creating this project

I am also grateful to Youtuber for providing such a wonderful knowledge for

free. Special thanks to Brad - (Traversy Media).

About Project

This is a simple Web Application Project which uses MERN (MongoDB, Express, React,
Node), WebSocket (Socket.io) and REST technologies.
It is a Game (Tic Tac Toe) application where user can use their Google credentials
to login and Play. For each game session there will be Chat Box where you can chat with
your Opponent user.
It provides a Dashboard for each from where user can see their score and can create a
new game. It is https #secure so need of worry 😊😊. Simply Join and Play.
 Technologies or Dependencies
Required

1-- -> MERN :

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

The top tier of the MERN stack is React.js, which is a

declarative Component-Based JavaScript library for creating
dynamic client-side applications in HTML.

The next level down is the Express.js server-side framework,

running inside a Node.js server. Express.js is a Fast,
unopinionated, minimalist web framework for Node.
Express.js has powerful models for URL routing (matching an
incoming URL with a server function), and handling HTTP
requests and responses. By making XML HTTP Requests
(XHRs) or GETs or POSTs from your React.js front-end, we
can connect to Express.js functions that power application.
The third or last tier of MERN is MongoDB which is a cross-
platform document-oriented database program. Classified
as a NoSQL database program, MongoDB uses JSON-like
documents with optional schemas.
I have used these technologies to make full stack web
application.

2-- -> Axios and Socket.io :

Axios is a popular, promise-based HTTP client that supports an easy-to-use API and can be used in both
the browser and Node.js for making HTTP requests to fetch or save data is one of the most common tasks a client-
side JavaScript application will need to do.

Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and
the server. Using socket.io client will try to establish a WebSocket connection if possible, and will fall back on HTTP
long polling if not. WebSocket is a communication protocol which provides a full-duplex and low-latency channel
between the server and the browser.

3-- ->Semantic UI :
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
It is similar to Bootstrap.
4-- ->Body-Parser and CORS :
Body-parser extract the entire body portion of an incoming request stream and exposes it on req. body . The
middleware was a part of Express.js earlier but now you have to install it separately. This body-parser module
parses the JSON, buffer, string and URL encoded data submitted using HTTP POST request.

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be
requested from another domain outside the domain from which the first resource was served. A web page may
freely embed cross-origin images, stylesheets, scripts, iframes, and videos.

5-- ->Redux and Thunk :

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries
such as React or Angular for building user interfaces.

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk
can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function
receives the store methods dispatch and getState as parameters.

Detail Discussion of Project

The Application is a single Page web application which consists of 4 routes (pages). Don’t get
misunderstood with single Page and 3 pages.

Here Single Page Web Application means a

web application or website that interacts
with the user by dynamically rewriting the
current web page with new data from the
web server, instead of the default method of
the browser loading entire new pages.

The website has three routes :

1) Game List routes at ‘/’

2) User Dashboard routes at
‘/dashboard’
3) Make game routes at ‘/makegame’
4) Play game routes at ‘/game/id’
 The application uses Axios for REST call and Socket.io for maintaining Realtime connection between user and
servers.

In this application I am preforming GET method call to fetch game and user details from server and POST method
call to create or update (not using PUT) user and game information to the server(database MongoDB).

Example :

app.post("/signIn", (req, res) => {

...
....
});

app.get("/fetchGames", (req, res) => {

...
....
});

function onPlayerConnect(socket, req, res) {

...
...,
}

This application also Google OAuth2 authentication. To allow this website to have OAuth2 I
have used a Google API.
The following diagram explains the detail architecture of the Website.

Links and References

I highly recommend to watch this video to get the clear understand Socket.io

1) https://www.mongodb.com/mern-stack
2) https://socket.io/docs/v3
3) https://semantic-ui.com/

Thank You…