Skip to content

A simple nodejs fetcher for fake REST API into bootstrap carousel, for Motoon.

Notifications You must be signed in to change notification settings

ElRakabawi/node-fetch-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

Node fetch app documentation

A NodeJS built application with express, express handelbars, node-fetch, bootstrap carousel for fetching a fake REST API into a JSON Object, then displaying it in a responsive carousel. Live deployed demo here.

Reponsitivity test result: Here.

- This guide is dissected into two sections:

  • How to install/run the app
  • File structure

How to install/run the app?

Installing nodejs and npm
  1. The app is built on Node.jS, so to be able to run it you must have Node.JS and NPM. If you already have it on your system proceed to step(3).
  2. Visit Node.JS, then download your OS installer and run it.
  3. Now you should have both NodeJS and NPM installed on your system.
elrakabawi$ node --version && npm --version
Installing and running our app
  1. clone the project: git clone https://github.com/ElRakabawi/node-fetch-app.git Then, access the directory with cd node-fetch-app
  2. Run npm install in your command, then run npm start. This will run this commands:
elrakabawi$ npm start
> node-fetch-app@1.0.0 start Desktop/node-fetch-app
> node index.js

listening at localhost:3000

Now, it's all up and running. Open your browser and visit localhost:3000. You should expect something like the online delpoyed heroku app here https://node-fetch-app.herokuapp.com/.

File and folder structure

node-fetch-app
│
│─── README.md
│─── package.json
│─── index.js      
│               
└───public
│   └─── stylesheet
|   |     |
|   |     └─── style.css
│   │   
|   └─── js
|        |
|        └─── core-interface.js 
│   
|───views
|    │───home.handelbars
|    │
|    └─── layouts                 
|           └───main.handelbars  
|
└─── node_modules   

index.js: Where fetching happens using node-fetch, JSON strigified then parsed and server is created with express.
core-interface.js: Enhancer for behaviour and look of the bootstrap carousel.
home.handlebars: Contains home view, handled by express-handelbars to generate HTML sections from parsed JSON object.
main.handlebars: Contains main HTML Layout.

Waving goes to Motoon.org, I enjoyed the task.