Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andy-wu12/paw-prints
Web application that allows users to query random images of dogs. Uses Dog API at https://dog.ceo/dog-api/
https://github.com/andy-wu12/paw-prints
api dogs image-viewer koa-router koajs material-ui react-router reactjs webapp
Last synced: 3 days ago
JSON representation
Web application that allows users to query random images of dogs. Uses Dog API at https://dog.ceo/dog-api/
- Host: GitHub
- URL: https://github.com/andy-wu12/paw-prints
- Owner: Andy-Wu12
- Created: 2022-08-25T00:34:05.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-01T18:19:33.000Z (over 1 year ago)
- Last Synced: 2024-09-21T00:31:55.690Z (6 days ago)
- Topics: api, dogs, image-viewer, koa-router, koajs, material-ui, react-router, reactjs, webapp
- Language: TypeScript
- Homepage: https://view-some-dogs-e3a7l.ondigitalocean.app/
- Size: 7.05 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# View Some Dogs
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
You will need to install Node.js.
For best results, use [Node.js 16 or higher](https://nodejs.org/).
You can check your current version of Node.js with
```sh
$ node --version
v16.17.0
```
Open two terminal sessions. They will be for running the
frontend and backend separately.
To start up the server in the backend,
```sh
cd backend
npm install
npx ts-node server.ts
```
Alternatively, you can run with the compiled server code
```sh
npm run deploy
```
Check the package.json for more possible commands
If the server starts successfully, you will see
```sh
Server running on http://localhost:8080
```
in the terminal.
To start up the frontend run
```sh
cd 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:
1. Application website - http://localhost:3000
2. Server w/ endpoints - http://localhost:8080
## 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://beta.reactjs.org/learn/thinking-in-react
- React Router: https://reactrouter.com/en/main