Project: Sage project - Carpenters Database
About the project
Project start from Feb/2023 and end in April/2023.
The website was built in with the collaboration between Global Affairs Canada, Colleges & Institutes Canada, Algonquin College and the State College of Dominica. The goal of the project is to build a database to connect carpenters in The Common Wealth of Dominica, a country in Caribbean which was suffered from natural disasters such as tornado, storm.
For the frontend, we used React with Javascript to develop the website, Redux for State management and Tailwind CSS to style the application.
For the backend, we used AWS amplify including AWS Cognito, AWS DynamoDB, AWS S3... .
The website was built in with the collaboration between Global Affairs Canada, Colleges & Institutes Canada, Algonquin College and the State College of Dominica. The goal of the project is to build a database to connect carpenters in The Common Wealth of Dominica, a country in Caribbean which was suffered from natural disasters such as tornado, storm.
For the frontend, we used React with Javascript to develop the website, Redux for State management and Tailwind CSS to style the application.
For the backend, we used AWS amplify including AWS Cognito, AWS DynamoDB, AWS S3... .
Technologies
React.js
AWS
Redux.js
Tailwind CSSProject details
Desktop versionTablet versionMobile version
View image
Main Page
The main page of the website has been carefully crafted using responsive design and Tailwind CSS to ensure that it adapts and displays correctly across different devices such as desktops, tablets, and mobile phones. Additionally, the main page has a visually appealing layout that is designed to catch the user's attention and provide a pleasant browsing experience.
One of the key features of the main page is the inclusion of interactive charts. These charts present statistical data about carpenters in the Commonwealth of Dominica in a dynamic and engaging manner. Users can explore different metrics such as the number of carpenters in different regions and the types of carpentry they specialize in.
Another important element on the main page is the interactive map. This map provides a visual summary of carpenter statistics across the different regions of Dominica. Users can see the concentration of carpenters in specific areas and gain insights into the distribution of carpentry businesses throughout the Commonwealth.
One of the key features of the main page is the inclusion of interactive charts. These charts present statistical data about carpenters in the Commonwealth of Dominica in a dynamic and engaging manner. Users can explore different metrics such as the number of carpenters in different regions and the types of carpentry they specialize in.
Another important element on the main page is the interactive map. This map provides a visual summary of carpenter statistics across the different regions of Dominica. Users can see the concentration of carpenters in specific areas and gain insights into the distribution of carpentry businesses throughout the Commonwealth.
Desktop versionTablet versionMobile versionAdmin view
View image
Registry Page
The registry page of our website is designed to present carpenter information, contacts, businesses, and services in a clear and organized manner. For carpenters or public users, the page is formatted as a table with an appealing design. This table summarizes the relevant details about each carpenter, allowing users to easily browse and find the information they need. The appealing design ensures that the table is visually engaging and user-friendly, enhancing the overall experience.
On the other hand, for admin users, the registry page offers additional functionalities. Admin users have the ability to categorize registered users based on their status, which can be approved, pending, or deleted. This categorization enables the admin to manage the user database efficiently, keeping track of the different stages of user registration and ensuring that all necessary actions are taken. Admin users can easily change a user's status within the registry page, streamlining the process of managing user accounts.
Moreover, as an added feature, the admin user receives notification emails whenever a new user registers. This notification system is implemented using AWS Simple Email Service (SES) and AWS Lambda. Whenever a new user completes the registration process, an automated email is sent to the admin, alerting them about the new registration. This email notification ensures that the admin is promptly informed of any new user activity, enabling them to take the necessary actions and maintain effective communication with users.
On the other hand, for admin users, the registry page offers additional functionalities. Admin users have the ability to categorize registered users based on their status, which can be approved, pending, or deleted. This categorization enables the admin to manage the user database efficiently, keeping track of the different stages of user registration and ensuring that all necessary actions are taken. Admin users can easily change a user's status within the registry page, streamlining the process of managing user accounts.
Moreover, as an added feature, the admin user receives notification emails whenever a new user registers. This notification system is implemented using AWS Simple Email Service (SES) and AWS Lambda. Whenever a new user completes the registration process, an automated email is sent to the admin, alerting them about the new registration. This email notification ensures that the admin is promptly informed of any new user activity, enabling them to take the necessary actions and maintain effective communication with users.
Desktop versionTablet versionMobile versionEdit profileAdd new projectAdmin view
View image
Profile Page
The profile page is a dedicated section on our website where users can access detailed information about carpenters, including their personal details and a showcase of their projects. Users have the ability to view project images and descriptions, providing a comprehensive overview of the carpenter's expertise and craftsmanship. Additionally, the profile page offers extensive functionality, allowing users to perform full CRUD operations on their profiles and projects.
Powered by AWS AppSync and AWS GraphQL, the profile page leverages the benefits of a serverless architecture to ensure efficient data management. AppSync acts as the data synchronization layer, seamlessly connecting the frontend with the backend. GraphQL, a query language for APIs, enables users to retrieve specific data from the server, optimizing performance and reducing unnecessary data transfers. This powerful combination empowers users to access and update their profile information with ease.
Furthermore, the profile page incorporates the robust storage capabilities of AWS S3 for file and image management. With S3, users can securely upload, store, and retrieve project images, allowing for a visually appealing presentation of their carpentry work. S3 also provides the necessary scalability and reliability for handling large volumes of image and file data. By integrating S3 into the profile page, users can effectively manage their project portfolio and showcase their expertise.
Powered by AWS AppSync and AWS GraphQL, the profile page leverages the benefits of a serverless architecture to ensure efficient data management. AppSync acts as the data synchronization layer, seamlessly connecting the frontend with the backend. GraphQL, a query language for APIs, enables users to retrieve specific data from the server, optimizing performance and reducing unnecessary data transfers. This powerful combination empowers users to access and update their profile information with ease.
Furthermore, the profile page incorporates the robust storage capabilities of AWS S3 for file and image management. With S3, users can securely upload, store, and retrieve project images, allowing for a visually appealing presentation of their carpentry work. S3 also provides the necessary scalability and reliability for handling large volumes of image and file data. By integrating S3 into the profile page, users can effectively manage their project portfolio and showcase their expertise.
RegisterLoginAccount VerificationCreate new password
View image
Authentication
Website authentication is essential for websites that require user registration and profiles, including the registry page.
The website uses AWS Amplify, a secure development platform with authentication services, to ensure secure and reliable access.
We also integrated AWS Cognito with SMS confirmation and password reset provide an added layer of security.
Furthermore, by using AWS Lambda with database trigger, admin users also receive notification emails when new profiles are created.
The website uses AWS Amplify, a secure development platform with authentication services, to ensure secure and reliable access.
We also integrated AWS Cognito with SMS confirmation and password reset provide an added layer of security.
Furthermore, by using AWS Lambda with database trigger, admin users also receive notification emails when new profiles are created.