ImageBox
A dynamic image search website using the Unsplash API, featuring advanced search capabilities, pagination, user collections and light/dark mode, showcasing my frontend development skills.
- nextjs
- typescript
- tailwind css
- drizzle
- shadcn
- react testing library
- vitest
- zod
Project Goal
ImageBox was developed as a portfolio project to demonstrate my frontend development skills and my ability to create dynamic, interactive web applications.
The primary goal was to build a comprehensive image search and management platform that showcases various advanced features, such as real-time photo searches using the Unsplash API, user authentication and collection management.
By incorporating functionalities like light/dark mode and responsive design, I aimed to create an engaging and accessible user experience.
This project illustrates my proficiency in modern web technologies, including HTML, CSS, JavaScript, TypeScript, React, Next.js and underscores my commitment to building high-quality, user-centric web applications.
Project Features
Search Functionality. Search for images using the Unsplash API with real-time results.
Pagination. Efficient navigation through search results with pagination.
Detailed Photo Pages. View detailed information about each photo, including the author, date added, and related tags.
Tag-Based Search. Clickable tags on photo pages that lead to search results for related images.
Add to Collection. Add/remove photos to/from existing collections or create new ones through a user-friendly popup, which includes search functionality for existing collections and displays the latest collections.
User Collections Page. View user collections in a dedicated collections page.
Collection Management. Edit collection names and delete collections.
Authentication. Secure sign-in and sign-up functionality using Kinde.
Light/Dark Mode. Toggle between light and dark modes for a customized user experience.
Responsive Design. Ensures optimal performance and usability across various devices and screen sizes.
Database Integration. Uses Supabase for data storage and Drizzle ORM for database communication.
