We created a new React-based app called Google Book Search. It allows users to search books from the Google API and save their favorites to review or purchase later. It also has the functionality to delete books from saved lists. When a user searches for a book, the Google results are dynamically rendered to a card below the search bar. When a user clicks view, they are directed to a Google page for the specific book. When a user clicks save, the selected book is saved to a Mongo database. When a user clicks "saved" in the navbar, React dynamically renders the saved page component which displays their saved books from the database. When a user clicks delete, the respective book is removed from the database. This application is great for anyone who wants to search and save specific books.
- MongoDB stores users' saved books
- Express defines the backend server API routes
- React creates the application and the user interface components
- The save page and search page are stateful components that import all other components
- Multiple useState hooks are utilized to access and update different states
- A useEffect hook is utilized to render a user's saved books to the saved page
- React Router allows React to dynamically render page components depending on what a user selects from the navbar
- Node.js runs JavaScript outside of the browser to allow the backend to function
Here is our Google Book Search in action!:
- MongoDB - cross-platform document-oriented database program
- Express - backend web application framework for Node.js, for building web applications and APIs
- React.js - a front-end JavaScript library for building user interfaces and UI components
- Node.js - a JavaScript runtime environment that allows JavaScript to be run in command line
- JavaScript - code that creates the logic and structure of the program
- JSX - a syntax extension to JavaScript used in React to describe whta a UI should look like
- CSS - defines styling on the HTML page
- Bootstrap - CSS framework used to build mobile responsive websites
- Git - version control system to track changes in source code
- GitHub - hosts repository and deploys page on GitHub
- Heroku - cloud platform for deploying applications
The below code demonstrates how React Router dynamically renders the search or saved page based on the route a user requests through the navbar
<Router>
<Header></Header>
<Switch>
<Route path="/" exact>
<SearchPage></SearchPage>
</Route>
<Route path="/saved" exact>
<SavedPage></SavedPage>
</Route>
<Route path="*">
<Redirect to="/" />
</Route>
</Switch>
</Router>
The below code demonstrates how React uses a useState hook to render a card for each book from the search results
<>{books.map(book => {
return (
<Card key={book._id}>
<div className="row">
<div className="col-8">
<Title title={book.title} />
</div>
<div className="col-4">
<div className="float-right">
<ViewBtn link={book.link} />
<DeleteBtn onClick={() => deleteBook(book._id)} />
</div>
</div>
</div>
<div className="row">
<div className="col">
<Author author={book.authors} />
</div>
</div>
<div className="row">
<div className="col-3">
<ImageTag src={book.image} name={book.title} />
</div>
<div className="col-9">
<Description description={book.description} />
</div>
</div>
</Card>
)
})}</>
Kelly Stone
Rebecca Eng
Christy Lee
Kelly Kim