Skip to content

SixStringsCoder/my_reads_bookshelf_reactAPIapp

Repository files navigation

My Bookshelf App

Project from the Front-End Web Developer Nanodegree at Udacity

Introduction

Title: My Bookshelf

by Steve Hanlon

My Bookshelf is a web app for storing books from an API and categorizing them on three shelves: Currently Reading, Want to Read and Read.

Each book has a select menu allowing the user to move the book to a different shelf or remove it from the bookshelf entirely.

The lower right side of the screen shows a + icon linking to a Search interface.

My Bookshelf aka Library component

The Search interface has a search input at top which is used to retrieve search results via an API call. It then displays all books and their menus, which must show the correct shelf or "none" status (i.e. status matches the status shown in My Bookshelf)

Search feature

Click here to see the component and data break down of the app.

Click here to see pictures of the website's Responsive Design.


Start-up Server

To run the server, NPM or Yarn must be installed.

Open up the terminal and go to the project directory. Inside of the project directory, run:

npm install

npm start

If you have Yarn installed run:

yarn start

This project was built using Create React App. For complete technical details click Create React App

Technical Components
  • CSS Grid, Flexbox and Media Queries used to build the responsive features.
  • JavaScript (ECMASript 6)
  • React 16.5.2
Articles and Tutorials

Tutorials, articles and docs used while building this app.

Picture of Data and Components Breakdown

breakdown

Pictures of Responsive Design

Phone

phone view

Tablet

tablet view

Desktop

desktop view

Future Features

About

ReactJS app which organizes a book collection. It uses AJAX calls to an API to supply book content and perform searches.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published