Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jacceycode/hngxstage3task


https://github.com/jacceycode/hngxstage3task

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

# Drag&Drop Image Gallery Project - MyImageA

Hi šŸ‘‹, I'm Jacob Adebayo (@JacceyCode)


A passionate frontend developer.

- šŸ”­ Iā€™m currently working on **Drag&Drop Image Gallery project called MyImageA.**

- šŸ“« How to reach me **[email protected]**

## Description

šŸ“„ This project is an image gallery that can be viewed by anyone. It allows for login of registered user's with an authentication feature which gives user's access to the drag&drop feature that allows for rearranging the images in the gallery and also the image search functionality.

The interface was developed using React and Tailwind CSS, the user authentication was implemented using supabase while the drag&drop functionality was done with a react toolkit called dnd-kit.

How the gallery work:



User's visiting the website url can only view the images in the gallery. Only a authenticated user can proceed to login and access the other functionalities.



For registered user's:

- click on the login button by the top right of the gallery.

- Input your email and password and submit(At this point, user's details are authenticated using supabase auth functionality and signed-in if details are correct or an alert pops-up if the details are wrong).

- When signed in, user's can rearrange the gallery by simply clicking/holding down on the image to be moved and drag it to the preffered position.

- User's can also streamline image search by using the search box at the top of the galley. Images can be searched for using defined tag names like Car, House, Nature & Animal. Any tag name outside the defined ones will prompt an error to search again.

- User's can also sign-out when done by clicking on the logout button by the top right corner of the gallery.

Test Login details are:

- Email: [email protected]
- Password: 1Password

I hope you testing the gallery.

Connect with me on github: @JacceyCode

Languages and Tools:


React(Vite) + React Router + Tailwind CSS + dnd-kit + supabase

css3 figma git html5 javascript react tailwind