React-based Google Books Search app
Launch application Heroku Deployment
-
This application requires at minimum 2 pages:
-
Search - User can search for books via the Google Books API and render them here. User has the option to "View" a book, bringing them to the book on Google Books, or "Save" a book, saving it to the Mongo database.
-
Saved - Renders all books saved to the Mongo database. User has an option to "View" the book, bringing them to the book on Google Books, or "Delete" a book, removing it from the Mongo database.
-
Start by using the create-react-express example as a base for your application.
-
Add code to connect to a MongoDB database named
googlebooks
using the mongoose npm package. -
Using mongoose, then create a Book schema.
-
At a minimum, books should have each of the following fields:
-
title
- Title of the book from the Google Books API -
authors
- The books's author(s) as returned from the Google Books API -
description
- The book's description as returned from the Google Books API -
image
- The Book's thumbnail image as returned from the Google Books API -
link
- The Book's information link as returned from the Google Books API -
Creating
documents
in yourbooks
collection similar to the following:{ authors: ["Suzanne Collins"] description: "Set in a dark vision of the near future, a terrifying reality TV show is taking place. Twelve boys and twelve girls are forced to appear in a live event called The Hunger Games. There is only one rule: kill or be killed. When sixteen-year-old Katniss Everdeen steps forward to take her younger sister's place in the games, she sees it as a death sentence. But Katniss has been close to death before. For her, survival is second nature." image: "http://books.google.com/books/content?id=sazytgAACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api" link: "http://books.google.com/books?id=sazytgAACAAJ&dq=title:The+Hunger+Games&hl=&source=gbs_api" title: "The Hunger Games" }
-
This should be a SPA (Single Page Application) that uses
react-router-dom
to navigate, hide and show your React components without changing the route within Express. -
The layout should include at least two React Components for each page
Search
andSaved
. -
Add the following Express routes for your app:
-
/api/books
(get) - Should return all saved books as JSON. -
/api/books
(post) - Will be used to save a new book to the database. -
/api/books/:id
(delete) - Will be used to delete a book from the database by Mongo_id
. -
*
(get) - Will load your single HTML page inclient/build/index.html
. Make sure you have this after all other routes are defined. -
Deploy your application to Heroku once complete. You must use Create React App and current versions of React and React-Router-Dom for this assignment.
Clone the repo to your local development environment.
git clone https://github.com/FAC-73/elegia.git
Navigate to the elegia folder directory using the command prompt.
Run npm install
to install all dependencies. in terminal or bash
Run npm start
to run the application in terminal or bash
Use http://localhost:3000 [or whatever terminal port you have specified] in your browser