This is an image repository created for the Shopify Developer Intern Challenge
I recommend looking first checking out the live demo
To run locally, clone this repository and run npm start. Then open up http://localhost:3000 to view it in the browser.
- Add images
- Upload images one at a time or in bulk
- Image uploaded securely -secure in transport and rest
- Select who has access to images
- View images
- view what images they have uploaded
- Delete images
- Bulk delete
- Can only delete image uploaded by user
- secure deletion
- File management
- Users can choose what files they want to share with the world. This will become relevant when we add in the search functionalities
- React: React is declarative, component-based language that makes it easier to quickly single-page applications.
- Typescript: TypeScript is a JavaScript extension, which is used to encourage developers to write more maintainable code. It compiles to JavaScript so it can be run on any modern browser.
- ESLint: ESLint is a static analyzer for JavaScript. In our code we also use it to ensure our translation json files are also in the correct format.
- Jest: Jest is a simple, yet comprehensive testing framework which works well with React.
- React-Intl: React-intl is a JavaScript library that makes simplifies the process of internalization for web-applications.
- Formik: Formik is a light weight library that handles form creation and management in React.
- Axios: Axios is a promise based HTTP client which simplifies the connecting to the API for this website.
- Dropzone: Dropzone is HTML5-compliant and drag and drop component for file uploading. It allows us to select multiple files at once and handles basic file validation.
- Material-UI: Material-UI is a React library that implements Google's Material Design. It lets quickly create beautiful components so we can focus more on the functionality.
-
View
- Download chosen file - make sure it is the same as when you uploaded
-
Delete
- Delete selected file - make sure user can only delete file in their folder
-
User Management
- Allow users to register
- Allow users to login
-
Upload
- Upload file to user's account
- Make sure file is encrypted
- Make sure users don't overwrite their file
- CP-ABE encryption used to encrypt files so even if a hacker got their hands on the file it would still be encrypted
- PHP Back-end
-
View
- View image in tile form
- View files in folder
-
Delete
- Test mass deletion (after)
- Delete folder (after)
-
File encryption
- Change permission of file
- Change permission of all files in folder (after)
-
User Management (after)
- Allow user to logout
- Let user request password reset
-
Searching (after)
- Allow users to search public files by name
- Allow users to search public files by tags
- Allow users to search files in their organization