UI Demo App (React/Next.js)

This demo app is a react frontend built on top of Next.js. The app interfaces with the popular photo search API from Unsplash. Users can view the most recent trending photos or trigger a custom search for other interesting photos.

Recommended production URL

Vist the deployed application (hosted on Vercel) at https://unsplash-app-rho.vercel.app/](https://unsplash-app-mu.vercel.app/).

Features

1. API Search:

   • Users can search for photos using keywords. The app utilizes the Unsplash API to fetch relevant images based on user input.

2. Pagination:

   • The app implements pagination to load 9 photos at a time. Users can navigate through pages to view more photos, enhancing the browsing experience.

3. Photo Sorting:

   • Users can sort photos by 'Newest' or 'Relevance'. This feature allows users to easily find trending content or discover popular images.

4. Photo Viewer (Modal):

   • Clicking on a photo opens a modal viewer, providing a larger view of the image along with additional details such as upload date and photographer information.

5. Favorites Management:

   • Users can add photos to their favorites. The app maintains a list of favorite photos, allowing users to easily access their preferred images. Users can view their current favorites after adding a favorite in the Photo Viewer.

6. Responsive Design:

   • The app is designed to be fully responsive, providing an optimal viewing experience across a range of devices, from mobile phones to large desktop screens.

7. Accessibility and SEO:

   • Basic accessibility features are implemented to ensure that the app is usable for all users. Additionally, SEO best practices are followed to improve visibility in search engines.

Tech Stack

1. Next.js:

   • A React framework that enables server-side rendering (SSR) and static site generation (SSG), improving performance and SEO.

2. React-Query:

   • Used for data fetching and caching. It simplifies the process of managing server state and provides features like automatic refetching and caching of API responses.

3. TypeScript:

   • Provides static typing for JavaScript, enhancing code quality and maintainability. It helps catch errors during development and improves the overall developer experience.

4. Tailwind CSS:

   • A utility-first CSS framework that allows for rapid UI development. It enables the creation of responsive designs with minimal custom CSS.

5. Zustand:

   • A small, fast state management library for React. It is used to manage the application's global state, such as user favorites, in a simple and efficient manner.

Notes

1. Best Experience on Web (Chrome) Desktop, Light Mode:

   • The app is optimized for use in Chrome on desktop devices, particularly in light mode.

2. Responsive Layout:

   • The layout adapts seamlessly from mobile to large screens, ensuring a consistent user experience.

3. API Data Caching:

   • React-Query is used to cache API data, reducing the number of requests made to the Unsplash API and improving load times.

4. Prefetching and Static Generation:

   • The app prefetches images and generates a static landing page (pages/index.tsx) for faster initial load times.

5. Performance Checks:

   • Basic accessibility, SEO, and performance checks pass Chrome's Lighthouse audit, ensuring a high-quality user experience.

Getting Started

First, install the required dependencies:

yarn install

Next, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

To run the performant production build locally:

yarn build
yarn start

Custom Test Suite

Cypress.io is leveraged as the testing framework of choice. To run cypress locally:

yarn e2e

Easy CI/CD Pipeline with Vercel

The production build is current hosted on Vercel. Process:

• push new commit(s) to main branch
• Github triggers a webhook that lets Vercel know a new build is needed
• A new build, incorporating the latest commit(s), is deployed
• Default deployed stage is tied to code pushed onto the main branch but additional stages can easily be added which correspond to code pushed to another branch, say, staging.