NextJs Image Uploader

Description

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

General

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.

Getting started

1. Clone this repository:

git clone https://github.com/kevin-sg/nextjs-image-uploader.git

2. Next, you need to setup the .env file 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

3. Install all the dependency packages found in the package.json file:

#  ./nextjs-image-uploader
pnpm install

3. To start the development server of the application:

pnpm dev

Author:

KevinSG

License