This is my solution for the final assessment project for Udacity's React Fundamentals course, developed by React Training. I started with the provided starter package and then added my own commits and moved to my own repository.
The task was to build an application to manage books. Books are provided by a backend server which was put up by the guys from udacity/react training. To sum things up, the user can move books between a fixed set of bookshelves. He can also add new books to his collection or remove previously added books.
To start the application, npm and nodejs need to be present on your machine. Check out https://www.npmjs.com/ and https://nodejs.org to get the latest versions of the two.
Only two very small steps are required to start the application when npm and node are installed. Make sure you install all required libraries by running the following command in the root folder of this repository.
npm install
When everything is downloaded and installed, stay in the same directory run the following command to get the application running.
npm start
That's it! You can now access the web application in your web browser via this url:
The app consists of three pages, which the user can access.
The home view displays three bookshelves: currently reading, want to read and read. Each shelf holds multiple books. The books can be moved between from one shelf to another or just removed from the current shelf.
The user can navigate to the book details by clicking on the cover of a book. The user can also navigate to the book search.
The search view consists of an input field. When the user changes the value of the input field, a search request is sent to the backend. The search results are displayed in the area below the input field. Books can be added to shelves, moved between shelves or removed from their current shelf.
Note: The backend API uses a fixed set of cached search results and is limited to a particular set of search terms, which can be found in SEARCH_TERMS.md. That list of terms are the only terms that will work with the backend, so don't be surprised if searches for Basket Weaving or Bubble Wrap don't come back with any results.
The details view shows detailed information of a book. In addition to the title, the cover and the authors, which are available in the home and search view too, the user gets access to a description, a list of categories, the book's publication date and he can follow a link to google where he can either preview or buy the book.
+--public/
|-- index.html - Template file
|-- favicon.ico - React Icon
+-- src/
+-- components/ All react components. Each has a JS and a CSS file.
+-- App - This is the root of the app. The initial data is loaded here. Routes are also set up here.
+-- BackButton - A simple BackButton component ensuring it looks and behaves the same everywhere in the application.
+-- Book - Collection of subcomponents to help build components to reflect a book. Used in BookDetails and BookListItem.
+-- BookAuthors - List of Book Authors.
+-- BookCategories - List of Book Categories.
+-- BookPurchase - Buttons for info and preview link on google.
+-- BookShelfChanger - Component to change the shelf a book is in.
+-- BookDetails - Extra component to display the details of a book.
+-- BookList - Component to display a list of books. Used in BookShelf and BookSearch.
+-- BookListItem - Component to reflect a book as a list item
+-- BookSearch - Component to search additional books and add them to the shelves.
+-- BookShelves - BookShelves component, has a page title and a list of book shelves. Uses the BookShelf component.
+-- BookShelf - BookShelf component, has a title and a list of books. Uses the BookList component.
+-- icons/ - Helpful images for your app. Use at your discretion.
|-- add.svg
|-- arrow-back.svg
|-- arrow-drop-down.svg
+-- util/ - Util javascripts
|-- BooksAPI.js - A JavaScript API for the provided Udacity backend.
|-- index.js - BrowserRouter was added here. Also the shelves are defined in this file and passed to the app.
|-- index.css - Global styles. You probably won't need to change anything here.
|-- .gitignore
|-- README.MD - This README file.
|-- SEARCH_TERMS.md - The whitelisted short collection of available search terms
for you to use with your app.
|-- package.json - npm package manager file.
This project was bootstrapped with Create React App. More information on how to perform common tasks can be found here.