2manoj1 / photouploadercrop

Image Upload and crop in different way using react-image-crop and upload one by one crop image in Firebase cloud storage. Display all images in another page as Gallery. After upload its prompt for crop image download.

Live Demo

Getting Started

Step:

1. Clone The Repo in your local System
2. Install Depedency (Nodejs Required)

npm i
# or
yarn

3. Add Firebase cardinal in .env and .env.local file

touch .env
touch .env.local

NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_FIREBASE_DATABASE_URL=""
NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="7"
NEXT_PUBLIC_FIREBASE_APP_ID=""

Run the development server:

npm run dev
# or
yarn dev

Production Deployed in vercel (now.sh)

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

This project Bootstrap with Nextjs Framework (Server side Reactjs)

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!