socket-chat.md

Scoober Frontend Challenge Server Side

Introduction

This is the server part of the challenge that can be optionally used by the candidate to complete the frontend technical challenge. It is using socket.io to serve the communication between clients. Clients can subscribe to different events to complete the requirements. ​

Running the app

Note: work is done under develop branch. Please make sure you're checked out to that branch.

Server

cd ./wss

## Copy env files
cp .env.example .env

# Install node modules
npm install

# Starting the fake DB JsonServer
npm run start:server

# Establish the socket connection
npm run start

Client

cd ./client

# Install node modules
npm install

# Starting the fake DB JsonServer
npm run start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Available Scripts

In the project directory, you can run:

npm run test:watch

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.

Heirarchy

1. Frontend architecture is done from scratch using Webpack.

2. Used Webpack to extract styles to different files (if any), run builds to respoective mode either in development or production, bootstraping the app and set target directory to compiled files.

3. Typesript, style-components and react-router are being used within the app.

4. All functionalities are components-based for reusability, maintainability and scalability of the app.

5. React Hooks and redux to share/pass data between components.

6. Not too many external libraries used to keep it simple and scalable.

🧐 What's inside?

A quick look at the top-level files and directories you'll see in this project.

├── webpack.config.js
├── jest.config.js
├── tsconfig.json
├── package.json
├── .gitignore
├── node_modules
├── __mocks__
└── src
  ├── App.tsx
  ├── index.tsx
  ├── react-app-env.d.ts
  ├── reducers.ts
  ├── store.ts
  ├── types.ts
  ├── components
  ├── constants
      ├── reducer
  ├── shared
  └── views

📝 Notes

• I've used socket.io-client library v2 after failing to establish connections with v5 (I assume compatibility issues? needed more time to debug)
• Something is not clear to me, when I (user) win the game, the socket kept sending messages after which changes the winner status, therefore I stopped listening to the socket to be able to show the result but that affected to new game funcitonality. (ref -> Game.tsx line 102/103). This is a fast solution at the moment that I can invest more on to solve.
• Responsiveness wasn't taken much into account. Could have used the mobile-first methodology if needed.
• Lastly, there are some room for improvements but time is a bit tight, we can discuss that later.