This is a simple React App that consumes the Pexels public API and displays a list of images. You can click on load more images once you reach the bottom and you can click on a certain image to see the details.
The project structure is very simple. We are using react router and we have 2 main routes, the image list and the image details.
As we also have a react native app we are using git submodules tu share some code between the two projects.
As a bonus I have added Lottie animations as a dependency to show some loading effects.
I kept the project simple for this demo as the end goal is to demonstrate my react skills. If you want to see more functionalities please check my side project called Rizo App in the following link that I build all by myself: https://apps.apple.com/app/id1494981202
You can check a life demo of the app here: https://photobooth-fwkz57aqga-uc.a.run.app/
It has been deployed on Google cloud run reusing an apache server docker image I already had (probably there are better docker images to use to deploy a single page app but for this demo I used one I already had available).
Start by setting the right nodeJs version to run the project
Install the dependencies
Pull the common repository submodule using the following commands in this order:
Run the project on your local machine
This repository depends on this other one as a submodule. https://github.com/nasy/photobooth-common
To create the submodule I've used: git submodule add git@github.com:nasy/photobooth-common.git common
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build folder.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.