Skip to content
No description, website, or topics provided.
JavaScript HTML CSS Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
client
models
routes
.DS_Store
.gcloudignore
.gitattributes
.gitignore
README.md
gcp.sh
gcpDeploy.sh
gcpLogs.sh
gcpRun.sh
package-lock.json
package.json
server.js

README.md

paulsbooks

Overview

PaulsBooks

React-based Google Books Search app. This assignment requires React components, helper/util functions, and React lifecycle methods to query and display books based on user searches. You'll also use Node, Express and MongoDB so that users can save books to review or purchase later.

Deployment

This is deployed to Google Cloud Platform. GCP provides several huge advantages especially as it relates to security and hiding keys and credentials. When app is running in test mode, sensitive data is stored in hidden files on developers local machine. When depoloyed to google cloud platform, the services keys, credentials etc are automatically protected and accessed inside the google cloud platform App engine.

NOTE: I initially tried to deploy my homework to GCP and I got an error that said I had terms in my project name that were NOT allowed. So I had to change the name from paullinck-googlebooks to paullinck-paulsbooks. Haha

Links

Technologies Used

  • HTML/CSS/Javascript
  • REACT
  • Node.js, Express
  • MongoDB and Mongose (for Schemas)
  • MongoDB Atlas Clusters
  • Materialize
  • Google Cloud Platform

Screenshots

ss1 animated

Details

Instructions

  • Check out the following mockup images for each page:

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

  1. Start by using the 07-Ins_Mern example as a base for your application.

  2. Add code to connect to a MongoDB database named paulsbooks using the mongoose npm package.

  3. Using mongoose, then create a Book schema.

  4. 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 your books 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"
    }
  1. Create a layout similar to the mockups displayed above. 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 and Saved.

  • Feel free to try out alternative CSS framework to Bootstrap.

  1. 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 in client/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.


Bonus Live Updates to Saved Books

  • Use React routing and socket.io to create a notification or a component that triggers whenever a user saves an book. Your message should include the title of the saved book.

    • Say you have multiple browsers open, each one visiting your site. If you save an book in one browser, then all of your browsers should notify you that a new book was saved.

    • Socket.io NPM package

Reminder: Submission on BCS

  • This assignment must be deployed. * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository!

Add To Your Portfolio

After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio.

Good Luck!

You can’t perform that action at this time.