Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/abdussattar-70/photo_gallery

Home assignments
https://github.com/abdussattar-70/photo_gallery

daisyui expressjs firebase-auth jwt-authentication mongodb mongoose nodejs react redux-toolkit tailwindcss

Last synced: 27 days ago
JSON representation

Home assignments

Awesome Lists containing this project

README 

        





 


Photo Gallery

.

 







Screenshot







# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#triangular_flag_on_post-deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)



## 📖 Photo Gallery 



Welcome to the Photo Gallery App! A fully responsive both mobile and desktop full-stack application built using React.js for the front-end and Node.js with Express.js for the back-end. It allows users to create and manage their photo galleries securely. This documentation provides insights into the project structure, key technologies used, and an overview of the application features.



## 🛠 Built With 



## Tech Stack 



  Client

  



  Server

  



Database

  
    

     
  • Mongodb
    • 

      



## Project Structure



The frontend of the Photo Gallery Web App is organized into a standard React project structure, including components, assets, and configuration files. The main folders and files in the project structure include:



- `.github/workflow/linters.yml`: GitHub action CI/CD for automation build process.

- `src/`: The source code for the React application.

  - `assets/`: Stores static assets such as images and styles.

  - `layout/Root.jsx`: The layout and entry point of the application.

  - `main.js`: Renders the React app and attaches it to the DOM.

  - `pages/`: Contains all React components used in the application.

  - `pages/..`: Contains `about`,`Auth controll`,`errorpage`, `homepage`, `photo gallery`, and all `shared` components .

  - `routes/`: Contains all Route declaration.

  - `redux/`: Contains all global state management logic.

- `package.json`: Lists project dependencies and defines scripts for development and building.



# Validation and Error Handling



- The frontend employs validation and error handling to enhance the user experience:



- Real-time validation of user input during registration to ensure data accuracy.

- Comprehensive error handling for API requests, ensuring graceful responses to user interactions.



# Google OAuth Integration



- Google OAuth is seamlessly integrated into the app:

- Users can register and log in using their Google accounts.

- This integration ensures secure and straightforward access.



## Key Features 



- User authentication with Firebase and JWT for secure access.

- CRUD (Create, Read, Update, Delete) operations for photo galleries.



# Drag-and-Drop Functionality



- The app utilizes React-Beautiful-DnD to implement a smooth and intuitive drag-and-drop feature:

- Drag-and-drop functionality for reordering images in galleries.

- Simply drag an image and drop it in the desired position.

- The updated order is immediately reflected.

- Integration with Google OAuth for seamless user registration and login.

- Real-time validation of user input for registration.

- Logout functionality.



(back to top)



## 🚀 Live Demo 



- [Live Demo Link](https://effulgent-basbousa-67837a.netlify.app/)



(back to top)



# Usage



- Sign up or log in using your Google account to access your photo galleries.

- Create new galleries and add images to them.

- Rearrange images within a gallery using drag-and-drop.

- Delete galleries or individual images.

- Enjoy seamless and secure access to your photo collections.



## 💻 Getting Started 



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



## Prerequisites 



- In order to run this project you need:



### It would be best if you had some familiarity with `Redux`, `CSS`,`JS`, `Vite-React` and `Tailwind`.



- A Computer (MAC or PC)

- code editor (VSCode,Atom etc...)

- A browser (Chrome,Mozilla,Safari etc...)

- Version Control System (Git and Github)



# Setup 



Clone this repository to your desired folder:



```bash

       git clone https://github.com/AbdusSattar-70/photo_gallery.git

       cd photo_gallery

```



# Install 



Install this project with:



```bash

     npm install

```



# Run tests and check errors 



To run tests and check errors, run the following command:



- To check Styelint error:-



```bash

   npx stylelint "\*_/_.{css,scss}"

```



- To check Eslint error:-



```bash

  npx eslint "**/*.{js,jsx}"

```



# Deployment 



You can deploy this project using:



- Render Hosting server or GitHub pages



```bash

   npm install

   npm run dev

```



(back to top)



## 👥 Authors 



## 👤 Abdus Sattar



- GitHub: [AbdusSattar-70](https://github.com/AbdusSattar-70)

- Twitter: [Abdus Sattar](https://twitter.com/Abdus_Sattar70)

- LinkedIn: [Abdus Sattar](https://www.linkedin.com/in/abdus-sattar-a41a26215/)



(back to top)



## 🔭 Future Features 



- **Add Search functionality**

- **Add web accessibility**

- **Add about page and RBAC controll**

- **Add test case using jest**

- **Image Download and zoom options**

- **Add Lazy loading**



(back to top)



## 🤝 Contributing 



Everybody is welcome to suggest, changes,Contributions, issues, and feature request in this project.



In order to do it, fork this repository, create a new branch and open a Pull Request from your branch.



Feel free to check the [issues page](../../issues/).



(back to top)



## ⭐️ Show your support 



If you like this project, Please give me ⭐️ and you can use it following [MIT](./LICENSE) license.



(back to top)



## 🙏 Acknowledgments 



I would like to thank Firebase, React, Mongodb, Netlify and Render team for the opportunity to learn and use their platform and services free to use.



(back to top)



## 📝 License 



This project is under [MIT](./LICENSE) licensed.



(back to top)