Skip to content

React web app that features a catalog that holds images of personal computers (PC's). Able to add images to the catalog

Notifications You must be signed in to change notification settings

ZeroTwoDataRW/Shopify-PC-Images-Catalog

Repository files navigation

Image-Repository App

2022 Shopify Challenge Developed with Create React App.

Challenge

Build an Image Repository.

You can tackle this challenge using any technology you want. This is an open-ended task.

Please provide brief instructions on how to use your application. We are a test-driven environment, so ensure your challenge includes tests. Provide brief instructions on how to use your application, so that someone could use your application and understand how it works.

What is an Image Repository?

They are public/private spaces wherein users upload and store images (public repos, such as this one, enable users to share and collaborate on container images).

Data Engineers typically store unchangeable, static files that includes executable code so it can run an isolated process within these containers (such as Docker).

But in place of static files this repo holds jpeg/png/svg images of "aesthetic-looking" computer setups 🤣.

What Is the Purpose of This Application?

The purpose of this application is to store images of "aesthetic-looking" computer setups (hence the name of this app, "Aesthetico"). Users can upload and store images (one at a time) inside the repo, as well as share with others by rightclicking on the image to save to their drive. *A multiple upload feature will be included in the future

How Does It Work?

Currently there are two functions to this repo:

  1. Upload Build. Users can upload images from their computer to this repository
  2. Filter By Name. Users can filter images by their "Build Name" (**images in the repo are placed in alphabetical order)

Note: Users CANNOT delete images they upload to this repo. So PLEASE PAY ATTENTION TO WHAT YOU UPLOAD. *A delete feature will be included in the future

What Technology Did You Use To Tackle This Challenge

ReactJS, MaterialUI, Firebase (Firestore & Firebase Storage)

Run Scripts

To run this project, type these commands in your terminal:

$ git clone https://github.com/ZeroTwoData/Shopify-Internship-Image-Repository.git
$ npm install

Then type:

npm start

Open https://localhost:3000 to view it in the browser.

Testing

// Eight Total Tests Should Be Conducted (Checking 3 Categories):

// 1. Testing the rendering of Home.js Component

// 2. Testing the the rendering and functionality of SearchBar.js

// 3. Testing the rendering of the UploadButton.js

Conduct the test by typing this command in the terminal:

npm test

THANK YOU FOR TAKING TIME TO USE THIS APP! 😍

About

React web app that features a catalog that holds images of personal computers (PC's). Able to add images to the catalog

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published