Blog App using AWS Amplify, Angular
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 05:37:00

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

## What I Built
I built a Blog Application using AWS Amplify and Angular where we can create a Blog by providing Title and description, list all the blogs and read a specific Blog.

## Demo and Code
<!-- Share a link to your Amplify App and source code. Include some screenshots as well. -->
SOURCE CODE: https://github.com/PreethiVuchuru27916/amplify-angular-template
App URL: https://main.dvwj8fwztcl1x.amplifyapp.com/blog-list/0fefede3-f5ac-4f8c-be69-4ed412601c8d

[1] Create Blog Button provides the user with a text editor to start working on the blog. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jvifacvei121wgccr8a.png)
[2] Used the ngx-editor to build the text editor and provided a scroll to add content of any size.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpin520eiz39hin81uz3.png)
[3] Have a publish option to create the Blog and show it under the list of Blogs
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9na3gjhy402ccru4qma8.png)
[4] List of Blogs
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgulmr0pqusf7czthvfj.png)
[5] Read more option on the list will take us to the individual Blog.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rcp7erkiy3lvsfcswui.png)
[6]Utilized Sign out and Sign In and Create Account features provided by Amplify
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0614qekx095w3mc1eaf6.png)

## Integrations
<!-- Tell us which qualifying technologies you integrated, and how you used them. -->
- I have create a model called Blog that has title and description. To save it to a personal cloud sandbox, I ran the npx ampx sandbox
to get amplify_outputs.json file. This allowed me to make backend updates in a private cloud space. 
- I have used authentication module and @aws-amplify/ui-angular for building the Sign Up, Sign In, Create Account. Also tried out the customization available for the Authenticator.


<!-- Reminder: Qualifying technologies are data, authentication, serverless functions, and file storage as outlined in the guidelines -->

## FUTURE WORK
- Will add a cover image that will make use of the File Storage concepts in AWS Amplify.
- Will add notifications to be sent over by using serverless functions.
- Will add draft versions and make sure only the loggedin users can see the drafts of their own. 

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four integrations to qualify for the additional prize categories. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->

Thank you Dev.to for interesting challenges :) I knew about the challenge really late and was not able to finish what I had in mind. But something is better than nothing and hence my submission. Challenges like these are a great opportunity to explore new technologies. Excited for more challenges in future.