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.
Top comments (15)
Good idea! I tried it out. You should add a feature where, when a user is creating an account, (for example, a dev.to account) they can use an extension, or something similar, to fill in their bio information as they're creating the account.
Also, it would be great if, when they did this, their new account (let's say their dev.to account) was displayed in you list of account links at the bottom. I think you could actually have a popular tool here, if you pull a few more strings! Again, great job!
I like it, and will be easy the implantation, based on the quasar framework that give the posibility to compile a browser extension, thanks for your comment's.
Good. I look forward to being on of your first users! 😀
This looks really great, congrats!
awesome idea! just created mine maludecks.bio.awslearn.cloud 😁
Greate something unique!
Hey Can you please guide me as I'm beginner and new to AWS
Unexpected usage of Free Tier (Amazon Simple Storage Service) I see in my Free Tier table (Billing) usage of Free Tier of Amazon Simple Storage Service, but I didn't use this much so how it can reach to this much request. Can you explain to me where these usages come from? And how to stop these usages?
Hello thanks for read.
In case that the consumes they are not from your side, review if you have a credentials with admin permissions (policy) exposed, other way is using AWS Cloudtrail to audit the origin of this consume. Finally contact the AWS support in case that Cloudtrail not be helpful.
Be free to write me on LinkedIn: alejandro.bio.awslearn.cloud
Thank you so much for your guidance. will check it and let you know
Awesome :)
Very cool!
Impressive.
Looks AWSesome! Am curious what’s the monthly AWS Bill for this ?
How all the components of the infrastructure are serverless the price is based on the use, but to resume is so cheap. To understand the exact cost we need to know the quantity of users per month that will use the application, based on it we will be able to calculate the cost of compute (lambdas), and the cost pf Database (Dynamo) related with storage in S3 is the most cheaper cost, up to 5gb of storage is free.
Thanks for the prompt response.
Nice job! Great looking app!