fj1/quotes-app

based on https://geshan.com.np/blog/2021/10/nodejs-sqlite/

start BE with node index.js in the server directory, then visit http://localhost:3000/quotes

for BE + UI, run npm start at root level

ideas for further iterations

button to show a random quote
button to show all quotes
styling
UI for adding a quote
UI for deleting a quote
clean up README

npm init npm i sqlite3

create DB and add some quotes:

sqlite3 quotes.db

CREATE TABLE quote ( id INTEGER PRIMARY KEY AUTOINCREMENT, quote text NOT NULL UNIQUE, author text NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL );

INSERT INTO quote (quote, author) VALUES ('Dwell on the beauty of life. Watch the stars, and see yourself running with them.', 'Marcus Aurelius'), ('Be thankful for what you have; you''ll end up having more. If you concentrate on what you don''t have, you will never, ever have enough.', 'Oprah Winfrey'), ('The only time you fail is when you fall down and stay down.', 'Stephen Richards'), ('It will never rain roses: when we want to have more roses, we must plant more roses.', 'George Eliot'), ('The true measure of success is how many times you can bounce back from failure.', 'Stephen Richards'), ('Don''t count the days, make the days count.', 'Muhammad Ali'), ('Real change, enduring change, happens one step at a time.', 'Ruth Bader Ginsburg'), ('And now that you don’t have to be perfect, you can be good.', 'John Steinbeck'), ('The most important step a man can take. It''s not the first one, is it? It''s the next one. Always the next step.', 'Brandon Sanderson'), ('Never confuse a single defeat with a final defeat.', 'F. Scott Fitzgerald'), ('A dead end street is a good place to turn around.', 'Naomi Judd'), ('Life can only be understood backward, but it must be lived forwards.', 'Søren Kierkegaard'), ('Rivers know this: There is no hurry. We shall get there some day.', 'A.A. Milne');

select * from quote;

install “express” and “better-sqlite3” NPM packages

npm i express better-sqlite3

create index.js, which is our server

create routes/quotes.js

create the quotes service at /services/quotes.js

create /services/db.js

create config.js

in the terminal, run node index.js and visit http://localhost:3000/quotes

you'll see a list of quotes because the GET request fetched the data from the quotes.db SQLite DB

you can also visit http://localhost:3000/quotes?page=2

and http://localhost:3000/quotes?page=3 will have an empty array for data

Adding POST requests

need to configure Express so that it will allow JSON in the body of a req update index.js to include app.use(express.json());

update /routes/quotes.js to include a POST route

update /services/quotes.js to include create() and validateCreate()

update /services/db.js to include run()

can run a cURL command in the terminal to test the POST: (note that we need '\'' to escape the ')

curl -i -X POST -H 'Accept: application/json' \
    -H 'Content-type: application/json' http://localhost:3000/quotes \
    --data '{"quote":"You may say I'\''m a dreamer, but I'\''m not the only one. I hope someday you'\''ll join us. And the world will live as one.","author":"John Lennon"}'

To view the DB in VS Code with the SQLite extension:

In the Explorer sidebar, there is a SQLite Explorer section (it might be collapsed). Open that section Open quotes.db Right click on 'quote' and select 'Show Table' (or click the triangle next to 'quote)

add PUT (update)

added a test quote that we'll update

curl -i -X POST -H 'Accept: application/json' \
    -H 'Content-type: application/json' http://localhost:3000/quotes \
    --data '{"quote":"update me! my ID is","author":"anonymous"}'

checked the DB, and this quote's ID is 15 so we'll request an update that changes the description

update services/quotes.js to add a PUT update routes/quotes.js to handle router.put()

curl -i -X PUT -H 'Accept: application/json' \
    -H 'Content-type: application/json' http://localhost:3000/quotes/15 \
    --data '{"quote":"update me! my ID is 15","author":"anonymous"}'

add DELETE

update services/quotes.js to add deleteQuote update routes/quotes.js to handle router.delete()

add a test quote to delete:

curl -i -X POST -H 'Accept: application/json' \
    -H 'Content-type: application/json' http://localhost:3000/quotes \
    --data '{"quote":"delete me! my ID is 16","author":"anonymous"}'

delete the quote with the id of 16

curl -i -X DELETE -H 'Accept: application/json' \
    -H 'Content-type: application/json' http://localhost:3000/quotes/16

prep for adding UI move all files except .gitignore and the README to a new directory, /server

in root dir, ran npx create-react-app client

in quote-app/client, run npm start and visit http://localhost:3000/

updated package.json at root level to use concurrently for installing and starting the backend and client at the same time in root dir, npm i concurrently https://www.npmjs.com/package/concurrently

update server port to use 3001 (because client is using 3000)

update server package.json to have a start script

run npm start at root level, looking good so far 🎉

deleted Create React App stuff

added cors package https://www.npmjs.com/package/cors

add QuoteSection.js and Quote.js add fetch to GET all quotes some basic styling

add pagination

BE changes to get total number of pages

lift state up
add Footer component
- shows the current page
- add forward and back buttons
- the forward and back buttons disable when the user is at the first/last page

fj1 / quotes-app

About

Languages