Description ๐
A timeless proverb reminds us that 'failing to plan is planning to fail. Effective planning is the key to success, and that's why I'm thrilled to introduce my full-stack web application, Task Planner, developed during the AWS Amplify hackathon. This invaluable app is designed for individuals seeking efficient task management and coordination in their daily activities. By fostering better organization and collaboration, Task Planner enhances overall productivity.
We've all experienced those weeks where time seems to slip away, and we struggle to recall what we've accomplished. With Task Planner, you can bid farewell to such moments of uncertainty and take charge of your goals, ensuring you make the most of your time and achieve success with ease.
Task Planner is a feature-rich app showcasing a variety of powerful capabilities, all made possible by the comprehensive tools and services offered by AWS. This platform enables frontend and full-stack developers to build, deploy, and host applications with ease, leveraging the power of data, without requiring extensive cloud expertise.
Key features ๐
Authentication - Secure user access is seamlessly implemented using Amazon Cognito and AWS Amplify CLI.
GraphQL API - Task Planner's data interaction is empowered by an AWS AppSync API, built with AWS Amplify CLI. By running the command
amplify add api
I was able to add a GraphQL API to my app and to automatically provision a database which is the Amazon DynamoDB (a NoSQL database)User-friendly Interface: The frontend of Task Planner is thoughtfully designed using Amplify UI components, offering users a visually appealing experience.
Robust Data Management: The application is backed by a strong backend acting as the storage component, ensuring efficient data management.
GitHub Repository: Explore the code on my GitHub repository by clicking on the following link: https://github.com/joanita-51/Amplify
Experience Task Planner: Discover the Task Planner application by clicking on the following link: https://task.d21saxfg1vd4sj.amplifyapp.com/
Demo email: nakityoanita51@gmail.com Demo Password: password
Getting Started ๐
Click on the application URL to access the application. (https://task.d21saxfg1vd4sj.amplifyapp.com/)
Create an account using the provided authentication process by simply entering your email and password, followed by email verification.
Once logged in, you can start creating your weekly todos.
You can edit and delete your todos as needed.
My Experience ๐
I was thrilled when I received an email inviting me to join the AWS Amplify Hackathon on Hashnode. It was a moment I eagerly awaited, as I've always dreamed of participating in one of Hashnode's hackathons. This being my first one made it even more special. While I knew about AWS, I hadn't yet explored their technologies or built any apps with them. The hackathon presented the perfect chance to dive into the world of AWS Amplify and broaden my skillset while learning new and exciting things.
I immediately joined the Discord channel to connect with fellow participants and immerse myself in the hackathon community. With so many ideas in my head, I made a list of all of them. But then, I realized that to get into AWS Amplify, I should begin with a doable project. That's when it hit me - creating a task planner! Since I had already made one using React, I saw a chance to improve it with AWS Amplify's capabilities and learn more about the platform at the same time.
After making my decision, I was still unsure about how to connect AWS Amplify to my project. So, I reached out to the Discord channel where I received helpful guidance on getting started.
To deepen my understanding of AWS Amplify, I explored additional YouTube videos. Moreover, I decided to enhance my knowledge by enrolling in a React and AWS course on LinkedIn. This allowed me to compare my learning with practical application, while also uncovering the advantages of using AWS Amplify compared to building without it.
I explored various documentation to aid my journey, and the most helpful one was the AWS Amplify and React documentation, which can be found at docs.amplify.aws/start/q/integration/react. This comprehensive guide provided an overview of the following components that I utilized to create the Hacker Planner app:
Amplify CLI - This provided a simple command line interface that I could easily configure all the services necessary to power the backend of my app.
Amplify Libraries - These client libraries facilitated the creation of common use cases, including authentication, data management, and file storage. They seamlessly connected my frontend app to backend resources.
Amplify UI Components - These UI libraries enabled me to build a visually appealing frontend for my app using React
Amplify Hosting - This remarkable AWS service offered me a git-based workflow, ensuring continuous deployment and hosting for a full-stack hack planner web application.
Using these essential tools from the AWS Amplify ecosystem, I successfully brought the Hacker Planner app to life, making the development process efficient and rewarding.
During the building phase of the hackathon, I explored GraphQL as I planned to utilize the GraphQL API. While comparing it with REST, I discovered some key differences. One major distinction was that despite both being built on HTTP for interacting with the server, GraphQL offers a single endpoint. This means that I could query nested information without making multiple server calls. The data received from the server is based on the query sent to the endpoint, making everything quicker and smoother.
Discovering the Advantages of AWS Amplify ๐ก
Using AWS Amplify, I discovered a simpler way to create full-stack web applications. With built-in common components like authentication, hosting, UI, and storage, I saved a lot of time, particularly on the backend development. This allowed me to focus on implementing the unique functionalities of my app and designing the frontend.
My experience with AWS Amplify during my first hackathon on Hashnode has given me the chance to share the benefits of this platform and the positive aspects of my journey with others.
AWS Amplify provides robust security features, including built-in authentication and authorization mechanisms. I had the chance to witness this firsthand when I seamlessly incorporated authentication into my application using Amazon Cognito and enabled email/password login. It's reassuring to know that my users' data is well-protected.
Amplify follows a serverless architecture, meaning you don't have to manage servers or infrastructure. AWS takes care of server provisioning, scaling, and maintenance, allowing you to focus solely on building your application's features.
AWS Amplify's seamless continuous deployment workflow proved invaluable when I needed to update my app's title. With a simple
amplify publish
command, the changes were instantly reflected on the URL. It made the process so effortless and efficient, allowing me to focus on improving my application without any hassle.
Overcoming Challenges with AWS Amplify ๐ ๏ธ
As a first-timer, my experience wasn't without hurdles, but I'm eager to share the roadblocks I encountered and how I triumphed over them.
The first challenge arose when I needed to create an AWS AppSync API. After some research, I opted to use the AWS Command Line Interface (CLI) in my terminal, although AWS Amplify Studio was also a viable option. To get started, I installed and configured the AWS CLI with the necessary credentials to access my AWS account, following the documentation mentioned earlier in this article.
The second challenge was achieving the desired appearance for my application. I had to carefully select colors that would enhance the user experience. Luckily, I discovered a valuable tool called Color Hunt (colorhunt.co), which provided impressive color palettes for design. From the available options, I carefully chose the following colors that complemented my application's image.
My third Challenge was Real-time Updates for Todos. One obstacle I encountered was that when a user clicked the edit button to update a todo, the changes would only become visible after they refreshed the page. The issue was that I hadn't updated the local storage with the latest todos. To solve this, I leveraged the power of the spread syntax in JavaScript, as demonstrated in the following resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
By implementing this solution, I successfully achieved real-time updates for todos, providing a more seamless and interactive user experience.
After completing the development of my application, I encountered another challenge - deploying the new changes. To seek assistance, I turned to the helpful Discord community. They promptly started a dedicated thread to organize the discussions, ensuring that any error conversations were neatly organized and easily accessible. This not only resolved my issue but also created a valuable resource for others facing the same challenge, enabling them to find the help they needed efficiently.
In regards to the fourth challenge, the issue arose from a profile access problem. As I was simultaneously developing my application and studying my course, I had created separate users: one for the application (dev user) and another for the DynamoDB (for my course). Unfortunately, I had mistakenly set the profile for the application to the default user, which was the DynamoDB user, causing access denial to the deployment bucket.
After some careful investigation, I realized the root cause while going through the user and backend environment creation process again using the command amplify init
. I deleted the dev user and backend environment and I decided to run the following commands:
amplify configure
- To set up access to my AWS account.amplify init
- To establish Amplify and create the necessary backend services for the app.amplify add api
- To add a GraphQL API and provision a database for the app automatically.amplify add hosting
- However, since hosting was already enabled, this step wasn't effective.amplify publish
- This allowed me to successfully publish the application, obtaining my AWS Amplify domain as "task.d21saxfg1vd4sj.amplifyapp.com".
By carefully reconfiguring the user access and following the correct steps, I was able to resolve the issue and deploy my application and any changes i made successfully.
During the testing phase of my application, I encountered my fifth challenge after publishing it. Surprisingly, users could see and change other users' details. It was a mistake I hadn't thought about earlier, but realizing it was a positive moment for improvement. To fix it, I updated the GraphQL schema to include a 'userId' field in the 'Todo' type. In the frontend, once a user logged in, I got their user ID from their attributes. Then, I adjusted the code that retrieves tasks from the backend, so only tasks with the same 'userId' as the authenticated user would show up.
The screen above displays the updated schema, while the screen below showcases the updated frontend code that queries specific user tasks based on the userId.
This solution not only made the app more secure but also improved the overall user experience.
Encountered Error Messages โ ๏ธ
Throughout my development journey, I faced some error messages, including the following:
"Variable 'input' has coerced Null value for NonNull type 'DeleteTodoInput!'" This message indicated that the GraphQL operation expected a non-null value for the 'input' variable, but it received null instead. To resolve this issue, I ensured that the 'input' variable provided to the 'deleteTodo' GraphQL operation was not null, by providing an 'id' to identify the specific Todo item to delete.
"Could not initialize platform for 'dev': Access Denied": As mentioned earlier, this error occurred because I was using a different user without the necessary access permissions.
" errorInfo : null errorType: "DynamoDB:ConditionalCheckFailedException" message: "The conditional request failed (Service: DynamoDb, Status Code: 400" : While working on my fifth challenge, I encountered this error message while trying to create a Todo item in the DynamoDB table. The error indicated a problem with the primary key or uniqueness constraint. It turned out that I had accidentally made the userId a primary key and yet I also had to include it again when saving the Todo item. As a result, DynamoDB rejected the item creation when the same user added a Todo, causing this issue.
errorType : "DynamoDB:DynamoDbException" message : "The security token included in the request is invalid." : While working on my fifth challenge, I also came across this error message, which pointed to an issue with the authentication or authorization token used to access the Amazon DynamoDB service. It became evident that I wasn't handling user authentication correctly in my case
These error messages acted as valuable learning opportunities, guiding me to identify and address specific issues in my application. By carefully understanding and troubleshooting them, I was able to create a functional app using AWS Amplify.
Conclusion ๐
In conclusion, my journey with AWS Amplify during this hackathon has been an enlightening experience. The platform's robust security, seamless deployment, and powerful features have enabled me to create Task Planner efficiently and with confidence. As I share my application journey with the world, I am grateful for the learning opportunities provided by the challenges I faced. I'm excited to continue exploring AWS Amplify and leveraging its capabilities to build innovative applications.