zelig880 / booksbank Goto Github PK

This feature is completed when:

• It resemble the design of the Mobile and Desktop attached screens (it does not have to be pixel perfect at this stage)
• It enhance the current look and feel of the 'resources\js\components\sections\welcomeHow.vue'
• It has all the text defined as data within the vue component

Invision designs: https://projects.invisionapp.com/d/main/default/#/console/17236584/446551990/preview
zeplin: https://app.zeplin.io/project/6047d3685cdff106a3f16337/screen/6047d80ebafdbb06f6d2df8e

Feature:

• It resemble the design of the Mobile and Desktop attached screens for illustration only, see zeplin/invision (it does not have to be pixel perfect at this stage)
• It has all the text exported into the language files (even if dummy text)
• It enhance the look and feel of the file 'resources\js\components\sections\welcomeAbout.vue'

Invision designs: https://projects.invisionapp.com/d/main/default/#/console/17236584/446551990/preview
zeplin: https://app.zeplin.io/project/6047d3685cdff106a3f16337/screen/6047d80ebafdbb06f6d2df8e

Update the existing button component to provide the following features, styles:

• Default button to be rounded corners
• Props: Colour to accept "primary", "secondary", "thirdary"
• Props called FullWidth. This will make the button go to full width and reduce the border radius (see insivion for example).

Features:

• Logo (h1 with image)
• Auth buttons
• big CTA to "LEND YOUR BOOK"
• White background to span across the screen

https://projects.invisionapp.com/d/main/default/#/console/17236584/446185582/preview

Npte:

• background image just a placeholder

Introduce Icon buttons on the top header when the user is logged in:

• Add a style of the Anchor component called ICON

• Recreate a style that resemble the one provided in the design ( see zeplin link in the readme for color and sizes)

• Import the new icons ( or similar) from Font Awesome

• Remove existing icon shown the user is logged in

• Introduce the 4 new icons on the top of the header when the user is logged in

• Link the buttons to the correct pages:

• The button should also be updated for the mobile layout. They should not be as icon, but hte link and text should update)

• search: dashboard

• notification: bookshelf/info

• books: bookshelf/all

• settings: bookshelf/settings

As an user i would like to receive an email to remind me that there is just one week before the Book need to be returned. This requires the creation of a job.

• Create a Job that runs Every day at 12 PM GMT (midday)
• Check for lended books, and retrieve the one that have the return date 7 days away (equal to 7 not <= otherwise it will send an email every day).
• Send an email to the "borrower" of that book. The email should include the name of the book, the return day

As an user I would like the website to have an actual favicon, so that the image shown next to the website name in the browser tab is nice and distinctive.

• Take library icon of the website logo and save it as an image
• Create all required favicon sizes using a favicon generator from internet
• Add the favicon in the site and make sure the favicon link is the same within the public/index.php file ( or just check if you can see the new favicon when loading the website locally).

When running php artisan db:seed the following error shows up.

This feature is completed when:

• It resemble the design of the Mobile and Desktop attached screens (it does not have to be pixel perfect at this stage)
• It has all the text exported into the language files (even if dummy text
• Link with existing API features

Note the CSS is being written using tailwind. it is suggested to develop the HTML in the live editor first (https://play.tailwindcss.com/) and them move it over.

Invalid color prop passed to Anchor Component in authControls component.

color prop cannot accept "cta" as a value. It should be either primary or secondary

Feature:

• hardcode 5-6 books and show a carousel (you can use a package if necessary)
• It resemble the design of the Mobile and Desktop attached screens for illustration only, see zeplin/invision (it does not have to be pixel perfect at this stage)
• It has all the text exported into the language files (even if dummy text)

Invision designs: https://projects.invisionapp.com/d/main/default/#/console/17236584/446551990/preview
zeplin: https://app.zeplin.io/project/6047d3685cdff106a3f16337/screen/6047d80ebafdbb06f6d2df8e

As an user I would like to see a notification if I am trying to add a book and my bookshelf has not been set yet!

• Create a new banner with a title that says: "Your bookshelf information are not set yet!
• Add a paragraph to the above title that says: "Click the link below to quickly add your bookshelf information"
• Make sure the above text is saved within the languages file and loased on the component using the $t() method.
• Make sure the banner has a background of --secondary-3
• SHow the banner ONLY if the user does not have a bookshelf set
• Make sure the "add book form" is set to disabled unless the bookshelf is set.

As an user I would like the newsletter banner of the homepage to trigger a request and actually add my email on the company mailing list:

To do:

• Add the following package https://packagist.org/packages/sendinblue/api-v3-sdk
• Create a controller to handle email handling (this endpoint is going to receive an email and trigger a request to sendingblue
• Create an endpoint in api.php
  If you are not familiar with Frontend, just do the above and push a PR, the rest can be ahndled by a FE
• Create a VUEX module called newsletter
• Create a Vuex action to trigger the above request
• Add the Vuex action in the homepage banner when someone add their email address
• Show a toast (using Swal.fire) to inform the user if the email was addedd succesfully or not)

This feature is completed when:

• It resemble the design of the Mobile and Desktop attached screens (it does not have to be pixel perfect at this stage)
• It has all the text exported into the language files (even if dummy text

Note the CSS is being written using tailwind. it is suggested to develop the HTML in the live editor first (https://play.tailwindcss.com/) and them move it over.

As an user I would like the search result NOT to include my own books.

Current:

• go to the homepage
• search for a book
  Expected
• The list of books shown does NOT include my personal books
  Action
• The list of books includes my personal books

Steps to reproduce

• Login into the app
• click on the add book
• write a book title and press enter to search

Expected

• The list of result is scrollable within the box provided
  Actual
• The list of books overflow the list provided and the "perfectScrollbar" does not seem to work properly

As a developer I would like to have the ability to create fake data to help me test and setup a local database full of info

Use Laravel factories model: https://scotch.io/tutorials/generate-dummy-laravel-data-with-model-factories

Feature:

• Create factory for User table
• Create Factory for Book table
• Create factory for Bookshelf table
• Create factory for Author table
• Create Factory for Categories table

At the moment, when a user searches for books on the bookshelf/add page, books are listed in the dropdown. But if the user navigates away from the bookshelf/add page without selecting a book, selectedBooks data is not cleared resulting in the dropdown being visible when the user again comes to bookshelf/add page.

Steps to reproduce:

• Click on "Add a book"
• Search for a book
• Navigate to any other page (click on the logo)
• Then again click on "Add a book"

Expected behavior:

• Dropdown should not be visible

As a user I would like to be able to record my Address into the Bookshelf Table so that it will be easy to fetch and use during the use of my app:

To do:

• Add the following column in the Bookshelf table (Address Line 1, City, postcode)
• Make the correct modification within the Bookshelf.php file (fillable)
• Make the correct changes to the seeder factory, to make sure that this info is filled when the database is created for dev purposes
• Rename the current ManagementController within the Bookshelf folder to BookshelfItemManagementController
• Create an API endpoint that will allow to update the above table
• Create a controller to handle the data modification (Bookshelf/BookshelfManagementController)
• Make sure to update the app with the new name (i think just the API endpoints need to)

As a developer I would like to have the ability to borrow a book through the api.

Feature:

• Create relevant tables to Borrow a book
• Create API endpoints to Borrow a Book by its Bookshelf ID

As an developer using the application, I would like cypress to be fully implemented, so that I could develop integration tests.

• Add Cypress to the application
• Write a basic test
• (optional depending from skillset) Update the github action config fil to run the cyrpess tests on every push to the main branch

As a developer I would like to have the ability to search a specific location to find out all the books that are currently available

• Create a method to calculate distance from lon/lan
• Create APi to receive the Library request (position and radius)
• Create handler to return all available and not available books

As an user I would like to receive a transactional email to inform me that a book request has been received.

• When an user correctly send a book request, the person "lending" the book should receive an email
• The email should include the Book name, the name of the person that wants to lend the book, the date and time suggested for the pickup, and a link to the "bookshelf/info" page (where the user can accept the request).

As an user I would like to see a loading state while the app is evaluating my request on the homepage (it needs to get longitude and latitude of a location).

• Create a new vuex module called "loading". (very simple just a loading state and ability to switch it on or off)
• Trigger loading when the Search button is clicked on the homepage
• WHen the app is in loading state, show a loading spinner instead than the button (give the same look and feel of the button to the spinner, with the same background colour, just a loading spinner instead than text)
• Make sure that the user CANNOT click the button while the app is loading
• Make sure the Input field (title, location) are disabled while loading

The following links in the README file when clicked redirects to a 404 page, from what I've noticed the directory for the markdown files were added to the documentation folder.

Links affected

Contribution section
Installation documentation

Old Locations

Current link https://github.com/Zelig880/BooksBank/blob/main/documents/contribution.md
Current link: https://github.com/Zelig880/BooksBank/blob/main/documents/installation.md

Updated Locations

https://github.com/Zelig880/BooksBank/blob/main/documentation/contribution.md
https://github.com/Zelig880/BooksBank/blob/main/documentation/installation.md

Requesting permission to raise a PR to fix this. 🎉

As an user I would like to be able to return a book. When returning a book, I will be able to propose a time for dropoff.

• Create an endpoint in the laravel APi layer
• Create a controller method (or use one of the existing one) to change the ledge status (to awaitingReturnApproval), and return_date
• Add a new enum in the ledgeStatus called awaitingReturnApproval

As an user, I would like to be asked to give access to the website to use my current location, so that the "location" input box will already be prefilled.

NOTE: the current location API does not work without SSL, that means that is pretty tricky to test locally

• Implement the required code to ask for the user permission to get their current location https://www.w3schools.com/html/html5_geolocation.asp
• Use the longitude and Latitude on this internal endpoint "geolocation/getAddressFromGeolocation" to get information on the user location
• Wait for the above request, and then automatically prefill the "location" input field
• Make sure that the longitute and latitude are also saved and sent when the form is submitted!

This feature is completed when:

• It resemble the design of the Mobile and Desktop attached screens for illustration only, see invision/zeplin (it does not have to be pixel perfect at this stage)
• It has all the text exported into the language files (even if dummy text)
• Create an empty "click" handler ( newsletter subscription in another ticket)
• It enhance the current look and feel of 'resources\js\components\sections\welcomeJoin.vue'

Invision designs: https://projects.invisionapp.com/d/main/default/#/console/17236584/446551990/preview
zeplin: https://app.zeplin.io/project/6047d3685cdff106a3f16337/screen/6047d80ebafdbb06f6d2df8e

Note the CSS is being written using tailwind. it is suggested to develop the HTML in the live editor first (https://play.tailwindcss.com/) and them move it over.

Due to recent changes in the app, the following modification need to be implemented:

• Remove the column "pickup_times",
• Add a column called "opening_days" (this will be an array of number, that if i am not mistaken is just string in mysql)
• Add a column called "opening_hours" (this will be an array of number, that if i am not mistaken is just string in mysql)
• Modify the factory seeder to make sure that it it works as expected
• Change the "fillable" entry in the bookshelf.php file

WHen an user search for a book, and there are none in his area, we should create a banner or something that will push the user in "reaching" out for more users (maybe include social buttons ).

• Create a banner that look like the attached image below
• When clicking the facebook, setup the HREF to automatically open facebook with the message mentioned below (ask Zelig880 for feedback)
• When clicking the twitter, setup the HREF to automatically open twitter with the message mentioned below (ask Zelig880 for feedback)

" Come and join @BooksBank and give your books another life: https://Booksbank.co.uk"

Design:

Enhance the getGeolocationByUserQuery to try to get location by city if postcode fails.

Due to the fragility of the openApi used, the postcode request fails at time, and we should try to fallback to the city if available within the request.

• If the postcode request fails, check if city is present, if it is, do another request with city and counttry hardcoded to UK).

At the moment, an user is not able to go back while adding a book, and is forces to refresh the page to be able to add a new book (for example if they clicked on teh wrong title).

• Add a button on the bottom right of as shown in the attached picture if the add to your bookshelf is shown
• SHow the button only if a title has been selected from the dropdow
• Name the button "Start again" and use secondary theme
• When the button is clicked, cleanup the selected book variable and make sure the form is reset to its initial state
  

As an administrator of the site, I would like my site to records analytics, so that I would be able to improve the service and see what works and what does not:

• Add a google analytics package (if i am not wrong, there is one for vue)
• Create new entry in .env.example with the name of variable required for google analytics
• Make sure the application work also WITHOUT this values, and does not through an error (for local build)

As a user that has previously send a book request, I would like to receive a transactional email to inform me that a book request has been accepted.

• When a lender accepts a book request, the person "borrowing" the book should receive an email.
• The email should include the Book name, the name of the lender, the date and time for the pickup.

As an user I would like to have the ability to enter books information manually if the book can not be found with the API.

• Create a "add it manually" button in the search box result shown in the Add book page
• Create a new vue component (modal) for the manual import
• Allow the user to enter Title, description, authors (array), ISBN
• Make sure the manual entered book is saved succesffuly in the backend server (you may need more information that the one I mentioned above).

As a developer I would like my email to be sent using an queue instead than just a direct method. This will support future development of the application

• Create a new Job for the email
• Change all the code currently sending emails to use the new queue
• Add the "start queue" code into the deployer yaml file (zelig880 can do this after the PR is raised)

As an user I would like to receive an email asking me if the books has been picked up at the expected time:

• Create a cron job that run every day at 12 PM gmt (Midday)
• Check if there is any book in AwaitingPickup and if the time is BEFORE now
• Create a new email that includes the book name, and a button to confirm if pickup has been completed or reject
• Create endpoints (that require auth) to accept Pickup (move the ledge into a status of in progress, or reject ( mark the book ledge as rejected).

Hi @Zelig880, as you have mentioned to raise an issue if the slack community link expires. Please send the invitation to join the community.