Skip to content

The Gallery Pic is an Image Browser Webapp made with react/redux and the Unsplash API as images source.

Notifications You must be signed in to change notification settings

oscardelalanza/capstone-unsplash

Repository files navigation

The Gallery Pic

This the Capstone Project that corresponds to the React & Redux Microverse course. So, as the name of the project suggest, The Gallery Pic is a photo browser built with different JS technologies like React, Redux, Bootstrap and the Unsplash API. Check the complete assigment here: Catalogue of Statistics

screenshot

Catalogue of Statistics

Built With

  • JavaScript, HTML, CSS
  • React, Redux, Unsplash-JS, Font Awesome
  • React-Bootstrap, React-Redux, Redux-Thunk, Redux-Logger, React-router-dom, prop-types, node-sass

Live Demo

Here you can find a Live Demo of the project with its latest features The Gallery Pic.

Getting Started

This project was bootstrapped with Create React App.

Prerequisites

If you want to get a local copy of this project first make you have installed Git and node-js in your local environment.

Setup

Clone the project by running any of the following commands:

  • SSH: git clone [email protected]:oscardelalanza/capstone-unsplash.git
  • HTTPS: git clone https://github.com/oscardelalanza/capstone-unsplash.git
  • GitHub CLI: gh repo clone oscardelalanza/capstone-unsplash
  • ZIP: Download

Then go to Unsplash Developers and sign up as a developer.

  • Create a new app and save your Acces Key and Secret Key.
  • Inside .env.example you will find REACT_APP_ACCESS_KEY=Unsplash_access_key and REACT_APP_SECRET_KEY=Unsplash_secret_key and replace Unsplash_acces_key and Unsplas_secret_key with the corresponding keys that you get from Unsplash developers.
  • Then save .env.example file as .env

Install

Inside the project directory run npm install no install all the required node_modules.

Then execute npm start to run the app in the development mode. Open http://localhost:3000 to view it in the browser.

Usage

  • Get the latest photographs from different artists since the beginning. home

  • Find what is relevant to you with in a simple way. search

  • Get all the info of your favorite photos with just a single click. description

Run tests

Execute npm test to launch the test runner in the interactive watch mode. See the section about running tests for more information.

Deployment

Execute npm run build to build the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. See the section about deployment for more information.

Authors

👤 Oscar De La Lanza

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Unasplash Developers.
  • Guadalupe Rangel for helping me to set up the testing suite of this project.

📝 License

This project is MIT licensed.