Pinboard React Client

A basic example of some React and Express code which lists bookmarks from Pinboard.

I've also used an icon from the Feather open-source icon pack.

Directory Structure

• assets - Design-related source files
• docs - Project documentation files
• docs/todo.md - The project's task list
• public - Front-end image and HTML files that are also used in the build process
• server - Back-end API endpoint logic built using Express
• src/css - Styling files for the UI
• src/components - Front-end UI components built using React
• src/views - Front-end UI views built using React
• src/index.js - Front-end entry point used to initialise the UI via React
• license.md - The project's license file for details on the rights and limitations when using the code here in your own projects
• package.json - Node package configuration file that also includes shortcut commands in the scripts section
• server.js - Node web server that uses Express to configure routes for both the back-end and front-end

Configuration

Initial Setup

npm install
cp -n example.env .env

Then edit the .env file to use the appropriate configuration values for the application.

Update the Pinboard API Token

1. Visit your Pinboard password page
2. Save this in .env as the value of the PINBOARD_API_TOKEN variable
3. Apply the changes to the application: npm run serve

Update the domain and port configuration

1. Edit the APP_DOMAIN and APP_PORT values in .env
2. Apply the changes to the application: npm run serve

Commands

Compile a production-ready asset bundle

npm run build

Start a local web server

npm run serve