eawww / recipeace Goto Github PK

Using react-router we gotta implement the routing on the front-end. To start with, we'll just need /controller and /display.

App.js is a good place for the routing.

Each route will need an accompanying page component, but these components can be as simple as a single <h1>Controller</h1>

Styling and whatnot.

Stuff Needed:

• socket.io server with controller and display namespaces
• Dev proxy configuration
• socket.io-client needed on frontend

This is the page that will be displayed on the countertop.
The Display page needs built!
MVP needs these features:

• Opens and maintains socket.io client connection to /display namespace on server. Reference to this client could (should?) be stored in a useRef ref.
• Upon receiving a 'recipe' message over websocket, renders that information to the page. For now, it's fine if that information is rendered as raw text.

The Controller page needs built!
MVP needs these features:

• Opens and maintains socket.io client connection to /controller namespace on server. Reference to this client could (should?) be stored in a useRef ref.
• Has a single line text input field for pasting a URL
• Button for sending the url to the server
• Sends url to server over websocket connection with an appropriately named message type ('urlUpdate' or whathaveyou)

Still don't know exactly how we're gonna do this but it'll take place on the server side. It'll go like this:

1. Controller sends url to server
2. Server fetches page contents
3. Parses out the good nuggets.
4. Sends that info to the frontend

When the display connects, the server should automatically send the URL of the controller.