In this project I "play" with an API, using SASS for the first time and continue developing my Node.js skills. I also used a webpack for this project, though it is a bit too small to see its impact.
This web application fetches an API containing data about dog breeds.
The API allows to fetch a list of dog breeds, an image of a particular dog breed and a random dog's image.
The app has three pages: main, list recognized breeds and make me smile.
- Main page with a navigation menu has a list of buttons each representing a dog breed. Pressing the button takes user to a separate page which opens an image of the dog breed on the button pressed.
- List page has a list of all breeds in alphabetical order. No functionality added.
- Smile page calls the API with a random dog image.
- More styling can be added.
- Images are of a different quality and size. Rendering every image into the same box (50% width) makes some images look pixelated, and some stretch beyond the 100% of the screen height.
- Upon refreshing on the image page an API is called again and a new image appears. A button can be added so user can press to get a new image of the same dog breed.
NPM, Node.js, Express, SASS, API.
- Back-end:
- EJS,
- HTTPS,
- SASS,
- Express.
Start with cloning this repo on your local machine:
$ git clone https://github.com/natashaswan/Dogs-Breeds-APIs-Node.js-project.git
$ cd PROJECT FOLDER
To install run:
$ npm install -S myLib
Or if you prefer using Yarn:
$ yarn add --dev myLib
###Usage Serving the app
$ npm start
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
Made with ❤️ by Natasha Swan (me)
A huge thank you to https://dog.ceo/dog-api/ for their straight forward, available and free API.