AyeCaso: AI Artwork Sharing and Aggregation | #AWSAmplifyHackathon

This project is my submission for #AWSAmplifyHackathon #AWSAmplify.

💫 Useful Links:

• Github Repo Link: AI-Images-APP-AWS-Amplify-Hackathon

📋Description of Project

• Introducing AyeCaso - Its a social media playground but for AI-generated artwork. It's a fun, creative, and easy-to-use platform where you can share your cool AI art, connect with other AI artists, and discover new, trending pieces from around the world.

• We've also thrown in some smart tech magic, like an AWS OpenSearch-powered search function, so you can find exactly what you're looking for. Whether you're an artist, an admirer, or just curious about AI art, AyeCaso is here to make your experience exciting and engaging.

🔑 Key Features:

1. User Authentication and Authorization with Google Signin

   • Quick and secure user registration and authentication using Google Signin using AWS Cognito and AWS Amplify React UI Components with Modifications.

   • 

2. Customizable User Profiles

   • Create your own space with profile images, bios, and display your AI artwork.

   • 

3. Artwork Upload

   • Easily upload your AI art with quality checks, Tags, Title, Prompt and size limitations.

     

     

4. Artwork Showcase

   • Display your creativity on your profile and in the general home browsing area.

5. Full-text Search using AWS Opensearch

   • Find artworks by title, description, artist name, and more, thanks to our integration with AWS OpenSearch.

     

6. Trending Page

   • Stay updated with trending or popular AI art based on views, likes, and activity.

   • 

7. Artwork Interaction

   • Like, save, and share artworks, and contribute to the trending system.

     

8. Bookmarking

   • Save your favorite artworks for later and access them easily.

     

9. User Settings

   • Customize your account settings, including notification preferences and privacy.

     

10. Mobile-friendly Design

    • Enjoy an exceptional user experience on both desktop and mobile with our responsive and visually appealing design.

      

💻 Tech Stack:

Frontend:

• Next.js 13 (TS)

• Amplify UI Components

• Zod

• Lucide Icons

• Tailwind CSS

• Shadcn UI

Backend:

• AWS Appsync GraphQL - API

• AWS Amplify CLI

• AWS Cognito with Google SSO - Authentication

• AWS S3 - Storage

• AWS Cloudfront - CDN

• AWS DynamoDB - Database

Architecture:

Hosting:-

Frontend:

• Next.js: The best react framework for our use case due to multiple features related to Image Optimizations to SSR, SSG and ISR Rendering.

• AWS Amplify React UI: We have used AWS Amplify React Components like Authenticator and all and they have been working really great, with a slight modification of styles.

• Tailwind CSS: For styling, Tailwind CSS is our hero here. It's a utility-first CSS framework that's both flexible and efficient.

• Shadcn UI & RadixUI: Along with Tailwind CSS, we've used these UI libraries to create a modern and sleek user interface for our art-sharing platform, making front-end development a joy.

• Zod: Zod is used for managing complex dynamic forms in our application for keeping things organized and streamlined.

• Lucide Icons: To add some flair and personality to our application, we've chosen Lucide Icons.

Backend:

• Amplify CLI: Our backend development process has been smooth thanks to Amplify CLI. It has made managing our services more manageable and efficient to manage Auth, Storage, Deployment, GraphQL API.

• AWS Cognito with Google SSO: For secure and seamless user authentication, we've relied on Cognito along with Google SSO option. It's been integral to creating a trustworthy user experience.

• AWS Appsync: Worked with GraphQL endpoints using Appsync for our data retrieval and management and will have to say its quite easy and efficient to work with. It's a powerful tool that has made our application more flexible and robust for Data management.

• AWS OpenSearch: We are using AWS OpenSearch, so our users can efficiently find AI artworks with precise full-text searches, vastly improving our platform's user experience and engagement.

• AWS DynamoDB: When it comes to data storage, DynamoDB has been our choice. It's efficient, and scalable, and ensures optimal performance for our art-sharing application. We are using it with Graphl AWS Appsync

• AWS S3: With AWS S3, we securely store and retrieve all of our AI artwork images. It's reliable, and scalable, and ensures our data is always available when needed.

• AWS CloudFront: With AWS CloudFront, we've improved the delivery of our content to users globally. It helps us ensure fast, secure, and efficient distribution of our AI art, offering an optimal user experience regardless of where our users are located.

• Upstash Redis: We have used Serverless Redis to keep track of unique Views of AI Posts.

Deployment/Hosting

• GitHub: With version control on GitHub, we can easily manage and push code changes for Auto CI/CD deployments.

• AWS Amplify: Hosting both the front and backend on AWS Amplify has made deployment simple and reliable, with seamless scaling capabilities.

✨ Inspiration

When I first came across generative AI art created using Midjourney, DALLE-like AI Models, I was totally blown away. The blend of tech and creativity was just so cool! But as I dove deeper, I realized there wasn't a proper spot for folks to share these amazing pieces of art. This amazing artwork generated by AI is scattered across the internet in an unstructured way. That's when the idea for AyeCaso hit me.

What Problem does it address?

AyeCaso is all about giving AI-Generated Art and creators a space to show off their creations, meet other artists, and get the applause their work deserves. Plus, it's a place for anyone who's into AI art to check out the latest trends and get inspired. In short, we're making sure the awesome world of AI art gets its time in the spotlight!

Future Improvements

1. Notifications (Upcoming): Stay in the loop with notifications for likes, comments, and new artwork from favorite artists.

2. Social Media Integration (Upcoming): Share your favorite artworks on social media platforms and log in through your social accounts.

3. Artwork Licensing Information (Upcoming): Artists can share their artwork usage rights.

4. Community Features (Upcoming): Engage with the community through forums, chat, and other social features.

5. Collections (Upcoming): Create ArtWork Collections of your Favorite Genre and Topic

And many more...

Small Demo Video:

Conclusion

TBH, I never knew AWS Amplify had such a huge line of Features. It has made Fullstack Application Development so easy to set up Auth, APIs and Storage and start working on like never before.

I was actually trying to find a good alternative to Vercel for Next.js deployment and finally, after deploying Frontend on Amplify, I can say it's a perfect rival of Vercel for Next.js Deployment.

Not buttering, but genuinely AWS Amplify is truly revolutionizing the way we approached frontend deployment and backend development. Overall it was a great interesting ride and will continue on this now as there is so much to work with using AWS Amplify.

Thanks for the amazing Hackathon AWS Amplify and Hashnode, I found a gem - "AWS Amplify" because of it.

Connect with me:

1. LinkedIn

2. Github

3. X (Twitter)

4. My Dev Portfolio