### Bookbrooch | Tech Stack - Server - Nextjs - Database - Sqlite / **Firebase (auth)** / Prisma / Supabase / MongoDB - Host/deployment - Fly.io / **Vercel** (DB is HTTP APIs/ Firebase DB) / Heroku / Firebase Hosting - Testing - **Cypress** / Jest / Playwright - Styling - Reach UI / **SASS** / CSS Module / Material UI / Chakra UI - Animation - Framer motion / react-spring - Api(s) ... ## Pages 1. Home/landing page 2. Login and signup page 3. My quotes page 4. My badges page (inside my quotes) 5. Search quotes page 6. Author page (dynamic route) 7. Book page (dynamic route) 8. Character page (dynamic route) 9. Games page (dynamic route) 10. Specific quote page (dynamic route) (for discussions) ## Ideas for features # PRIORITY PLANNING ## HIGH - Authentication (P3, P4, Navbar) - As a user I want to be able to create a private profile so I can save my quotes privately. - Firebase - User adding their own quotes (P3) As a user, I want to be able to type a quote and add save to my page. - tag quote (P3) As a user I want to be able to tag my quotes so I can organise them by theme - sort quotes by category (P1, P3, P5- P8, P10) As a user I want to be able to sort quotes by category so I can keep them organised. - Games (P9) As a user I want to have the option to play games related to quotes so I am more literate - Badges (P4) As a user I will need some rewards and prompting to log new quotes regularly so I am more motivated to read. - dark mode (P1-P10) As a user who spends a lot of time in front of the screen, I want to view in dark mode so that I can protect my eyes. - Search quotes As a curious user, I'd like a way to search for existing quotes so that I can learn and save them on my profile. ## MEDIUM/LOW (TO BE SORTED AFTER HIGH IS COMPLETED) - Making each page descriptive As a forgetful user, I'd like the application to be descriptive enough so I can navigate easier around it. - Delete/Edit own quotes (P3) - quote of the day (P1) - popup when badge is earned (no matter which page you are currently on) - Popular quotes (P1) - Search by collection/series rather than specific book eg ASOIAF (P7) - Print/download quote option (P1, P3, P5-8, P10) - your level goes up once you have a certain number of badges (P4) - user styling own post. (P3) - Notification when friend earns a badge - Add own tags - Option to create own badge(P4) - ability to search by multiple tags (P5) - hide button on each search result (P5) - share on social media (P1, P3, P5 - P10) - upload image(P3) - login/signup with google/facebook/github --- ### API Things I looked up --- ##### Famous people - https://rapidapi.com/martin.svoboda/api/quotes15/ ##### Goodreads (author, book, tags) - https://goodquotesapi.herokuapp.com/#/search ##### By author only - https://www.quotes.net/quotes_api.php ##### By author only - https://github.com/lukePeavey/quotable ##### Not API - list of quotes by goodreads - https://www.goodreads.com/quotes?page=1 ##### Quote - has author, book etc. Uses goodreads search, scrapes data. https://pypi.org/project/quote/ --- Currently Goodreads is a good source of quotes  --- - it returns quote, author, image, tags - we are looking into **quote** which is a python wrapper for the Goodreads Quote API - For this to work, we have to install python, pip and query the api to select the data --- `pip install -U quote` `from quote import quote search = 'Jasper Fforde' result = quote(search, limit=2) print(result)` --- - We could use this in the following way: - query api on every user search - select and store as much data as possible from this source, store it and let user query our DB --- Other options:  --- This returns  --- However it is limited --- ### Database and Hosting Firebase Vercel - With Firebase there were a lot of examples on how to set up. Stored data | 1 GiB Document reads | 50,000 per day Document writes | 20,000 per day Document deletes | 20,000 per day --- ### Testing (with cypress) Google search => [Next docs](https://nextjs.org/docs/testing)  ---- #### Key points 1. Install ``` npm install --save-dev cypress ``` ---- 2. Add the script ``` "scripts": { "cypress": "cypress open" } ``` ---- 3. Run the script ``` npm run cypress ``` ---- 4. Select e2e testing  ---- 5. Choose a browser and click start testing in "..."  ---- 6. Click new spec  ---- 7. Create a new empty spec (and run it)  ---- 8. In vs code, your spec file will appear, write the test(s) here eg ```javascript describe("empty spec", () => { it("passes", () => { cy.visit("https://example.cypress.io"); }); }); describe("My First Test", () => { it("Does not do much!", () => { expect(true).to.equal(true); }); }); describe("My Second Test", () => { it("Does not do much!", () => { expect(true).to.equal(false); }); }); ``` ---- 9. See the output on chrome