Image Repository

A web-based repository for images built on PHP / MySQL / React. Features include searching, public / private uploads, upload deletions, Google OAuth sign-in, and much more!

View Live Demo · Report Bug · Request Feature

Table of Contents

1. Built with
   • Testing libraries
2. How to use the application?
3. Getting started
   • Prerequisites
   • Installation
4. Testing
5. API documentation
   • Other operations
6. Future features
7. License
8. Contact
9. Acknowledgements

Built with

• PHP - backend responsible for user authentication, login / signup, searches, image upload / deletion, etc.
• MySQL - storage solution for holding existing users and image upload information
• React / JS - frontend responsible for UI/UX interface to perform actions

Testing libraries

• Jest Testing Library
• React Testing Library

How to use the application?

Go the Live Demo and signup for an account either with Google or with a custom username and password. If you would prefer not to create a new account, you can use the test account with username demo and password demo.

The homepage displays the most recent public uploads by users (including your own public uploads!)

Once logged in, you will be able to upload images and access your profile page via the account icon in the menu bar. On the profile page, you have options to view your public uploads, private uploads, and upload / delete images.

Getting started

To get a local copy up and running follow these simple example steps.

Prerequisites

NPM and Composer are required for installing the needed dependencies of this project.

composer --version

npm --version

Installation

1. Clone the repo

   git clone https://github.com/joshuajadaniel/image-repository.git

2. Install Composer dependencies in /api

   composer install

3. Follow the instructions in /api/configSkeleton.php to create config.php
4. Have a PHP / MySQL enabled server running /api
5. Install NPM packages

   npm install

6. Update basename and homepage if needed in /src/App.jsx and package.json respectively.
7. Update /api links in /utils
8. Start a local server for React

   npm start

Testing

Frontend testing is conducted using Jest and RTL (React Testing Library) and backend testing is conducted using Postman.

# Frontend testing (components shown below)
npm run test -- --coverage --watchAll=false

# Example backend testing (recent feed shown below)

API documentation

GET /api/feed/recent.php returns all public uploads ordered by time

GET /api/feed/search.php returns all public uploads with exact search query in the title

GET /api/feed/user.php returns uploads for a user (provided you are authenticated)

POST /api/feed/upload.php uploads an image (provided you are authenticated) to the repository

POST /api/feed/delete.php deletes an image (provided you are the owner) from the repository

POST /api/user/login.php returns a JWT token if user has the correct credentials

POST /api/user/signup.php returns a JWT token if user does not exist

POST /api/user/validate.php returns whether a given JWT token is valid

Other operations

/api/google/auth.php redirects user to Google OAuth flow

/api/google/return.php return point after user is authenticated by Google (redirects back to frontend)

Future features

• Cropping prior to upload
• Direct download for each image
• Albums / collections for user organization
• Tagging system for uploads
• Edits to previous uploads

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Joshua J. A. Daniel

Email: joshuajadaniel@gmail.com

LinkedIn: https://linkedin.com/in/joshuajadaniel

Acknowledgements

• Axios
• Material UI
• Cloudinary
• @egjs/infinite-grid