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.

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

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

  • 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

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

  • 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

  • simonswiss

    This is awesome!! Thanks for sharing!

  • Mike Evans

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

  • VINAY

    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?

  • Pingback: Belgian Beer Explorer with AngularJS and Ionic | Christophe Coenraets()

  • david

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

    • Rahul

      Why not use postgres?

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

  • Rahul

    Chris this is badass!

    This is the future webstack imo

  • transedward

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

  • Misha

    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!

  • 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

  • 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….

  • Great application

  • wow, awesome!

  • great idea!

  • admin very nice to blog

  • cok very admin nice to bloging

  • 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

  • Pingback: 全栈开发者的成长资源汇总 – 知识信息库()

  • Pingback: 100+ Free resources for learning Full Stack Web Development. — The Hack Today()

css.php