Create your Biography Web Page with AWS Amplify Gen 2

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

I'm excited to introduce BIO an application designed to empower everyone to create their unique biography web page. This user-friendly platform simplifies the process of personal brand building and online presence management.

How It Works

1. Account Creation: Each user must create their BIO account using a user-friendly interface built with Amplify UI components.

2. Configure their BIO Website: After creating an account and logging into the platform, the user can configure their information, which will be deployed on their web page with a customizable subdomain.

In the image above, the left side shows a form where users can configure the information they want to display on their public BIO personal website. In real time, the right side previews how the web page will appear.

3. Access to the BIO personal webpage: After the user saves the information, their URL (https://my-subdomain.bio.awslearn.cloud) will appear at the top of the platform, indicating where their web page is deployed. Each user will be able to access their web page using this URL.

Demo and Code

Anyone can test the BIO platform at https://app.bio.awslearn.cloud. An example of a BIO website you can create is https://alejandro.bio.awslearn.cloud.

The project is open source, the code is public available on my personal GitHub repository https://github.com/4l3j4ndr0/my-bio.

Integrations

The diagram above represents the technologies used in these challenges:

• Amplify: Of course, the key service here is the amazing Amplify. To achieve this project, I used the Vue.js with Quasar Framework and integrated Amplify's UI linked components to facilitate the authentication flow.

• Cognito: To achieve the authentication flow, Amplify allows us to easily integrate authentication. Behind the scenes, Amplify creates a Cognito user pool to store all user information and manage authentication for our application.

• AppSync: Amplify gives us the capability to add a data layer to persist information in our applications. Behind the scenes, Amplify creates an AppSync GraphQL API, enabling us to execute CRUD operations.

• DynamoDB: When we configure the Data module in our Amplify project, AppSync uses DynamoDB as the database to persist all information in this NoSQL database.

• Lambda function: I used the function module in Amplify to connect with Credly and retrieve certifications for users who input their Credly username. Behind the scenes, Amplify exposes the Lambda function through an API Gateway REST API.

• S3 Bucker: To enable users to upload their profile images, I used Amplify's storage capability, which allows us to persist static file information.

• Route53: I used my own Route53 hosted zone to provide users with a more user-friendly domain name by configuring a custom domain within the Amplify AWS portal.

I connected my GitHub repository to the Amplify console. This way, each time I push code changes to the master branch, the Amplify pipeline is immediately triggered, initiating the deployment flow.

Connected Components and/or Feature Full
In my use of Vue.js, I only utilized the Amplify Authenticator component. In my opinion, this is the best component Amplify offers. It's incredible how much effort it saves, as it provides a complete authentication and secure flow integration with minimal code.
And the other components, to develop the application I used Quasar Framework.

Conclusions

Amplify empowers full stack developers by significantly expediting the development process of robust applications. Its comprehensive suite of tools, ranging from authentication and storage to GraphQL APIs and serverless functions, streamlines the implementation of essential features. By abstracting away much of the underlying complexity, Amplify enables developers to focus on building functionality rather than managing infrastructure. This accelerates development timelines and ensures the creation of secure and scalable applications. With Amplify, full stack developers can swiftly translate ideas into reality, delivering high-quality solutions to market faster than ever before.