Tiny Cloud

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• How to use
• Contact
• Acknowledgements

Overview

In this screenshot you can see the login page where you can enter in the app, or redirect to the signup or recover password page.

Here is the page where you will redirect once you login successfully. There is a button that you can click and then you will redirect to the upload image page.

Here you can drag and drop an image or choose to select from your folder.

You will see a loader and then you will finally see your image, you can copy the url image.

You can see all your images uploaded in my space page and you can copy the url image or delete it.

Built With

• React
• React router dom
• MUI
• Formik
• Vite
• TypeScript

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• You can drag and drop an image to upload it
• You can choose to select an image from my folder
• You can see a loader when uploading
• When the image is uploaded, I can see the image and copy it
• You can choose to copy to the clipboard

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/gamcode98/image-uploader-frontend

# Install dependencies
$ npm install

# Run the app
$ npm run dev

You will need to clone too the backend repository

Note: Replace your VITE_BACKEND_URL="your_backend_url" in your .env file

Acknowledgements

• Dev challenges

Contact

• Website portfolio-gamcode.netlify.app/
• GitHub @gamcode98