├── .eslintrc.json ├── pusher.bat ├── src ├── app │ ├── favicon.ico │ ├── layout.js │ ├── app.css │ └── page.js ├── pages │ └── api │ │ ├── posts.js │ │ └── firebase.js └── lib │ └── mongodb.js ├── jsconfig.json ├── next.config.js ├── postcss.config.js ├── .env.local ├── .gitignore ├── tailwind.config.js ├── package.json ├── README.md └── Deployment.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /pusher.bat: -------------------------------------------------------------------------------- 1 | git add . 2 | git commit -m "adding all the data" 3 | git push -u origin main -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kanugurajesh/Image-Share/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/app/layout.js: -------------------------------------------------------------------------------- 1 | import { Inter } from 'next/font/google' 2 | 3 | const inter = Inter({ subsets: ['latin'] }) 4 | 5 | export const metadata = { 6 | title: 'Rajesh auth', 7 | description: 'A starter for Next.js with MongoDB', 8 | } 9 | 10 | export default function RootLayout({ children }) { 11 | return ( 12 | 13 | {children} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /.env.local: -------------------------------------------------------------------------------- 1 | MONGODB_URI=mongodb+srv://rajesh:TZyoHUE5A3Np8ytl@cluster0.fz00uzi.mongodb.net/?retryWrites=true&w=majority 2 | NEXT_PUBLIC_SUPABASE_URL=https://diglruosghpvcesaccib.supabase.co 3 | NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRpZ2xydW9zZ2hwdmNlc2FjY2liIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODk2MDI4ODcsImV4cCI6MjAwNTE3ODg4N30.H-UO2eg6dL_JxraL1DseX9-MZtdsQ7iU9-gliGyhGsc 4 | NEXT_FIREBASE_API_KEY=AIzaSyD0HMCOc6Og28dnsfOqwuF_Ia1dTTYAj24 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | # .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}', 5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}', 6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}', 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/api/posts.js: -------------------------------------------------------------------------------- 1 | import clientPromise from "../../lib/mongodb"; 2 | export default async function handler(req, res) { 3 | const client = await clientPromise; 4 | const db = client.db("rajesh"); 5 | switch (req.method) { 6 | case "POST": 7 | let bodyObject = JSON.parse(req.body); 8 | let myPost = await db.collection("rajesh").insertOne(bodyObject); 9 | break; 10 | case "GET": 11 | const allPosts = await db.collection("allPosts").find({}).toArray(); 12 | res.json({ status: 200, data: allPosts }); 13 | break; 14 | default: 15 | res.status(405).end("do properly"); // Method Not Allowed 16 | break; 17 | } 18 | } -------------------------------------------------------------------------------- /src/pages/api/firebase.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getAnalytics } from "firebase/analytics"; 4 | import { getStorage } from "firebase/storage"; 5 | 6 | const firebaseConfig = { 7 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, 8 | authDomain: "reastapi.firebaseapp.com", 9 | projectId: "reastapi", 10 | storageBucket: "reastapi.appspot.com", 11 | messagingSenderId: "577265070444", 12 | appId: "1:577265070444:web:f9db53c965ff0e39c94349", 13 | measurementId: "G-MH77MCH84F" 14 | }; 15 | 16 | // Initialize Firebase 17 | export const app = initializeApp(firebaseConfig); 18 | export const storage = getStorage(app); -------------------------------------------------------------------------------- /src/lib/mongodb.js: -------------------------------------------------------------------------------- 1 | // mongodb.js 2 | 3 | import { MongoClient } from 'mongodb' 4 | 5 | const uri = process.env.MONGODB_URI 6 | const options = { 7 | useUnifiedTopology: true, 8 | useNewUrlParser: true, 9 | } 10 | 11 | let client 12 | let clientPromise 13 | 14 | if (!process.env.MONGODB_URI) { 15 | throw new Error('Add Mongo URI to .env.local') 16 | } 17 | 18 | if (process.env.NODE_ENV === 'development') { 19 | if (!global._mongoClientPromise) { 20 | client = new MongoClient(uri, options) 21 | global._mongoClientPromise = client.connect() 22 | } 23 | clientPromise = global._mongoClientPromise 24 | } else { 25 | client = new MongoClient(uri, options) 26 | clientPromise = client.connect() 27 | } 28 | 29 | export default clientPromise -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-mongodb-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@supabase/auth-ui-react": "^0.4.2", 13 | "@supabase/auth-ui-shared": "^0.1.6", 14 | "@supabase/supabase-js": "^2.26.0", 15 | "antd": "^5.7.2", 16 | "autoprefixer": "10.4.14", 17 | "encoding": "^0.1.13", 18 | "eslint": "8.45.0", 19 | "eslint-config-next": "13.4.10", 20 | "firebase": "^10.0.0", 21 | "mongodb": "^5.7.0", 22 | "next": "13.4.10", 23 | "postcss": "8.4.26", 24 | "react": "18.2.0", 25 | "react-dom": "18.2.0", 26 | "styled-components": "^6.0.4", 27 | "supabase": "^1.77.9", 28 | "tailwindcss": "^3.3.3", 29 | "uuid": "^9.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image Share 2 | 3 | A brief description of what this project does and who it's for. Provide a clear and concise overview of the project's purpose and target audience. 4 | 5 | ## Setup 6 | 7 | Follow these steps to set up the project: 8 | 9 | 1. Run `npm install` to install the required dependencies. 10 | 2. Add your API keys in the `.env.local` file. Ensure you have the necessary keys from the following services: 11 | 12 | - **Supabase**: 13 | - Create an app on Supabase and obtain the public URL and anonymous key. Add these values to the `.env.local` file. 14 | 15 | - **Firebase**: 16 | - Create a Firebase storage and get the URL and API key. Add these values to the `.env.local` file. 17 | 18 | - **MongoDB**: 19 | - Copy the MongoDB URL and add it to the `.env.local` file. 20 | 21 | 3. Run `npm run dev` to start the application. 22 | 23 | ## Getting the API keys 24 | 25 | Follow these steps to obtain the API keys for the required services: 26 | 27 | 1. **Supabase**: 28 | - Go to the Supabase website and create an app. 29 | - Obtain the public URL and anonymous key from your app settings. 30 | - Add these values to the `.env.local` file. 31 | 32 | 2. **Firebase**: 33 | - Go to the Firebase website and create a Firebase storage. 34 | - Get the storage URL and API key. 35 | - Add these values to the `.env.local` file. 36 | 37 | 3. **MongoDB**: 38 | - Obtain the MongoDB URL from your MongoDB provider. 39 | - Add the URL to the `.env.local` file. 40 | -------------------------------------------------------------------------------- /src/app/app.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | display: none; 3 | } 4 | 5 | #session { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100vh; 11 | display:flex; 12 | flex-direction: column; 13 | justify-content:center; 14 | align-items:center; 15 | gap: 40px; 16 | word-spacing: -1px; 17 | } 18 | 19 | #layerdiv { 20 | box-sizing: border-box; 21 | height:97vh; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | } 26 | 27 | #outerdiv { 28 | overflow-y: scroll; 29 | height: 100vh; 30 | padding:0 50px; 31 | margin: 0 auto; 32 | height:90vh; 33 | display:flex; 34 | flex-direction: column; 35 | justify-content:center; 36 | align-items:center; 37 | gap: 40px; 38 | word-spacing: -1px; 39 | } 40 | 41 | #outerform { 42 | max-width: 320px; 43 | display:flex; 44 | flex-direction: column; 45 | justify-content:center; 46 | align-items:center; 47 | gap: 25px; 48 | } 49 | 50 | #file { 51 | padding: 5px; 52 | font-size: 0.9rem; 53 | } 54 | 55 | #showimage { 56 | box-sizing: border-box; 57 | width: 100%; 58 | height: 100%; 59 | padding: 30px 50px; 60 | object-fit: contain; 61 | text-align: center; 62 | } 63 | 64 | #showimage h1{ 65 | margin-right: 30px; 66 | margin-bottom: 60px; 67 | } 68 | 69 | #imagediv { 70 | display: grid; 71 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 72 | gap: 40px; 73 | margin: 40px 0; 74 | } 75 | 76 | @media (min-width:600px) { 77 | #outerdiv { 78 | box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); 79 | } 80 | } -------------------------------------------------------------------------------- /Deployment.md: -------------------------------------------------------------------------------- 1 | # Project Name 2 | 3 | ## Deployment on Vercel 4 | 5 | This project can be easily deployed on Vercel, a cloud platform for static sites and serverless functions. Follow the steps below to deploy your application: 6 | 7 | 1. Sign up or log in to Vercel: If you don't have an account on Vercel, you can sign up for free at https://vercel.com. If you already have an account, log in to your dashboard. 8 | 9 | 2. Import this GitHub repository: In the Vercel dashboard, click on "Import Project" and select the option to import from GitHub. Choose the repository that contains your project. 10 | 11 | 3. Configure settings (if needed): Vercel will automatically detect most of the settings for your project. However, if you need to customize the build settings or environment variables, you can do that during the import process. 12 | 13 | 4. Deploy your application: After importing the repository, Vercel will start the deployment process automatically. It will build your project and deploy it to a unique URL. 14 | 15 | 5. Monitor your deployment: Once the deployment is complete, you can monitor the progress and status of your application on the Vercel dashboard. Any subsequent pushes to the linked branch will trigger automatic redeployments. 16 | 17 | 6. Access your deployed application: Once the deployment is successful, you can access your application by visiting the provided URL. Share this URL with others to showcase your project! 18 | 19 | Congratulations! Your application is now successfully deployed on Vercel, and it's live for the world to see. 20 | 21 | If you encounter any issues during the deployment process, please refer to the [Vercel documentation](https://vercel.com/docs) or [contact their support](https://vercel.com/support). 22 | 23 | Happy coding! 24 | -------------------------------------------------------------------------------- /src/app/page.js: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import './app.css'; 3 | import React, { useState, useEffect } from 'react'; 4 | import { v4 as uuidv4 } from 'uuid'; 5 | import { storage } from '@/pages/api/firebase'; 6 | import { ref, listAll,getDownloadURL, uploadBytesResumable } from "firebase/storage"; 7 | import { Progress, Space, Input, Button, Image} from 'antd'; 8 | import {FileImageOutlined, FormOutlined,UploadOutlined} from '@ant-design/icons'; 9 | import { Auth } from '@supabase/auth-ui-react' 10 | import { ThemeSupa } from '@supabase/auth-ui-shared' 11 | import { createClient } from '@supabase/supabase-js' 12 | 13 | const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) 14 | 15 | export default function Home() { 16 | const [loading, setLoading] = useState(false); 17 | const [name, setName] = useState(''); 18 | const [gmail, setGmail] = useState(''); 19 | const [password, setPassword] = useState(''); 20 | const [imgUrl, setImgUrl] = useState(null); 21 | const [progresspercent, setProgresspercent] = useState(0); 22 | const [passwordVisible, setPasswordVisible] = useState(false); 23 | const [session, setSession] = useState(null) 24 | const [showForm, setShowForm] = useState(true) 25 | const [getImages, setGetImages] = useState([]); 26 | const id = uuidv4(); 27 | 28 | const handleFileUpload = () => { 29 | document.querySelector('#file').click(); 30 | }; 31 | 32 | useEffect(() => { 33 | supabase.auth.getSession().then(({ data: { session } }) => { 34 | setSession(session) 35 | }) 36 | const { 37 | data: { subscription }, 38 | } = supabase.auth.onAuthStateChange((_event, session) => { 39 | setSession(session) 40 | }) 41 | return () => subscription.unsubscribe() 42 | }, []) 43 | 44 | const fetchImages = async () => { 45 | const listRef = ref(storage, 'files'); 46 | const res = await listAll(listRef); 47 | const res2 = await Promise.all( 48 | res.items.map((imageRef) => getDownloadURL(imageRef)) 49 | ); 50 | setGetImages(res2); 51 | }; 52 | 53 | useEffect(() => { 54 | fetchImages(); 55 | }, []); 56 | 57 | const submitForm = async (e) => { 58 | console.log('submitForm') 59 | e.preventDefault(); 60 | setLoading(true); 61 | const file = document.querySelector('#file').files[0]; 62 | if (!file) return; 63 | const storageRef = ref(storage, `files/${id}`); 64 | const uploadTask = uploadBytesResumable(storageRef, file, { customMetadata: { id: id } }); 65 | 66 | uploadTask.on("state_changed", 67 | (snapshot) => { 68 | const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100); 69 | setProgresspercent(progress); 70 | }, 71 | (error) => { 72 | alert(error); 73 | }, 74 | async () => { 75 | try { 76 | const downloadURL = await getDownloadURL(uploadTask.snapshot.ref); 77 | setImgUrl(downloadURL); 78 | const res = await fetch('/api/posts', { 79 | method: 'POST', 80 | body: JSON.stringify({ 81 | id: id, 82 | name: name, 83 | gmail: gmail, 84 | password: password, 85 | imgUrl: downloadURL // Use the downloadURL obtained from Firebase 86 | }), 87 | }); 88 | } 89 | catch (e) { 90 | console.log(e); 91 | } 92 | } 93 | ); 94 | setName(''); 95 | setGmail(''); 96 | setPassword(''); 97 | setImgUrl(null); 98 | setProgresspercent(0); 99 | setLoading(false); 100 | document.querySelector('#file').value = ''; 101 | }; 102 | 103 | if (!session) { 104 | return ( 105 |

106 | 107 |

108 | ) 109 | } 110 | else { 111 | if(showForm){ 112 | return ( 113 |

114 |

115 |

My Form

116 |

117 | { 118 | setName(e.target.value); 119 | }}/> 120 | { 121 | setGmail(e.target.value); 122 | }} required/> 123 | 124 | { 130 | setPassword(e.target.value); 131 | }} 132 | required 133 | /> 134 | 137 | 138 | 139 | 140 | 141 | 142 | 145 | 146 |

147 | {!imgUrl && ( 148 | 149 | )} 150 | {imgUrl && {imgUrl}

} 156 |

157 |

158 | ); 159 | } 160 | else{ 161 | return ( 162 |

163 |

My Images

164 |

165 | {getImages.map((image) => ( 166 | {image}

173 | ))} 174 |

175 | 176 | 180 | 181 |

182 | ); 183 | } 184 | } 185 | } --------------------------------------------------------------------------------