This is a submission for the The AWS Amplify Fullstack TypeScript Challenge
What We Built
Community Central is a dynamic platform where users can create, view, update, and delete communities. Each community can have its own set of announcements, which are created by the community owners and are visible on the community page. The About tab provides detailed information about what the community is about, helping users understand its purpose and goals. Additionally, we have integrated Crisp support to ensure customer satisfaction. This project was built using Next.js for the frontend and AWS Amplify Gen 2 for the backend.
Demo and Code
- Live Deployment - https://main.d7jv2qcnifbzj.amplifyapp.com
- Source Code - https://github.com/Kushagra102/amplify-aws
Integrations
- Data - A nested(complex) production ready CRUD.
- Authentication - Via Authenticator component and email verification based Auth.
- Serverless Functions - Used for sending Welcome Message via Email to the New Users.
- File Storage - Used for storing Image Files throughout the application.
Journey
Our journey with Community Central started with setting up AWS Amplify Gen 2. Having experience with Gen 1, transitioning to Gen 2 was a seamless and exciting experience for us. The new features and improvements in Gen 2 significantly enhanced our development process.
The first major learning curve was establishing relationships in the datastore using the hasMany and belongsTo directives, which allowed us to query nested data efficiently. Mastering this was crucial for building a robust backend for our app.
Our initial success came with establishing authentication and creating a clutter-free CRUD interface for our users. Using Amplify UI components and connected forms was a thrilling experience. The way Amplify automatically generates create and update forms streamlined our development process, making it faster and more efficient.
We also brainstormed potential triggers for our app, such as sending a welcome email upon signup, notifying owners when a community is created, and sending announcements to community members. We successfully implemented the signup triggers and are planning to incorporate create and announcement triggers in the near future.
As for optimizing the UI, we considered using the TanStack Query approach but decided to leave this for future projects with Amplify. Our focus remains on delivering a smooth and user-friendly experience for our community platform.
Looking back, we're particularly proud of how we leveraged AWS Amplify's capabilities to build a functional and efficient application. Our next steps include implementing the remaining triggers and continuing to optimize and enhance our platform based on 100's of features that we have in our mind.
Connected Components and Feature Full
We are excited to convey that we have Incorporated both Amplify connected components and all four integrations.
1. Amplify Connected Components and Amplify UI -
- Use Of Connected forms for Create and Update requests.
- Use of Authenticator for Authentication.
- Use of Tabs for seamless navigation.
- Use of Account Setting Change Password for easy reseting of passwords.
- Use of Storage Image and Manager to efficiently show and upload images to S3 (Storage).
- Encorporated Connected Forms together with Tabs for creating and managing communities and announcements.
- Alert was use to notify and block non-owners to change community settings.
- Use of Search Field to incorporate seamless search of multiple communities.
- Flex, Image, Containers, View, Divider, Heading, Button, Input, Grid and Cards.
2. Feature Full -
We have used Connected Components and all four features: Data, Authentication, Serverless functions, and File Storage.
Data: We have used DynamoDB to securely store all the information records of the communities and users. We also created complex data relationships between the tables to query and update the information efficiently.
Authentication: The users are authenticated using Amplify Auth (Cognito) to access the communities. We also save information of users like preferred usernames and names. Also, the app sends a welcome email to the user on successfully registering
File Storage: Banners are a major part of the communities to express themselves, we used S3 with amplify which made our task very easy to upload and query the image files.
Serverless: Developing for user experience is a major key point, in our app, we enhance the user experience by Sending Welcome emails using the Serverless Lambda function attached to the trigger on the Auth Service.
This is a submission by a team of 2.
Team Members:
@geoffreyanto12
@kushagra102
Top comments (0)