https://github.com/neodev99/image-gallery
Image gallery web application built using the MERN Stack
https://github.com/neodev99/image-gallery
gallery-images mern-stack
Last synced: 3 months ago
JSON representation
Image gallery web application built using the MERN Stack
- Host: GitHub
- URL: https://github.com/neodev99/image-gallery
- Owner: NeoDev99
- Created: 2023-08-02T07:25:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T16:43:34.000Z (about 1 year ago)
- Last Synced: 2024-09-07T12:42:18.158Z (about 1 year ago)
- Topics: gallery-images, mern-stack
- Language: JavaScript
- Homepage:
- Size: 4.78 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image Gallery
This is a simple image gallery web application built using the MERN (MongoDB, Express.js, React, Node.js) stack.
## Features
- Display a collection of images in a grid layout
- Pagination to navigate through multiple pages of images
- Search functionality to filter images by keywords
- Responsive design for optimal viewing on different devices
- Navigation bar for easy navigation between pages
## Technologies Used
- MongoDB: Database for storing image data
- Express.js: Backend framework for handling API requests
- React: Frontend library for building the user interface
- Node.js: JavaScript runtime environment for running the server
- Cloudinary: Cloud-based image management service
- Multer: Middleware for handling file uploads
- React Router: Library for handling client-side routing
- Axios: HTTP client for making API requests
## Getting Started
1. Clone the repository:
```shell
git clone https://github.com/UmbrellaSkiies/Image_Gallery
```
2. Install the dependencies:
```shell
cd client
npm install
cd ../server
npm install
```
3. Set up the environment variables:
```shell
MONGODB_URI=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
```
4. Start the development server:
```shell
cd client
npm start
cd ../server
nodemon server.js
```
5. Open your browser and visit http://localhost:3000 to see the application.
## Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue for any bug fixes, suggestions, or new features.
## License
This project is free to use.