Project Plan for Code Lou Proj Class 2020
My project will allow the user to search for books in open library search API based on author or title. Search results will display the title and author.
There will be two buttons on the home screen that read "Search by title" and "Search by author". When clicked, a search field will appear below in which you can type your respective search criteria. The url route will also change once one of these buttons is clicked.
There will be a carousel on the home page from the New York Times Best Seller API that displays a thumbnail of the book, its rank, the title, and the author, as well as a link to where you can purchase the book.
There will be a "Useless Fact", fetched from Random Useless Facts API, at the bottom of the page that loads a different useless fact every time the page loads.
I'll be using Create React App with React Router Dom (React/JS), the open library search API, the New York Times Best Seller API, and the Random Useless Fact API.
-
Users will be able to input a search parameter for a book based on author or title.
-
There will be buttons on the home page to select the way the user will search for a book (i.e, Search by Title, Search by Author).
-
There will be a carousel on the home page that displays various top selling books rated by the New York Times.
-
There will be a random useless fact generated at the bottom of the page every time the page loads.
-
Design wireframes for each page.
-
Create a repo and import all packages I'll need.
-
Build and connect all pages.
-
Make and consume API requests.
-
Clone repo
-
Cd into directory
-
Run npm install
-
Run npm start and go to
http://localhost:3000/
Everything beyond this point is typical README info for Create React App
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify