A simple project to practice React and Express basics 👻 using Redux. Live here. Shows you the public Flickr feed, allowing you to view the images either in a lightbox or on Flickr's site.
- Full Stack App 🔥 server exposes client (SPA) and a REST API.
- Responsive Flickr's latest photos with caption and owner
- Link to original photo post
- Responsive lightbox with all photo information (you can also change the photo with ⬅️ and ➡️ keys)
- Asynchronous image load treatment
- Pagination using infinite scroll
- Test automation
To develop and build this project you need to have installed Node.js, and follow this steps.
Clone (or download and unzip) the project to your file system an go into the directory of the project.
cd react-flickr-example/Install dependencies.
npm install # server
cd client/ && npm install # clientConfigure you enviroment using dotenv. Create .env file based on .env.example and fill it with your own data.
NODE_ENV=development
PORT=5000
FLICKR_API_KEY=xAPI documentation is automatically generated using apiDoc and parameters are validated using Joi.
npm run server:docs # you can also do it this wayRun a local development server (livereload enabled).
npm run server
npm run client
npm run dev # bothRun defined tests using Mocha, Chai for the server and Jest for the client. Code is linted with ESLint. Type checking is available for the client using Flow.
npm server:test
npm client:test
npm test # bothPackage the app (minify html, css and js). The output will be in the client/build/ folder.
cd client/ && npm run buildThe client code was generated using Create React App and configured to fulfil requirements and it follows the datchley code style guide. The folders hierarchy is divided by file types (e.g. components, containers, reducers, etc.) because this is just an example but for larger projects I recommend a hierarchy based on functionalties.
Pull requests, feature ideas and bug reports are very welcome. We highly appreciate any feedback.
MIT