Belgian Beer Explorer with React, Bootstrap, Node.js and Postgres

Belgium has a long tradition of beer making. According to Wikipedia, the country counts over 1700 beers of various styles including Trappist, Abbey, Saisons, Lambic, Gueuze, Fruit Beers, White, Double, Triple, Quadruple, etc.

I thought it would be fun to build an app that lets users search and explore this list in different ways: by name, style, brewery, alcohol content, etc. I learned a ton: not only building the application, but also using it!

Running the Application

I deployed the application on Heroku. Click here to run it.

Architecture Highlights

Belgian Beer explorer is a single page application built with React and Bootstrap. The back-end is built with Node.js and Express: it consists of a simple REST service that exposes the data stored in a Postgres database.

If you are new to React and are looking for a step-by-step walkthrough, take a look at the Employee Directory application I documented here and here.

Source Code

The source code is available in this GitHub repository. It includes the database based on the Wikipedia list and exported in .sql format.

32 Responses to Belgian Beer Explorer with React, Bootstrap, Node.js and Postgres

  1. Jeff Winkler January 6, 2015 at 12:02 pm #

    Very nice! One suggestion – use react-router, feels strange to be clicking around and not have URL change IMO.

  2. Harshit January 6, 2015 at 3:27 pm #

    Nice work and great idea of bringing Beer with React together !! :-)

  3. Daniel January 7, 2015 at 3:56 am #

    Being a web developer from Belgium, I can’t be anything else than amazed! :D

    I’m currently tinkering with web components (Polymer Framework). If you allow, I’d like to build the same app with it using your API :)

    • Christophe Coenraets January 8, 2015 at 9:40 am #

      Sure. Please link back here, and let me know when you are done so I can link to it too.

  4. Jeff Winkler January 7, 2015 at 7:28 am #

    Was just looking at app.js…that is some tight code! Crazy that the core is under 250 lines.

    https://github.com/ccoenraets/belgian-beer-explorer/blob/master/www/js/src/app.js

  5. simonswiss January 7, 2015 at 8:12 pm #

    This is awesome!! Thanks for sharing!

  6. Mike Evans January 12, 2015 at 11:56 am #

    This is really nice. How did you get the data set?

  7. VINAY January 13, 2015 at 5:58 am #

    Belgian Beer example – A perfect start for new year. (Happy new year!)

    A quick question about Postgres database.
    Does it require DB server or can be used the same way as Sql lite?

  8. david February 13, 2015 at 8:17 pm #

    because why are you use postgres and not mongo???

    • Rahul March 5, 2015 at 5:54 pm #

      Why not use postgres?

      I love that its in pg. Mongo/Couch are extremely over-hyped in my opinion.

  9. Rahul March 5, 2015 at 5:51 pm #

    Chris this is badass!

    This is the future webstack imo

  10. transedward April 2, 2015 at 4:58 am #

    Dumb question:
    How did get all this data out of Wikipedia?

  11. Misha April 16, 2015 at 3:46 pm #

    Maybe a noob question: Why do you use node.js here? It is not really necessary with a project that “small”.
    Or is there a specific reason?

    Thanks Chris!

  12. free mp3 download June 23, 2015 at 7:26 pm #

    hi jeff

    https://github.com/ccoenraets/belgian-beer-explorer/blob/master/www/js/src/app.js

    how i use it i am setup this some showing some error can you prived me your email ?
    sone showing error

  13. forma imalatı November 17, 2015 at 8:38 am #

    Fabrics we use in our form; The first-class micro-interlock; flex-fit, anti-bacterial, it has a thermo-balance, and immediately drying. This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. Our models are produced in two types as my special jerseys and other digital printed….

  14. susanquest November 19, 2015 at 6:25 am #

    Great application

  15. santoheri November 19, 2015 at 6:27 am #

    wow, awesome!

  16. mirahayu November 19, 2015 at 6:30 am #

    great idea!

  17. sohbet December 8, 2015 at 5:01 pm #

    admin very nice to blog

  18. sohbet December 8, 2015 at 5:02 pm #

    cok very admin nice to bloging

  19. Martiuh August 3, 2016 at 12:13 pm #

    Hi Cristophe, thank you for posting this although it’s a bit too advanced for myself, it’d be great that you make a tutorial (a simpler tutorial) to show how to connect a React App with Express and also a pgsql database, I’m having a lot of trouble trying to do that. Hope you like my suggestion :D.
    Thank you

  20. CIIT Noida April 25, 2018 at 2:46 am #

    You have share the great info Bindass

    Best B.Tech College in Noida

  21. prasanna laxmi June 11, 2018 at 7:24 am #

    This article has covered so many topics that are helpful for us ,

    visitDigital-Marketing
    for more new ideas, we are thankful for this article.

  22. Stefan Freisei January 3, 2019 at 2:32 pm #

    the link http://belgianbeerexplorer.coenraets.org/ does not work anymore?

  23. Busayo John Adejayan September 23, 2019 at 4:22 pm #

    awesome article i love this website thanks for shaaring

  24. yuvaraj singh November 24, 2020 at 1:06 am #

    Thanks for sharing
    To crack Agile coach interview : Agile coach Interview Questions

  25. Aarush January 30, 2021 at 1:52 am #

    Very Informative post Thanks for Sharing
    Visit : https://www.buildmyrebusiness.com/

Trackbacks/Pingbacks

  1. Belgian Beer Explorer with AngularJS and Ionic | Christophe Coenraets - January 13, 2015

    […] my previous post, I shared a Belgian Beer Explorer application built with React, Bootstrap, Node.js and […]

  2. 全栈开发者的成长资源汇总 – 知识信息库 - March 25, 2017

    […] Belgian Beer Explorer with React, Bootstrap, Node.js and Postgres […]

  3. 100+ Free resources for learning Full Stack Web Development. — The Hack Today - August 5, 2017

    […] Belgian Beer Explorer with React, Bootstrap, Node.js and Postgres […]

Leave a Reply

css.php