AWS Amplify | End-to-End Setup: LinkedIn Learning Tracker
Tags: aws, devops, opensource, community
Published: 2023-09-10 09:58:59

## AWS Amplify is a set of products and tools that enable mobile and front-end web developers to build and deploy secure, scalable full-stack applications, powered by AWS.

**Step 1: Set Up Your Development Environment**

1. Install Node.js and npm from https://nodejs.org/.
3. Install Git (optional but recommended) from https://git-scm.com/.
5. Install AWS Amplify CLI:

```
npm install -g @aws-amplify/cli

```

**Step 2: Create a New React App**

- Create a new React app:

```
npx create-react-app linkedin-learning-tracker
cd linkedin-learning-tracker
```
**Step 3: Set Up AWS Amplify**

- Configure Amplify:

```
amplify configure
```

- Initialize Amplify in your React app:

```
amplify init
```
**Step 4: Create GraphQL API**

- Add API:

```
amplify add api
```

- Choose "GraphQL" as the service and configure your API:

- API name: LinkedLearningTrackerAPI
- Authorization type: API key (for simplicity in this example)
- Schema: Use default schema or edit as needed

**Step 5: Create DynamoDB Backend**

- Add storage:

```
amplify add storage
```

- Choose "Amazon DynamoDB" as the service and configure your table.

**Step 6: Deploy Backend Resources**

- Deploy the backend:

```
amplify push
```
**Step 7: Create React Components**

- In the 'src' directory, create 'CourseForm.js':

```
import React, { useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { createCourse } from './graphql/mutations';

function CourseForm() {
  const [courseData, setCourseData] = useState({ title: '', source: '' });

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      await API.graphql(graphqlOperation(createCourse, { input: courseData }));
      console.log('Course created successfully');
      setCourseData({ title: '', source: '' });
    } catch (error) {
      console.error('Error creating course:', error);
    }
  };

  const handleInputChange = e => {
    const { name, value } = e.target;
    setCourseData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Course Title:
        <input type="text" name="title" value={courseData.title} onChange={handleInputChange} />
      </label>
      <label>
        Course Source:
        <input type="text" name="source" value={courseData.source} onChange={handleInputChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default CourseForm;

```

- In 'src/App.js':

```
import React from 'react';
import './App.css';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import CourseForm from './CourseForm';

Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <h1>LinkedIn Learning Tracker</h1>
      <CourseForm />
    </div>
  );
}

export default App;

```
**Step 8: Run Your Application**

- Install the required dependencies:

```
npm install aws-amplify aws-amplify-react

```

- Start your application:

```
npm start

```

- Open your browser and navigate to 'http://localhost:3000'.

**Step 9: Test Your Application**

1. Fill out the course form in the web application and submit.
2. Check the AWS AppSync console to verify that the data is being stored in DynamoDB.

_Congratulations! You've successfully set up an end-to-end project that allows employees to submit completed courses and sources using AWS Amplify, React, GraphQL, and DynamoDB. You can further enhance this project by adding user authentication, displaying a list of completed courses, and improving the user interface._