Pexels Integration Demo

This is a demo of integration with a third party image search provider Pexels

Project Structure:

• pexels-api

  This is the folder for the backend integration with Pexels a free image stock, using a queue to process images without breaking the rate limits of the api. Features:

  • Microservices with Redis Pub/Sub
  • Redis Bull Queues
  • Redis Caching
  • Scheduling with Cron Jobs
  • pexels-api/src/app.module.ts > pexels-api/src/pexels.controller.ts - api + queue producer + sub
  • pexels-api/src/micro.module.ts > pexels-api/src/pexels.service.ts - queue consumer + scheduling + pub

• pexels-grid

  is the frontend created in react and nextjs with the following features:

  • Paginated virtual grid
  • Server-Side Rendering
  • Search
  • SPA Routing
  • Nested Routing

Docker Compose

The easiest way to run is using docker-compose file provided and prebuilt images from dockerhub it will automatically setup redis and routing between services you will have the client running on http://localhost:5257

git clone [email protected]:danilaplee/next-nest.git
cd next-nest
mkdir redis
chmod 777 redis
PEXELS_API_KEY='paste-your-apikey' \
REDIS_VOLUME_PATH=$(pwd)/redis \
PUBLIC_API_URL='http://localhost:5256/' \
REDIS_PASSWORD='yourpassword123' \ 
docker compose up -d
open http://localhost:5257

Requirements For Development

• Backend

  This will setup a local server with live updates for you

  • Redis running on localhost:6379
  • PEXELS_API_KEY environment variable set to the key that you can get from the pexels website after registering
  • Run with

  yarn 
  QUEUE_CONSUMER='true' API_PRODUCER='true' yarn start 
  

• Frontend

  This will setup a local client with live updates for you

  • PORT by default 3000 or 3001 if backend running
  • API_URL by default is set to http://localhost:3000/
  • Run with

  yarn 
  yarn dev 
  

More Screenshots: