AWS Amplify | End-to-End Setup: LinkedIn Learning Tracker

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/.
2. Install Git (optional but recommended) from https://git-scm.com/.
3. 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.