Dogs Image App

This Next.js application provides a simple UI to play around with dogs images. You can see either random dog image or dogs by breed

/dogs

/dogs/breed/[breedname]

Live Demo

Authors

• Rohit kumar

Environment Settings

To run this project, node version required v18.18.0

Local Installation

To run the project, you need to clone it first

Install dependencies

   npm install

Build the app

   npm run build

Start the app

  npm run start
  The app should run on http://localhost:3000

Running Tests

To run tests, run the following command

  npm run test

Functionalities

• See random dogs
• See dogs by breed
• Tooltip
• Debounced button click

Features

• Built on Next.js

• Responsive for mobile and desktop

• Accessibility: Built with WCAG support for inclusive user experience.

• Semantic HTML

• Type Safety: Ensured by TypeScript for enhanced code maintainability.

• React Framework: Utilizes React for efficient component-based development.

• Reusable Components: Promotes modularity and code reusability.

• Localization Ready: Supports potential internationalization efforts.

• Server-Side Rendering (SSR)

• Code Splitting: Optimizes bundle size and loading time.

• Linting and Prettier: Enforces consistent code style and formatting.

• Functional Components and Hooks: Leverages modern React features for component composition.

• API Integration: Seamlessly fetches data from the dogs API.

• Code Modularization: Organizes code into logical modules for better readability.

• Error Handling: Implements robust error handling mechanisms.

• Unit test for components and APIs setup on jest and react testing library

Tools and library

• Next
• React
• i18 translations
• jest
• react testing library
• eslint & Prettier with husky

Screenshots

Random dog image

Dog by breed image

🚀 About Me

Learning, Unlearning and Re-learning everyday.