CardShare is a modern and user-friendly platform for sharing and discovering creative cards. Whether you're an artist, designer, or just someone who loves sharing ideas, CardShare makes it easy to create, edit, and explore cards while connecting with others.
- Sign Up & Sign In: Create an account or log in to access all features.
- Email Confirmation: Secure your account with email verification.
- Create Cards: Add titles, descriptions, media, tags, and more. Customize visibility, allow comments, and even use the Generate button powered by Gemini 2.5 Flash to pre-fill your card with creative ideas.
- Edit & Delete Cards: Update or remove your cards anytime.
- Dynamic Listing: Browse cards with infinite scrolling, powered by the Intersection Observer API.
- Filters: Easily switch between "All Cards," "My Cards," and "Liked Cards."
- Sort Options: Filter by "Recent" or "Most Liked."
- View Modes: Toggle between grid view and row-by-row view.
- Related Cards: Discover similar cards to the one you're viewing.
- Comments: Add comments, like comments, and engage with the community.
- Share: Use the Navigator.share API to share cards seamlessly.
- Search: Find cards and users with a powerful search feature.
- Follow/Unfollow: Connect with other users by following or unfollowing them.
- Profile Picture: Upload, crop, and zoom your profile picture before saving.
- Real-Time Notifications: Stay updated with WebSocket-powered notifications.
- Notification Sounds: Enjoy audio alerts using the Audio API for new notifications.
- Fully optimized for all devices, ensuring a seamless experience on mobile, tablet, and desktop.
CardShare is built with cutting-edge technologies to deliver a fast, secure, and scalable experience.
- Next.js: For server-side rendering and optimized performance.
- React: For building dynamic and interactive user interfaces.
- TypeScript: For type safety and better developer experience.
- Tailwind CSS: For modern and responsive styling.
- React TanStack Query: For efficient data fetching, caching, and state management.
- WebSockets: For real-time notifications.
- Intersection Observer API: For infinite scrolling.
- Audio API: For notification sounds.
- Node.js
- npm or yarn
- Clone the repository:
git clone https://github.com/guilhermescr/cardshare-ui.git
- Navigate to the project directory:
cd cardshare-ui - Install dependencies:
npm install
- Start the development server:
npm run dev
- Live Demo: https://cardshare-app.vercel.app/
- Repository: https://github.com/guilhermescr/cardshare-ui
If you encounter any critical bugs or security vulnerabilities, please contact me directly at devguiga@gmail.com. Your feedback is highly appreciated and helps improve the platform!
- Guilherme Rocha
Follow me on GitHub and join the community!
Thank you for visiting, and happy card sharing!