This project provides a simple example of how to create a Node.js and React application that connects to the Gravatar API to consume and display Gravatar data. Using the npx create-gravatar-react-profile-example command, you can quickly scaffold a new project.
To create a new Gravatar example application, use the following command:
npx create-gravatar-react-profile-example <project-name>You will be prompted to select between creating a complete application or a starter application.
? What type of template do you want to create? (Use arrow keys)
❯ Complete application [ Ready to play with ]
Starter application [ To follow along with the tutorial ] The complete application is fully set up and ready to use. It includes the necessary routes and front-end components to interact with the Gravatar API.
During the complete application setup, you'll be asked if you want to set up an API key.
To create a new API key navigate to https://gravatar.com/developers, create or open an existing application, and use the "API Keys" menu to create a new API key.
The starter application includes the basic setup and structure. It is designed to be used with the tutorial, allowing you to follow along and build the application step-by-step.
<project-name>/
├── public/
│ └── index.html
├── src/
│ ├── client/
│ └── server/
├── .babelrc
├── .env
├── package.json
└── webpack.config.js
The application uses an .env file to manage environment variables.
Make sure to set up your API key in the .env file located in the root directory:
API_KEY=[your_api_key_here]
-
npm start: Build the application and start the production server. -
npm run build: Build the project for production. -
npm run dev: Start the client development watching file changes.
- Install dependencies:
npm install- Start the application
npm startThis should make the application available at http://localhost:3000