DEV Community

Cover image for AWS Amplify | End-to-End Setup: LinkedIn Learning Tracker
Shamim Ansari
Shamim Ansari

Posted on

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

Enter fullscreen mode Exit fullscreen mode

Step 2: Create a New React App

  • Create a new React app:
npx create-react-app linkedin-learning-tracker
cd linkedin-learning-tracker
Enter fullscreen mode Exit fullscreen mode

Step 3: Set Up AWS Amplify

  • Configure Amplify:
amplify configure
Enter fullscreen mode Exit fullscreen mode
  • Initialize Amplify in your React app:
amplify init
Enter fullscreen mode Exit fullscreen mode

Step 4: Create GraphQL API

  • Add API:
amplify add api
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Choose "Amazon DynamoDB" as the service and configure your table.

Step 6: Deploy Backend Resources

  • Deploy the backend:
amplify push
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode
  • 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;

Enter fullscreen mode Exit fullscreen mode

Step 8: Run Your Application

  • Install the required dependencies:
npm install aws-amplify aws-amplify-react

Enter fullscreen mode Exit fullscreen mode
  • Start your application:
npm start

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)