This is a Image Repository Application that is created using ReactJS, Flask and SQLite as part of Shopify Developer Intern Challenge Question.
Here is my development environment
npm 6.14.4
, node 10.19.0
, Python 3.7.6
- Clone the repo
git clone [email protected]:mzzchy/shopify_challenge.git
cd shopify_challenge
-
I recommend use Anaconda to create virtual enironemnt before installing it. Here is the instruction
-
Install backend server
pip install .
- Start the Backend Server
export FLASK_APP=server
export FLASK_ENV=development
flask run
To verify the backend is setup successfully, please go to http://localhost:5000/
and make sure you see welcome to image repo backend
.
- In another terminal, start the Front End
npm install
npm start
- Now Go check the image repo on
http://localhost:3000/
The frontend is writted by ReactJS and the backend is writted by Python with Flask. All Images is converted to Blob and stored in Sqlite.
- Upload one/bulk images
- Show uploaded images in grid
- Delete one/bulk images (The frontend of Bulk deletion hasn't been implemented but the API is provided)
- Search by image name
- Pytest for all api endpoints
- Set a independent name for uploaded image. (Almost front end)
- Setup Authorization system to allow user create accounts and mark image as privated or public
- Lazy load image.
- Dockerize the repo
- Using filesystem like AWS S3 to store the images
- Extract feature of uploaded image and store in database. For image similarity search, using approximate nearest neighbor algorithm to compute get top K similar image.