This project was built to complete all the user stories listed or described by the challenge itself. Hence in this project, a user can:
- Drag and drop an image to upload it
- Choose to select an image from any folder
- See a loader when uploading
- Can see the uploaded image and copy it
- Choose to copy to the clipboard
This application was built reflecting the MVC architecture and the main dependencies(all found in the package.json) of the application are organised as so:
- Front-end User Interface(UI): Tailwindcss
- File Storage: Not available
Other important services & dependency libraries of the application include:
- react-dropzone: Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
- react-toastify: The React-Toastify package enables developers to add toast notifications to their applications and also can set notifications.
- copy-to-clipboard: A copy to clipboard function.
- axios: An http client to fetch urls and make api calls or requests to the Cloudinary API.
- Clone this repository:
git clone https://github.com/kevin-sg/nextjs-image-uploader.git- Next, you need to setup the
.envfile found in the root with the appropriate credentials from the following service providers:
NEXT_PUBLIC_CLOUDINARY_BASE_URL = https://api.cloudinary.com/v1_1/cloud_name/image/upload
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET = cloud_preset
- Install all the dependency packages found in the
package.jsonfile:
# ./nextjs-image-uploader
pnpm install- To start the development server of the application:
pnpm dev
