CharlyAnne / drag_drop_gallery

DragDropX

HNGx Stage 3 task. A webpage demostrating a drag and drop feature with images.

📗 Table of Contents

• Key Features
• 🚀 Live Demo
• 🛠 Built With
• Tech Stack
• Resources & Credits
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Usage
  • Deployment
• 👥 Authors

Key Features

• Simple authentication
• Drag and Drop images
• Search for images with tags
• Display search results
• Images details page
• Navigation
• Loading indicator
• Error handling**

🚀 Live Demo

Live_Demo

🛠 Built With

Tech Stack

• React
• SupaBase
• TailwindCSS

### Credits

• Art photos from UnSplash
• Random picturs from Pixabay

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

• A browser (e.g. Chrome)
• An IDE (e.g. Vususal Studio Code)
• npm
• Terminal

Setup

To clone this repository to your desired folder, follow the steps below:

Using the command line

• Use the following commands

  cd my-folder
  git clone https://github.com/CharlyAnne/drag_drop_gallery.git

Using GitHub Desktop app

• Follow the steps below

  • Visit this link click me
  • Click the green button labelled "code"
  • Select the "Open with GitHub Desktop" option
  • After the GitHub Desktop add opens, click the "clone repo" button

Usage

To run the project, execute the following command:

run npm install on your terminal to install the necessary dependencies run npm run dev on your terminal to run the project locally

Deployment ||

You can deploy this project by:

• visiting your repository on Netlify
• Signin
• Connect your github repo to Netflify
• Select and project from github
• Select the main branch and host

(back to top)

👥 Author

👤 Charlian Imoisili

• GitHub: @CharlyAnne
• Twitter: @Imoisiliii
• LinkedIn: LinkedIn

(back to top)