AWFT

App with a connection to Google Blogger API with React to edit blog-posts created on Google Blogger

Setup

1. Create a Google Account (if you don't have one)
2. Visit Google API Console
3. Create a Project in the top left corner
4. Select the Project
5. Add APIs through the Dashboard
6. Select "Enable APIs and Services"
7. Search and Activate "Blogger API v3" and "Google Analytics API"
8. Create Credentials with the following settings:
   • Which API are you using?
     • Blogger API v3
   • Where will you be calling the API from?
     • Web browser (Javascript)
   • What data will you be accessing?
     • User data
9. Create an OAuth 2.0 Client-ID
   • Name
     • AWFT
   • Authorized JavaScript origins
     • https://localhost:3000 (for development)
     • https://localhost:5000 (for standard build)
     • https://yourdomain.com/ (your domain)
10. Copy your created client ID
11. Open src/components/GoogleAuth and replace in line 25 <CLIENT-ID> with your Client-ID

Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:

npm install -g serve
serve -s build

The last command shown above will serve your static site on the port 5000. Like many of serve’s internal settings, the port can be adjusted using the -l or --listen flags:

serve -s build -l 4000

Run this command to get a full list of the options available:

serve -h

Known Issues

• post.replies.totalItems will not refresh instantly
• Visit a page through the browsers address bar will alwyas redirect to / even if you're logged in

Sources

• React Documentation
• Google Blogger API Documentation
• Materialize Documentation
• react-materialize
• Build a CRUD App in React with Hooks
• React.js CRUD example to consume Web API
• React Hooks CRUD example with Axios and Web API
• How to fetch data with React Hooks?
• Integrating Google Sign-In into your web app
• React example for Google Welcome using gapi-script npm package
• React router v4 redirect when no match
• React Router: Declarative Routing for React.js
• Protected Routes in React using React Router
• Hooked with React - Using react router in our react application to route a dynamic page
• p71pr7jn50
• Display A 'Loading' Indicator In React During Ajax Requests
• How to parse html to React component?
• google-api-javascript-client
• How to fix missing dependency warning when using useEffect React Hook?
• http:403 forbidden error when trying to load img src with google profile pic
• React Draft Wysiwyg
• react-draft-wysiwyg: how to set default value
• How to useContext in React?
• React Deployment