Gallery

An infinite-scroll web app that lets users browse and favorite photos using the Pexels API.

💻 Demo

https://photo-gallery-ts.netlify.app/

🎨 Main features

• Infinite scroll
• A possibility to favourite an item
• Lazy loading, responsive images

🔧 Technologies used

• JavaScript library: React
• TypeScript support: TypeScript
• Build tool: Vite
• Styling: CSS Modules with SASS
• Code linting: ESLint with Airbnb Style Guide
• Code formatter: Prettier
• Style linting: Stylelint
• Pre-commit hook for formatting and linting: Husky and lint-staged
• Testing: Jest with React Testing Library, Jest-DOM, User Event
• Package manager: pnpm

🚀 Getting started

🔨 Configure files

Rename .env.example to .env and put your Pexels API key in it

mv .env.example .env

🎈 Start the project

# If you want to create a Git repository and use Git hooks
git init

# Install dependencies
pnpm i

# Run in the development mode
pnpm dev

# To make the development server accessible on a different device, run
pnpm start

🆚 VS Code integration

To enable all app development features, you will need the following VS Code extensions

• ESLint
• Prettier - Code formatter
• Stylelint

User or workspace settings in settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

🔼 Back To Top