Action Tokens Collections - Image and Audio Sharing Website
Live at collections.action-tokens.com
Overview
Action Tokens Collections is a website that allows users to share their images and audio, and showcase their media using items from Litemint and Fimi. It is built with Next.js and uses Firebase as its database service.
Problem
The website has a problem identifying users by their public address, which is only available through wallet clients. Additionally, the website needs to support all wallet clients, and the budget is limited, requiring a cost-efficient backend solution.
Solution
To address these issues, we chose Next.JS as our framework, TailwindCSS for frontend, and Firebase Firestore for backend database. Amazon Amplify was used as the backend for our client's Amazon Amplify account.
Design
The design of Action Tokens Collections was based on the client's requirements and ideas, and our initial design was created using Canva. We went through several iterations before finalizing the website's design.
Initial Canva design
Final design
The website features a modern and minimalist aesthetic with a focus on providing a user-friendly and intuitive experience. The layout is simple and clean, with clear navigation and organization of content. The color scheme is based on a dark theme, with contrasting bright colors used for accentuation. The website is designed to be responsive and accessible across a variety of devices, including desktops, tablets, and mobile devices. User interface components such as buttons, forms, and modals are styled using TailwindCSS, with custom styles added where necessary. Overall, the design showcases user media while providing a seamless and enjoyable browsing experience.
Features
- Allows users to share images and audio
- Showcases user media using items from Litemint and Fimi
- Built with Next.js framework and Firebase database service
- Supports wallet clients including Albedo, Wallet Connect, Freighter, XBull, and Rabet
- Categories for trending arts, trending collections, and latest creations
- Allows users to explore arts or collections
- Item types supported include NFT or Special
- Users can fetch data from URL using LiteMint or Fimi
- Privacy lock available using asset code, asset issuer, and required amount on arts or collections
- Users can share media from YouTube or Dropbox links
- Each user has a unique access key for verification of their content
Technology
- Next.js with TypeScript, a React-based web framework for server-side rendering.
- Firebase Firestore as the NoSQL database, providing data from cloud.
- TailwindCSS, a utility-first CSS framework for fast and easy customization
- Amazon Amplify as the backend
- Wallet client - Albedo, Wallet Connect, Freighter, XBull, and Rabet providing wallet client integration
Team
- Jose Urquiza, @hollowvox: Funned, Manager
- Biplob Kumar Sutradhar, @biplobsd11: Lead Developer
- Arnob dey, @arnob_016: Design, client requirement sync
Results
Users can now share their arts or LiteMint and Fimi data on the Action Token Collections website without creating an account. They can also control their items using asset code, asset issuer, and amount and share their items on social media.
Future Plans
- Integration with more wallet clients to improve user accessibility
- Adding support for additional media types, such as video and text
- Implementing a feature to allow users to create and sell their own NFTs
- Developing a mobile app for better user experience on-the-go
- Partnering with other blockchain-based platforms to expand the reach of Action Tokens Collections
- Providing tools for artists to track and analyze the performance of their media on the platform
- 3D contents
Conclusion
The implementation of Next.js, TailwindCSS, Firebase Firestore, and Amazon Amplify has enabled Action Tokens Collections to address the challenge of identifying users through their public address and support multiple wallet clients. The platform's privacy lock feature and ability to fetch data from URLs have added to its appeal.