Select Page

ReactJS Nanodegree Projects

ReactJS Nanodegree Projects

The final module of the Udacity Nanodegree was on React, with two assessed projects to be completed using the framework. I like the way React works and I can see why it has become incredibly popular in a short space of time. While these projects were two of the most difficult projects in the Nanodegree, and it took a lot of time to get to grips with how React works, I enjoyed working with it, and intend to invest a lot more time into learning it deeply.

The final module of the Udacity Nanodegree was on React, with two assessed projects to be completed using the framework. I like the way React works and I can see why it has become incredibly popular in a short space of time. While these projects were two of the most difficult projects in the Nanodegree, and it took a lot of time to get to grips with how React works, I enjoyed working with it, and intend to invest a lot more time into learning it deeply.

Project 7 – My Reads – Bookshelf App

The objective of this app was to create an interactive bookshelf application. Users would be able to search for new books in a search page and add them to the bookshelf. They would then be able to move the books between the shelves. Udacity provided an API with which to access the books.

The key to this task was state management and passing data between components. I kept information about which bookshelf the book should be located on in my App.js file, the highest level, so that both bookshelf and search components could use and update that state via props.

You can find a live version of my application here, and the Github repo here.

Project 7 – My Reads – Bookshelf App

The objective of this app was to create an interactive bookshelf application. Users would be able to search for new books in a search page and add them to the bookshelf. They would then be able to move the books between the shelves. Udacity provided an API with which to access the books.

The key to this task was state management and passing data between components. I kept information about which bookshelf the book should be located on in my App.js file, the highest level, so that both bookshelf and search components could use and update that state via props.

You can find a live version of my application here, and the Github repo here.

Project 8 – Neighbourhood Map

The final project was again to be built with React, but also required other elements from earlier in the course. The design had to be responsive, accessible, we had to use more than one API, implement error handling and include a service worker.

My project takes map data from Google Maps, along with location data from Foursquare to find any Vegetarian or Vegan restaurants situated in Edinburgh. The most difficult functionality to achieve was making the markers match the restaurants in the filtered list in real time as the user used the text input to filter the results.

This project was particularly hard because there was no curriculum on how to use Google Maps with React. Most people opted to use a library, while some used an asynchronous loader. I used the react-google-maps library, which seemed to be slightly better documented than the other options.

You can see my final project here, with the GitHub repo here.

Project 8 – Neighbourhood Map

The final project was again to be built with React, but also required other elements from earlier in the course. The design had to be responsive, accessible, we had to use more than one API, implement error handling and include a service worker.

My project takes map data from Google Maps, along with location data from Foursquare to find any Vegetarian or Vegan restaurants situated in Edinburgh. The most difficult functionality to achieve was making the markers match the restaurants in the filtered list in real time as the user used the text input to filter the results.

This project was particularly hard because there was no curriculum on how to use Google Maps with React. Most people opted to use a library, while some used an asynchronous loader. I used the react-google-maps library, which seemed to be slightly better documented than the other options.

You can see my final project here, with the GitHub repo here.

If you found my work interesting, please get in touch so we can discuss how my work can meet your needs.