Tiles Gallery
E-commerce Style Tile Showcase Platform
Overview
Tiles Gallery is a web application designed as an elegant product showcase platform for exploring and discovering tile collections. The application allows users to browse all available tile products, use search functionality, highlight featured tiles on the home showcase, and view detailed tile information on dedicated product pages. User authentication is handled securely using Better Auth, supporting both Email/Password login and Google OAuth to grant protected route access and user profile management. Built using Next.js and MongoDB, Tiles Gallery combines a modern frontend styled with HeroUI and Tailwind CSS with reliable database persistence, ensuring a responsive user interface across desktop and mobile browsers.
Technologies Used
Key Features
Browse all available tile collections
Search functionality for quick tile discovery
Featured tiles section on the homepage
Detailed tile information pages
Better Auth authentication with Google OAuth
User profile management and protected routes
Responsive design for mobile, tablet, and desktop
Challenges & Solutions
- Designing a flexible MongoDB schema for storing and displaying tile information efficiently.
- Implementing client-side route guards and session validation using Better Auth in Next.js App Router.
Key Takeaways & Learnings
- Integrating Better Auth and Google OAuth for streamlined authentication and protected route management.
- Building responsive product showcase interfaces using Next.js, HeroUI, and Tailwind CSS.