A personal library to collect and share your favorite quotes from your favorite books.
Home Page: https://requote-app.com
🔭 I’m currently working on an upcoming cozy game for the Panic Playdate written in Lua. Stay tuned for updates!
📚 I’m currently reading Game Programming Patterns.
📫 How to reach me: [email protected]
server/index.js to allow for isPrivate to be passed when a user saves a new quoteserver/index.js to allow for isPrivate to be updated when a user edits a quotefalse since the checkbox is checked by default).isPrivate trueisPrivate with data sent to save the quoteisPrivate trueisPrivate with data sent to save the quote<a> or <button> elements.cursor: pointer when hovered with the mouse.User can sort quotes in quote list by date created, page number, or quote length.
User can choose a type of sort (Date Added is default), and can also invert direction of sort.
Commit checklist for tasks needed to complete the feature.
sortType (default "date")isReversed (default false)getQuotes
updateSortType
sortType or isReversed<a> or <button> elements.cursor: pointer when hovered with the mouse.If a user is unable to find their intended book using the integrated API, they can upload their own custom book. They must provide all the fields that would be received from the API, such as an image, ISBN, Title, Author(s), etc.
The page where a user chooses the book to save a quote for will now include a button to redirect to a page where the user can upload their own book to save a quote for. Submitting a book through that page will redirect to the form to save a quote.
Wireframe screenshot(s) of what the app should look like when it is complete.
server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.What capability will users have when this feature is merged?
A description of how the application will work from the perspective of the user.
Wireframe screenshot(s) of what the app should look like when it is complete.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.User can view quotes from other users using their username
User will be able to view quotes from another user using a URL with the username as a query paramter.
server/index.js to include an endpoint to get all quotes for a single user.<a> or <button> elements.cursor: pointer when hovered with the mouse.All existing React components should now have tests written in Jest and React Testing Library to verify that they are working as intended.
ChangeUsernameFormDropdownSearchBarEditQuoteFormQuoteControlsQuoteListItemSaveQuoteFormSearchBarjest.fn() as the submit event handler, and test if it was calledBookDetailsQuoteDashboardUsers can see a list of all saved quotes from all books.
User will be able to navigate to the Quotes view and see a list of cards, one for each quote. Users can also search for quotes in the list using the search bar.
displayList (quotes to be displayed)getQuotes
SaveQuoteForm component to redirect to the quotes list on successful submission<a> or <button> elements.cursor: pointer when hovered with the mouse.Check list items that need to be done in order to complete the refactor.
Fix this by using useLocation hook from React Router, and updating bookId and book list when location changes
Check list items that need to be done in order to complete the refactor.
What capability will users have when this feature is merged?
A description of how the application will work from the perspective of the user.
Wireframe screenshot(s) of what the app should look like when it is complete.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.Which feature is affected by this update?
Summary of the technical approach to be taken.
Updated wireframe(s) of what the app should look like when the updates are ready.
Commit checklist for tasks needed to complete the feature.
<a> or <button> elements.cursor: pointer when hovered with the mouse.What capability will users have when this feature is merged?
A description of how the application will work from the perspective of the user.
Wireframe screenshot(s) of what the app should look like when it is complete.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.Currently, users can only login during the process of submitting a new quote. There should be a button in the nav bar to allow for login and logout any time.
A description of how the application will work from the perspective of the user.
The user will click the button to log in and will get redirected to Google for OAuth. If the user clicks logout, they will be logged out.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.User can save a quote for a specific book.
Users will be able to search for a book using the Google Books API and save a quote from that book.
schema.sqlApp component
<a> or <button> elements.cursor: pointer when hovered with the mouse.Check list items that need to be done in order to complete the refactor.
Users will be able to delete quotes they have created.
A delete icon will be added to each quote. When the delete icon is clicked, a menu will with an X and checkmark icon to either confirm or cancel.
schema.sql to include isDeleted for each quote.
server/index.js to include a PATCH endpoint for deletion
isDeleted column set to trueisDeleted is false<a> or <button> elements.cursor: pointer when hovered with the mouse.Users will now be able to change their auto-generated username based on their Google email address.
When a user is logged in, rather than a "Logout" button replacing the Login button, there will now be a button with an icon for the first letter of their username, and the text will be the user's username. When a user clicks this button, they will be redirected to the Profile page, where they will be able to change their username or log out.
message "Username already exists"LoginButton component to only be a login button.LogoutButton component that has the ability to log the user out.UserProfileButton that shows a button with an icon for the first name of the user's username, and the user's username within it.
Link to navigate to the UserProfile pageLoginOrProfile component that returns either a LoginButton or UserProfileButton component depending on if there is aInfoMessage component that will display a message to the user
color - defaults to blackmessage - a stringp tag.ChangeUsernameForm component that contains a form to update a user's username.
isUsernameAvailable - used as the event handler for input event
true
message and colorfalse
message and colorchangeUsername - used as the event handler for submit event
message and colormessage and colorusername - a string containing the current username typed by the usermessage - message to be displayed to the usercolor - the color of the current message to be displayed to the userinput to supply a new username
input event listener to send a request to the endpoint to determine if the username is available.
username valuesetTimeout and useEffect.button for submitting the form
submit event listener to send a request to the endpoint to attempt username replacement.UserProfile page component
Redirect component from React Router to redirect to /ChangeUsernameForm componentLogoutButton component.<a> or <button> elements.cursor: pointer when hovered with the mouse.Users will be able to edit existing quotes.
Users can click on an icon on each quote in their quote list to be redirected to the SaveQuoteForm again with the existing values for the quote already filled in.
<a> or <button> elements.cursor: pointer when hovered with the mouse.Users can see the quotes that they have saved.
Users will be able to view a dashboard of the books they have saved quotes for and click on the book cover for a book to see all the saved quotes for that book.
bookId to state, with default null to account for all books
<a> or <button> elements.cursor: pointer when hovered with the mouse.User will be able to view a detail view for a single book to verify if it is the book they want to save a quote for.
While searching for books, a user will be able to click an "ⓘ" icon to see details for that book. They can also return to the search they had in progress from that page.
Commit checklist for tasks needed to complete the feature.
sanitizeSynopsis to sanitize synopsis using DOMPurify and return object with __html property holding that sanitized valuedangerouslySetInnerHTML React prop<a> or <button> elements.cursor: pointer when hovered with the mouse.User can type in a search term to see only quotes containing that search term in the quote body.
User will type into a search bar and the quote list will live update will quotes that match the search term.
Commit checklist for tasks needed to complete the feature.
searchTerm (default null)searchQuotes
quoteSearch
searchQuotes)<a> or <button> elements.cursor: pointer when hovered with the mouse.What capability will users have when this feature is merged?
A description of how the application will work from the perspective of the user.
Wireframe screenshot(s) of what the app should look like when it is complete.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.Which feature is affected by this update?
Summary of the technical approach to be taken.
Updated wireframe(s) of what the app should look like when the updates are ready.
Commit checklist for tasks needed to complete the feature.
<a> or <button> elements.cursor: pointer when hovered with the mouse.What capability will users have when this feature is merged?
A description of how the application will work from the perspective of the user.
Wireframe screenshot(s) of what the app should look like when it is complete.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.ISBNdb is full of HTML and the capitalization is trash 🤢
User will be able to upload an image and transcribe the text from it in order to save the quote.
User can upload an image by either clicking on the image upload area or drag and drop the image onto the page, then the image will be interpreted and any text in it will be auto-inserted into the quote field in the form to save a quote.
Commit checklist for tasks needed to complete the feature.
react-dropzone<a> or <button> elements.cursor: pointer when hovered with the mouse.What capability will users have when this feature is merged?
A description of how the application will work from the perspective of the user.
Wireframe screenshot(s) of what the app should look like when it is complete.
Commit checklist for tasks needed to complete the feature.
schema.sql to ...data.sql to ...server/index.js to ...<a> or <button> elements.cursor: pointer when hovered with the mouse.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.