This project is a Single Page Application (SPA) built with React, Vite, and TypeScript. It features a virtualized, responsive masonry grid that dynamically arranges photos fetched from the Unsplash API. Additionally, the application includes a detailed view for photos, displaying extended information and allowing for seamless navigation between the grid and detailed view.
- Responsive Design: The grid layout adjusts dynamically based on the screen size, ensuring an optimal viewing experience on all devices.
- Virtualization: To efficiently handle large sets of images, the grid is virtualized, rendering only the photos visible in the viewport. This approach significantly improves performance by reducing the number of DOM nodes.
- Infinite Scroll: Implemented infinite scroll to dynamically load and display more photos as the user scrolls down the grid. This feature enhances user experience by providing a seamless and continuous browsing experience without requiring pagination. The infinite scroll implementation ensures that new photos are fetched efficiently, minimizing the number of API requests and maintaining smooth scrolling performance.
- No External Libraries for Layout Management: The masonry grid is implemented using pure React and CSS-in-JS, specifically with
react-jss
for styling, without relying on any external libraries for layout.
- Detailed Photo Information: When a photo is selected, a detailed view is displayed showing the photo in a larger size along with the title, description, photographer's name, and date taken.
- Navigation: A back button is provided to easily return to the masonry grid view.
- Strong Typing: The application is written entirely in TypeScript, utilizing interfaces, types, utility types, and generic types to ensure type safety and code clarity.
- React Hooks: The application makes effective use of React hooks such as
useState
,useEffect
, anduseMemo
to manage state and side effects. - React Router: Navigation between the masonry grid and detailed view pages is handled using React Router.
- Performance Optimization:
useMemo
anduseCallback
are used where necessary to prevent unnecessary re-renders or recalculations, enhancing the application's performance.
- TanStack Query (react-query): Used for managing API requests and caching, ensuring efficient data fetching, synchronization, and updating in the application.
- Web Vitals: The application is optimized for performance, focusing on web vitals metrics, bundle size, unused chunk sizes, and JavaScript execution time.
- Image Optimization: Images are optimized to reduce loading times and improve user experience.
- Error Boundaries: Error boundaries are implemented to provide better error handling and a more robust application.
- CSS-in-JS:
react-jss
is used for styling, ensuring a modular and maintainable CSS structure. - Responsiveness: The application is fully responsive, providing an optimal viewing experience across different devices.
- Search Functionality (Bonus): A search feature allows users to search for photos by keywords, dynamically updating the masonry grid with relevant results from the Unsplash API.
-
Clone the repository:
git clone https://github.com/KaroMourad/content-platform.git
-
Navigate to the project directory:
cd content-platform
-
Install dependencies:
pnpm install
The Unsplash API configuration is demonstrated in the .env.example
file:
VITE_API_BASE_URL=https://api.unsplash.com
VITE_API_CLIENT_ID=access_key
VITE_PORT=3000
To run the application, you need to obtain an Unsplash API access key and configure it:
- Log in to Unsplash.
- Create a new application at Unsplash Application Dashboard.
- Obtain the Access Key of your application.
Create a .env
file in the cloned repository and set the VITE_API_CLIENT_ID
to your Unsplash API access key.
VITE_API_BASE_URL=https://api.unsplash.com
VITE_API_CLIENT_ID=your_unsplash_access_key
VITE_PORT=3000
Please note that the Unsplash API has certain restrictions and limits:
- Rate Limits: Unsplash imposes rate limits on API requests to ensure fair use and system stability. For the free tier, the limit is typically 50 requests per hour. Exceeding this limit may result in temporary suspension of API access.
- Photo Limits: There are restrictions on the number of photos that can be fetched in a single request and the number of requests that can be made per day.
- Attribution: Unsplash requires that you provide proper attribution for the photos used from their API. Make sure to follow their API guidelines to comply with their terms of use.
Be aware of these limits to avoid disruptions in accessing the photo data and ensure compliance with Unsplash’s terms of service.
To start the development server, run:
pnpm dev
This will start the application on http://localhost:3000
.
To build the application for production, run:
pnpm build
The optimized output will be located in the dist
directory.
- Virtualization: Implemented using custom logic to avoid the overhead of external libraries, focusing on performance and responsiveness.
- Infinite Scroll: Implemented to enhance user experience with seamless and continuous loading of new photos.
- TypeScript: Ensured strong typing throughout the application for better maintainability and fewer runtime errors.
- Performance Optimization: Used
useMemo
anduseCallback
to optimize rendering and prevent unnecessary recalculations. Images are lazy-loaded to improve load times. - Error Handling: Implemented error boundaries to catch and handle errors gracefully, improving user experience.
- Query Management: Utilized TanStack Query (react-query) for efficient data fetching, caching, and synchronization.
- Efficient Rendering: Virtualization ensures that only visible items are rendered, reducing the DOM size and improving performance.
- Infinite Scroll: Efficiently loads and displays more photos as the user scrolls, minimizing API requests and maintaining smooth performance.
- Optimized Asset Loading: Images are optimized and lazy-loaded to enhance loading speed and reduce bandwidth usage.
- Minimized JavaScript Execution: Utilized hooks and memoization to minimize unnecessary JavaScript execution and reduce the load on the main thread.
To run tests, use the following command:
pnpm test
Unit tests are provided to ensure the core functionality of the application is working as expected.
This project demonstrates a strong understanding of React, TypeScript, and performance optimization techniques. The application is built to be responsive, efficient, and user-friendly, providing a seamless experience for browsing and viewing photos with the added feature of infinite scrolling.
For any questions or issues, please feel free to reach out or open an issue on the GitHub repository.