├── README.md ├── package.json ├── public └── index.html ├── src ├── App.js ├── components │ ├── Loading.js │ ├── MainNotification.js │ ├── Modal.js │ ├── Nav.js │ ├── Notify.js │ ├── crop │ │ ├── CropEasy.js │ │ └── utils │ │ │ └── cropImage.js │ ├── imagesList │ │ ├── ImagesList.js │ │ └── Options.js │ ├── upload │ │ ├── Form.js │ │ ├── Upload.js │ │ └── progressList │ │ │ ├── CircularProgressWithLabel.js │ │ │ ├── ProgressItem.js │ │ │ └── ProgressList.js │ └── user │ │ ├── Login.js │ │ ├── Profile.js │ │ ├── ResetPassword.js │ │ ├── Verification.js │ │ ├── inputs │ │ ├── EmailField.js │ │ ├── PasswordField.js │ │ └── SubmitButton.js │ │ └── settings │ │ ├── AccountSettings.js │ │ ├── ChangeEmail.js │ │ ├── ChangePassword.js │ │ ├── DeleteAccount.js │ │ └── ReAuth.js ├── context │ └── AuthContext.js ├── firebase │ ├── addDocument.js │ ├── config.js │ ├── deleteDocument.js │ ├── deleteFile.js │ ├── deleteUserFiles.js │ ├── updateUserRecords.js │ ├── uploadFile.js │ ├── uploadFileProgress.js │ └── useFirestore.js ├── img │ └── profile.jpeg └── index.js └── webpack.config.js /README.md: -------------------------------------------------------------------------------- 1 | # React Firebase Images Gallery Project 2 | 3 | This project was created for [Youtube Lessons](https://www.youtube.com/watch?v=74rGC1e77tw&list=PLufbXXGswL_qTK6wu3yxprYXL42y9Nvh-). 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-firebase-gallery", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.7.1", 7 | "@emotion/styled": "^11.6.0", 8 | "@mui/icons-material": "^5.2.5", 9 | "@mui/material": "^5.2.5", 10 | "@testing-library/jest-dom": "^5.16.1", 11 | "@testing-library/react": "^12.1.2", 12 | "@testing-library/user-event": "^13.5.0", 13 | "firebase": "^9.6.1", 14 | "moment": "^2.29.1", 15 | "process": "^0.11.10", 16 | "react": "^17.0.2", 17 | "react-dom": "^17.0.2", 18 | "react-easy-crop": "^4.3.0", 19 | "react-image-lightbox": "^5.1.4", 20 | "react-scripts": "5.0.0", 21 | "uuid": "^8.3.2", 22 | "web-vitals": "^2.1.2" 23 | }, 24 | "scripts": { 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject", 29 | "build:deploy": "env-cmd -f .env.local npm run build && firebase deploy -P react-firebase-gallery-develop" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | }, 49 | "devDependencies": { 50 | "env-cmd": "^10.1.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | React Firebase Gallery 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import ImagesList from './components/imagesList/ImagesList'; 2 | import Nav from './components/Nav'; 3 | import Upload from './components/upload/Upload'; 4 | import { Container } from '@mui/material'; 5 | import AuthContext from './context/AuthContext'; 6 | import Modal from './components/Modal'; 7 | import MainNotification from './components/MainNotification'; 8 | import Loading from './components/Loading'; 9 | import Verification from './components/user/Verification'; 10 | 11 | function App() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 |