An app to allow a person to search for books and build their own personal reading list.
- Search for books by title
- Add a book to your personal reading list
- Ability to remove a book from your own personal reading list
- Mark a book as having been read and leave a review
The app can be accessed in the following URL:
Other URLs so far:
To access a saved book directly, add a valid id as a parameter, as follows:
E.g.
APIs are located in:
Books
GET
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
MongoDB and Mongoose are used to store and model application data. A MongoDB URI should be defined in a .env file, according to the example provided.
Styled Components is utilised for convenient CSS-in-JS styling, along with design tokens generated by Figmagic and Amazon Styles Dictionary.
Figmagic fetches a document with predefined tokens directly from Figma and generates JSON files from their data, while Styles Dictionary exports their values in CSS and JS formats, to be applied consistently across the project.
A Figmagic Figma template can be found at:
https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens.
You will also need a Figma API key and the URL id of that document. More information can be accessed in the Figmagic documentation.
To fetch Figma tokens and update the JSON files, run:
npm run fetch-figma
# or
yarn fetch-figmaTokens can also be generated directly from the JSON files using Styles Dictionary. They are stored in figmagic/dictionary folder, and can be edited manually without the Figma API.
To generate the JS module from the JSON files, run:
npm run build-dictionary
# or
yarn build-dictionaryYou can also run Figmagic and Styles Dictionary in a single command using:
npm run build-figma
# or
yarn build-figmaServerless Next.js Component is used for deployment in AWS using S3, Lamba@Edge and CloudFront, for static pages, APIs and fast content delivery.
The configuration is defined in the serverless.yml file, following the example provided.
You should also use this file to add and access environment variables at build time.
To deploy this project, run:
npm run deploy
# or
yarn deploy