Employee Directory Sample App with React and Node.js

A couple of weeks ago, I shared an Employee Directory sample application built with React in seven steps. Employee directory is a mobile app that allows you to look up employees by name, view the details of an employee, and call, text, or email an employee.

In this post, I share a new version of the application with two new features:

  1. Animated page transitions based on pageslider-react discussed in my previous post
  2. Data access using REST services exposed by a Node.js / Express server (included in the sample app)

IMG_0371

IMG_0370

Running the Application

You can test the application in your browser:

  • Using this version hosted on Heroku
  • By running the included Node.js server locally
  • By deploying your own instance on Heroku

    Deploy

You can also run the application as a hybrid app in Cordova.

Check out the Github Repository for detailed instructions.

Source Code

The source code (client and server) is available in this this repository.

Other Versions

I’ve used the employee directory use case to explore different frameworks. An AngularJS / Ionic version of the same app is available here.

  • james

    Click each contacts and arrow button don’t response on my mobile web browser, does it require a touch function?

  • Karmet

    Nice work! Are these samples on your website available under an Open Source License?

    Thanks!

  • Really its very helpful for me in installubg node.js.

  • Pingback: Employee Directory Sample App with React and Node.js … | Clicks247.biz – Website Link Directory()

  • TJ

    I’ve uploaded to my server and followed the instructions on the github page.

    “`
    /var/www/directory-react-nodejs$ node server
    Express server listening on port 5000
    “`

    Appears to be running…but when I visit my server at hostname.com:5000, I get “This webpage is not available”.

  • Moeen uddin

    Hi, its great post, thanks for sharing the resources. I just installed android debug version of this app. I am new to android, I am comparing the responsiveness of RorMix with this build. rormix is build wih phonegap, and is featured app on their site. I need advise or suggestion, how to improve performance here. Once again, thanks. :)

  • Really its very helpful for me in installubg node.js.

  • Detailed tutorials Sample App Directory with React and Node.js thank have shared with us

  • Pretty neat and working perfectly fine. Am just checking out the same with Android and everything seems to be working good. Cheers.

  • Pingback: Node Weekly No.69 | ENUE Blog()

  • Detailed tutorials Sample App Directory with React and Node.js thank have shared with us. thank you very much

  • Pingback: Year 2 Sem 1 Holiday - S.E.E.D()

  • kalite,fiyat uygunlugu ve imalattan.quality, availability and price of manufacturing.

  • gerat design great work it nice

  • thanks.

  • Great!

  • good design

  • very nice to blogg

  • good application!

  • thanks guys

  • Sabit telefonunuz varsa ve internet kullanımında sıkıntı yaşıyorsanız vodafone adsl ile sıkıntılarınızı bitirebiliriz. Bir çok avantajı paket ile sizleri mutlu etmekle beraber vodafone adsl kampanyası kapsamında 3000 dakikaya konuşma dakikalarından yararlanma fırsatlarıda sizlerle. Uygun fiyata kaliteyi seçebilmeniz için web sitemizdeki formu doldurabilir yada beni ara formuyla sizi aramamıza vesile olabilirsiniz.

    Vodafone yapar !

    http://yellowmileadsl.com/adsl.html

  • Sınırsız internet seçenekleri vodafone ile sizlerle…
    Vodafone net ile internet hızınız diğer alt yapıya ait şebekelere göre 3 kat daha iyi olduğunu biliyormuydunuz ? 23.000 yeni şebeke noktası ile çok daha hızlı bir şekilde interneti kullanabileceksiniz. Anı yaşamak hakkınız bu yüzden kaliteyi bizlerle yakalayın

css.php