Foto-Pics

I have always wanted to create a project that displays wonderful stock images and videos. But I wanted to make it in a full website and is also presentable and useful. So I decided to build this project to the next level. It is inspired by Pexels.com whose Web APIs are used to run this application.

View this on your browser live.

View UX/UI design in Behance.

Things I learned in this project;

• How to design visual layouts of a website.
• How to make UI/UX design for a website.
• How to code responsive web designs.
• How to query external APIs and store data locally.
• Handle state management globally and locally.
• Handle browser events and trigger responses.
• How to basic web animations using GSAP.
• How to handle page routing and redirects.
• How to download media files from the browser.
• How to deploy a website to production.

References:

• Pexels API
• GSAP Animation
• Downloading Files
• State Management
• NextJS Router

Installation

Download the repo with:

$ git clone https://github.com/Aimanski12/foto-pics proj-name

After downloading the repo you can cd into the proj-name and then open up your console and type

$ npm install

and then after installing all the modules, go to Pexels API to sign up for api key. Then to /src/utils/apis.js and enter the apikey. Then go to your console and type

$ npm run dev

the application will start running. All the assets are already included so you can run the application and it will work.

Contributing

If you find bugs with this project, pull requests are always welcome. You can create an issue here. Your ✨ are also greatly appreciated.

View other projects

Author

Aimanski.

License

Copyright © 2019, Aimanski12. Released under the MIT License.