Updated README.md to provide project set up instructions, renamed endpoint 'route' to 'link' in server index

Author: Andy-Wu12

README.md

@@ -1,8 +1,8 @@
 # dogs
 
-This is the starter code for a [Node.js](https://nodejs.org/en/about/) server
-using the [Koa web framework](https://koajs.com/). There a web page in
-`/public` which should be served to the user.
+This is a [Node.js](https://nodejs.org/en/about/) web application
+using the [Koa](https://koajs.com/) and [React](https://reactjs.org/)
+web frameworks.
 
 ## Getting started
 
@@ -17,24 +17,59 @@ $ node --version
 v16.17.0
 ```
 
-Then, inside this project, run
+Open two terminal sessions. They will be for running the 
+frontend and backend separately.
 
+To start up the server in the backend,
 ```sh
+cd app/backend
 npm install
 node server.js
 ```
 
 If the server starts successfully, you will see
-
 ```sh
 Server running on http://localhost:3011
 ```
 
 in the terminal.
 
+
+To start up the frontend run
+```sh
+cd app/frontend
+npm install
+npm run start
+```
+in your other terminal tab.
+
+Note that `npm install` in this case will result in a few **high severity vulnerabilities** being discovered.
+However, this is just a false positive which you can read more about from a Meta engineer himself [here](https://github.com/facebook/create-react-app/issues/11174)
+
+If the server starts successfully, you will see
+```
+You can now view dogs in the browser.
+
+  Local:            http://localhost:3000
+  On Your Network:  http://networkaddress:3000
+
+Note that the development build is not optimized.
+To create a production build, use npm run build.
+
+webpack compiled successfully
+```
+
+## In your browser
+Once both servers are started, you can navigate to: <br />
+1. Application website - http://localhost:3000
+2. Server w/ endpoints - http://localhost:3011
+
+
 ## Documentation
 
 - Koa: https://koajs.com/
 - @koa/router: https://github.com/koajs/router#koarouter
 - koa-body: https://github.com/dlau/koa-body#usage-with-koa-router
 - Dogs API: https://dog.ceo/dog-api/breeds-list
+- React.js: https://reactjs.org/docs/getting-started.html
+- React Router: https://reactrouter.com/en/main

app/backend/server.js

@@ -13,10 +13,10 @@ app.use(cors({origin: '*'}));
 router.get('/', (ctx) => {
 	ctx.body = {'Server\'s API Endpoints': {
 		'Getting random dog image': {
-			'link' : '/dog/get-random',
+			'route' : '/dog/get-random',
 			'example' : 'http://localhost:3011/dog/get-random'},
 		'Getting random images by breed': {
-			'link' : '/dog/:breed/:subBreed/get-images/:amount',
+			'route' : '/dog/:breed/:subBreed/get-images/:amount',
 			'example' : 'http://localhost:3011/dog/retriever/golden/get-images/50'}
 	}};
 });