├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── OneSignalSDKUpdaterWorker.js ├── OneSignalSDKWorker.js ├── favicon.ico ├── index.html ├── lfs logo.png ├── logo.png ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── Components ├── Feed.js ├── Found_item.js ├── Home.js ├── ItemPage.js ├── Login.js ├── Lost_item.js ├── MyListings.js ├── Navbar.js ├── NotFound.js ├── Response.js ├── Signup.js └── privateroute.js ├── constraints.js ├── css ├── Navbar.css ├── Signup.css ├── feed.css ├── item_card.css ├── itempage.css ├── landing.css ├── mylisting.css ├── myresponses.css └── newSignup.css ├── img ├── Santorini.jpg ├── developer_outline I.svg ├── earth.svg ├── feature.svg ├── github.svg ├── instagram.svg ├── linkedin.svg ├── list-item.svg ├── login-1.svg ├── login-2.svg ├── lost-2.svg ├── lost.svg ├── mail.svg ├── notification.svg ├── profile-icon.png └── undraw_lost_bqr2.svg └── index.js /.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 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![LFS YouTube Thumbnail](https://user-images.githubusercontent.com/44138255/122166119-c88c8280-ce96-11eb-98ec-cf65fb18d0e6.png)(https://youtu.be/7pioxo5yjGI) 2 | 3 | 4 | # Project Inspiration 5 | Colleges are the place where we come to home mentioning about losing our new earphone which might have kept in a desk but not sure if it's still there. This problem feels so relatable to most of the college students. A problem will still remain the same until someone builds a solution to it. 6 | 7 | # Features 8 | * Get notified when a lost/found item is listed. 9 | * "Response Validation" technique is used to prevent false claim and preventing misuse of information. 10 | * Keep track of your listed items/response. 11 | * Simple and Easy to use. 12 | 13 | 14 | # Technolgies Used 15 | * React JS (Frontend) 16 | * Node JS, Express JS (Backend) 17 | * MongoDB (Database) 18 | 19 | 20 | ### Here is the [project link](https://lfs-project.herokuapp.com/). 21 | ### Here is the [Video Explanation](https://youtu.be/7pioxo5yjGI). 22 | 23 | #### Other Links 24 | Link to the [Backend repository](https://github.com/eswarupkumar/lfs-backend-server). 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "social-media", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@nuxtjs/axios": "^5.13.5", 7 | "@testing-library/jest-dom": "^5.12.0", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "aos": "^2.3.4", 11 | "axios": "^0.21.1", 12 | "bootstrap": "^4.6.0", 13 | "lodash": "^4.17.21", 14 | "react": "^17.0.2", 15 | "react-bootstrap": "^1.6.0", 16 | "react-dom": "^17.0.2", 17 | "react-responsive-carousel": "^3.2.18", 18 | "react-router-dom": "^5.2.0", 19 | "react-scripts": "4.0.0", 20 | "react-toast-notifications": "^2.4.4", 21 | "rough-notation": "^0.5.1", 22 | "web-vitals": "^0.2.4" 23 | }, 24 | "engines": { 25 | "node": "14.17.5" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/OneSignalSDKUpdaterWorker.js: -------------------------------------------------------------------------------- 1 | importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js'); 2 | -------------------------------------------------------------------------------- /public/OneSignalSDKWorker.js: -------------------------------------------------------------------------------- 1 | importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js'); 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 31 | LFS 32 | 33 | 34 | 35 | 36 |
37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /public/lfs logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/public/lfs logo.png -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3 | // import ReactDOM from 'react-dom'; 4 | // import Navbar from './Components/Navbar' 5 | import Signup from './Components/Signup' 6 | import Login from './Components/Login' 7 | import Feed from './Components/Feed' 8 | import Response from './Components/Response' 9 | import 'bootstrap/dist/css/bootstrap.min.css'; 10 | // import NotFound from './Components/NotFound' 11 | import PrivateRoute from './Components/privateroute'; 12 | import Home from './Components/Home'; 13 | import ItemPage from './Components/ItemPage'; 14 | // import Feed from './Components/Feed' 15 | import MyListings from './Components/MyListings' 16 | import { ToastProvider } from 'react-toast-notifications'; 17 | window.OneSignal = window.OneSignal || []; 18 | const OneSignal = window.OneSignal; 19 | function App() 20 | { 21 | useEffect(()=>{ 22 | OneSignal.push(()=> { 23 | OneSignal.init( 24 | { 25 | appId: "fe13c665-7830-497e-9a3f-27a523840baf", //STEP 9 26 | 27 | welcomeNotification: { 28 | "title": "One Signal", 29 | "message": "Thanks for subscribing!", 30 | } 31 | }, 32 | //Automatically subscribe to the new_app_version tag 33 | // OneSignal.sendTag("new_app_version", "new_app_version", tagsSent => { 34 | // // Callback called when tag has finished sending 35 | // console.log('new_app_version TAG SENT', tagsSent); 36 | // }) 37 | ); 38 | }); 39 | },[]) 40 | // const name='Swarup K' 41 | return ( 42 | <> 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | {/* */} 56 | 57 | 58 | {/* */} 59 | 60 | 61 | ) 62 | } 63 | 64 | export default App -------------------------------------------------------------------------------- /src/Components/Feed.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | // import { useLocation } from "react-router-dom"; 3 | import { setConstraint } from "../constraints"; 4 | import Navbar from "../Components/Navbar"; 5 | import "../css/feed.css"; 6 | import "../css/item_card.css"; 7 | import Axios from "axios"; 8 | import { Card, Col, Container, Row } from "react-bootstrap"; 9 | 10 | export default function Feed() { 11 | // console.log("Status :", LOGGED_IN) 12 | // const [user_info,setuser_info]=useState(localStorage.getItem("user")) 13 | // const [user_info,setuser_info]=useState(localStorage.getItem('user')) 14 | const [user_info, setuser_info] = useState( 15 | JSON.parse(localStorage.getItem("user")) 16 | ); 17 | const ReadMore = ({ children }) => { 18 | const text = children; 19 | const [isReadMore, setIsReadMore] = useState(true); 20 | const toggleReadMore = () => { 21 | setIsReadMore(!isReadMore); 22 | }; 23 | return ( 24 |

25 | {isReadMore ? text.slice(0, 15) : text} 26 | 27 | {isReadMore ? "...." : " show less"} 28 | 29 |

30 | ); 31 | }; 32 | // const [user_info,setuser_info]=useState('') 33 | // console.log(user_info) 34 | 35 | // const location = useLocation(); 36 | // useEffect(()=>{ 37 | // if(location.user==null){ 38 | // console.log("if statement",user_info) 39 | // // location.user='' 40 | // } 41 | // else{ 42 | // // console.log("Else",user_info) 43 | // console.log(location.user) 44 | // setuser_info(location.user) 45 | // console.log(user_info) 46 | // // console.log("Else statement",user_info) 47 | // } 48 | // },[]) 49 | // useEffect(()=>{ 50 | // console.log(location.user) 51 | // localStorage.setItem('user',JSON.stringify(location.user)) 52 | // setuser_info((localStorage.getItem('user'))) 53 | // },[]) 54 | // console.log("User info is :", location.user); 55 | setConstraint(true); 56 | // var user_info 57 | // if(NEW_USER===false){ 58 | // user_info=location.user 59 | // setUser(true) 60 | // } 61 | // console.log(constraint.LOGGED_IN); 62 | const [item, setitem] = useState(""); 63 | const [Found_item, setFound_item] = useState(); 64 | useEffect(() => { 65 | // console.log("Test"); 66 | Axios({ 67 | url: "https://lfs-backend.herokuapp.com/getitem", 68 | method: "GET", 69 | }) 70 | .then((response) => { 71 | // console.log(response.data.postitems); 72 | // console.log(response); 73 | let data = response.data.postitems; 74 | let items = []; 75 | let Found_items = []; 76 | data.reverse().map((item) => { 77 | let created_date = new Date(item.createdAt); 78 | // console.log(created_date); 79 | // console.log(created_date.getDate()+"/"+created_date.getMonth()+"/"+created_date.getFullYear()+" "+created_date.getHours()+":"+created_date.getMinutes()); 80 | let createdAt = 81 | created_date.getDate() + 82 | "/" + 83 | created_date.getMonth() + 84 | "/" + 85 | created_date.getFullYear() + 86 | " " + 87 | created_date.getHours() + 88 | ":" + 89 | created_date.getMinutes(); 90 | // category.postitem.findOne({createdBy: item.createdBy}).populate('name') 91 | // .exec(function (err, story) { 92 | // if (err) return err 93 | // console.log('The author is %s', story); 94 | // // prints "The author is Ian Fleming" 95 | // }); 96 | // console.log(item.itemPictures[0].img) 97 | if (item.type === "Lost" && item.status === true) { 98 | let user = false; 99 | if (item.createdBy === user_info._id) { 100 | user = true; 101 | } 102 | // console.log(item) 103 | // console.log("Lost item "+user+item.name) 104 | // console.log(`http://localhost:5000/${item.itemPictures[0].img}`) 105 | items.push( 106 | 109 | 110 | {/*
  • {item.name}
    • 111 |
  • {item.description}
    • */} 112 | 113 | 117 | 118 | 124 | Item :{item.name} 125 | 126 | {/* Type :{item.type} */} 127 | {item.description ? ( 128 | 134 | {" "} 135 | Description :{item.description} 136 | 137 | ) : ( 138 | "" 139 | )} 140 | 146 | Created at : {createdAt} 147 | 148 | {/* 149 | Created by :{item.createdBy} 150 | */} 151 | 152 | {/* 153 | Cras justo odio 154 | Dapibus ac facilisis in 155 | Vestibulum at eros 156 | 157 | 158 | Card Link 159 | Another Link 160 | */} 161 | 162 | 163 |     164 | ); 165 | } else { 166 | var user1 = false; 167 | if (item.createdBy === user_info._id) { 168 | user1 = true; 169 | } 170 | // console.log("Lost item "+user1+item.name) 171 | 172 | Found_items.push( 173 | 176 | 177 | {/*
  • {item.name}
    • 178 |
  • {item.description}
    • */} 179 | 180 | 184 | 185 | 191 | Item :{item.name} 192 | 193 | {/* Type :{item.type} */} 194 | {item.description ? ( 195 | 201 | {" "} 202 | Description :{item.description} 203 | 204 | ) : ( 205 | "" 206 | )} 207 | 213 | Created at : {createdAt} 214 | 215 | {/* 216 | Created by :{item.createdBy} 217 | */} 218 | 219 | {/* 220 | Cras justo odio 221 | Dapibus ac facilisis in 222 | Vestibulum at eros 223 | 224 | 225 | Card Link 226 | Another Link 227 | */} 228 | 229 | 230 |     231 | ); 232 | } 233 | }); 234 | setitem(items); 235 | setFound_item(Found_items); 236 | }) 237 | .catch((err) => { 238 | console.log("Error :", err); 239 | }); 240 | }, []); 241 | 242 | return ( 243 |
    244 |
    245 | 246 |

    252 | Welcome {user_info.firstname} 👋! 253 |

    254 |
    255 |
    256 | 257 |

    Lost items :

    258 |
    259 | {item} 260 |     261 |
    262 |
    263 | 264 | {Found_item ? ( 265 |
    266 |

    Found items :

    267 |
    268 | {Found_item} 269 |
    270 | ) : ( 271 | "" 272 | )} 273 |     274 |
    275 |
    276 | ); 277 | } 278 | -------------------------------------------------------------------------------- /src/Components/Found_item.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import axios from "axios"; 3 | import "bootstrap/dist/css/bootstrap.css"; 4 | import { Button, Modal, Form } from "react-bootstrap"; 5 | 6 | function Found_item() { 7 | const [itemname, setitemname] = useState(""); 8 | const [description, setdescription] = useState(""); 9 | const [itemimage, setitemimage] = useState(""); 10 | 11 | const [showF, setShowF] = useState(false); 12 | const token = window.localStorage.getItem("token"); 13 | 14 | const handleCloseF = () => { 15 | // const form = new FormData(); 16 | // form.append("name", itemname); 17 | // form.append("description", description); 18 | // form.append('itemPictures',itemname) 19 | const payload = { 20 | name: itemname, 21 | description: description, 22 | itemPictures: itemimage, 23 | }; 24 | // console.log(payload); 25 | axios({ 26 | url: "http://localhost:5000/founditem", 27 | method: "POST", 28 | data: payload, 29 | headers: { 30 | Authorization: token ? `Bearer ${token}` : "", 31 | }, 32 | withCredentials: true, 33 | credentials: "include", 34 | // url: "http://localhost:5000/login" 35 | }) 36 | .then((response) => { 37 | // console.log(response) 38 | }) 39 | .catch((err) => console.log(err)); 40 | 41 | setShowF(false); 42 | }; 43 | const handleShowF = () => setShowF(true); 44 | 45 | return ( 46 | <> 47 | 50 | 51 | 57 | 58 | Found item 59 | 60 | 61 |
    62 | 63 | Item name 64 | setitemname(e.target.value)} 69 | /> 70 | 71 | 72 | 73 | Description 74 | setdescription(e.target.value)} 79 | /> 80 | 81 | 82 | setitemimage(e.target.files[0])} 87 | /> 88 | 89 |
    90 |     91 | 92 | 95 | 98 | 99 |     100 | 101 | ); 102 | } 103 | 104 | export default Found_item; 105 | -------------------------------------------------------------------------------- /src/Components/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import Navbar from "./Navbar"; 3 | import "../css/landing.css"; 4 | import Axios from "axios"; 5 | import AOS from "aos"; 6 | import "aos/dist/aos.css"; 7 | // import image from "../img/undraw_lost_bqr2.svg"; 8 | // import {annotate} from "rough-notation" 9 | import image from "../img/lost-2.svg"; 10 | import developer from "../img/developer_outline I.svg"; 11 | import login from "../img/login-1.svg"; 12 | import list_item from "../img/list-item.svg"; 13 | import notification from "../img/notification.svg"; 14 | import github from "../img/github.svg"; 15 | import linkedin from "../img/linkedin.svg"; 16 | import instagram from "../img/instagram.svg"; 17 | import mail from "../img/mail.svg"; 18 | import feature from "../img/feature.svg"; 19 | 20 | // import image from "../img/earth.svg"; 21 | import { Container, Row, Button, Form } from "react-bootstrap"; 22 | export default function Home() { 23 | const [name, setName] = useState(""); 24 | const [email, setEmail] = useState(""); 25 | const [message, setMessage] = useState(""); 26 | // const postitem = () => { 27 | // if (localStorage.getItem("user") !== null) { 28 | // console.log("User already logged in !"); 29 | // } else { 30 | // console.log("Not logged in"); 31 | // } 32 | // }; 33 | const ref = useRef(); 34 | AOS.init(); 35 | 36 | // You can also pass an optional settings object 37 | // below listed default settings 38 | AOS.init({ 39 | // Global settings: 40 | disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function 41 | startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on 42 | initClassName: "aos-init", // class applied after initialization 43 | animatedClassName: "aos-animate", // class applied on animation 44 | useClassNames: false, // if true, will add content of `data-aos` as classes on scroll 45 | disableMutationObserver: false, // disables automatic mutations' detections (advanced) 46 | debounceDelay: 50, // the delay on debounce used while resizing window (advanced) 47 | throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced) 48 | 49 | // Settings that can be overridden on per-element basis, by `data-aos-*` attributes: 50 | offset: 120, // offset (in px) from the original trigger point 51 | delay: 0, // values from 0 to 3000, with step 50ms 52 | duration: 700, // values from 0 to 3000, with step 50ms 53 | easing: "ease", // default easing for AOS animations 54 | once: false, // whether animation should happen only once - while scrolling down 55 | mirror: false, // whether elements should animate out while scrolling past them 56 | anchorPlacement: "top-bottom", // defines which position of the element regarding to window should trigger the animation 57 | }); 58 | 59 | // const e=document.getElementById('.title-h') 60 | // const annotation=annotate(e,{ type: 'underline' }) 61 | // annotation.show() 62 | const sendMessage = () => { 63 | const data = { 64 | name, 65 | email, 66 | message, 67 | }; 68 | Axios({ 69 | method: "POST", 70 | url: "https://lfs-backend.herokuapp.com/sendmessage", 71 | data: data, 72 | }) 73 | .then((res) => { 74 | // console.log(res); 75 | }) 76 | .catch((err) => { 77 | console.log(err); 78 | }); 79 | setName(""); 80 | setEmail(""); 81 | setMessage(""); 82 | }; 83 | return ( 84 | <> 85 | 86 |
    87 |
    88 |
    89 |
    90 |

    Lost and Found

    91 |

    Lost it😕. List it📃. Find it🤩.

    92 | 101 |
    102 |
    103 | 104 |
    105 |
    106 | 111 |
    112 |
    113 |
    114 |
    115 |
    Working Demo 🚀
    116 | 122 |
    123 | 124 | {/*
    125 | 126 |
    */} 127 |
    128 | {/*
    129 |
    My Project Inspiration
    130 |

    Landy comes with multi-lingual support, all of the content is stored in the JSON files, so that you can manage the texts without having any prior knowledge in developing web applications using React.js.

    131 |
    */} 132 |
    133 | 134 |
    135 | 136 |
    137 | 138 |
    My Project Inspiration💡
    139 |

    140 | Colleges are the place where we come to home mentioning about 141 | losing our new earphone which might have kept in a desk but not 142 | sure if it's still there. This problem feels so relatable to most 143 | of the college students. A problem will still remain the same 144 | until someone builds a solution to it. 145 |

    146 | {/* */} 149 |     150 |     151 |
    152 | {/*
    153 | 154 |
    155 |
    156 |
    What makes this Unique?
    157 |
    158 |

    159 | Personal informartion are is something which should be taken 160 | utmost care and should be shared only to the right user. 161 |

    162 |
    163 |
    164 |
    165 | 166 |
    167 |
    168 |     169 |
    */} 170 |
    171 | 172 |
    173 |
    174 |
    How it works ⚒️?
    175 |
    176 |
    177 |
    178 | 183 |

    Create an account

    184 |

    Initially, you have to create an account to get started.

    185 | 186 | 189 | 190 |
    191 |
    192 | 197 |

    List Lost/Found Item

    198 |

    199 | List your item on the wall by filling certain details and 200 | image. That's it ! 201 |

    202 |
    203 |
    204 | 209 |

    Get Notified

    210 |

    211 | Once anyone posts an item, we make our registred users aware 212 | about the same by sending notification . 213 |

    214 |
    215 |
    216 |
    217 |     218 |
    219 |
    220 | 221 |
    222 |
    223 |
    Contact Form 📨📬
    224 |

    225 | If there is something you want to suggest or may be just a hello 226 | do reach out. 227 |

    228 |
    229 |
    230 |
    231 | Name : 232 | { 238 | setName(e.target.value); 239 | }} 240 | /> 241 | 242 | Email address : 243 | { 249 | setEmail(e.target.value); 250 | }} 251 | /> 252 | 253 | 254 | Message : 255 | { 261 | setMessage(e.target.value); 262 | }} 263 | /> 264 | 265 | 268 | 269 |
    270 |
    271 |     272 |
    273 | 274 |
    275 |
    276 | 281 | 282 | 283 | 288 | 289 | 290 | {/* 295 | 296 | */} 297 | 302 | 303 | 304 |
    305 |
    306 |

    Created with ❤️ using MERN by

    307 |

    308 | <E Swarup Kumar 309 | /> 310 |

    311 |
    Full Stack Developer
    312 | {/* 317 |
    swarupwho.codes
    318 |     */} 319 |
    320 |
    321 | Copyright © 2022 E Swarup Kumar. All rights reserved. 322 |
    323 |
    324 | {/*
    325 |
    326 |

    About the project

    327 |

    328 | 329 |

    330 |
    331 |
    */} 332 | 333 | ); 334 | } 335 | -------------------------------------------------------------------------------- /src/Components/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "../css/newSignup.css"; 3 | import axios from "axios"; 4 | import { useHistory } from "react-router-dom"; 5 | import Navbar from "../Components/Navbar"; 6 | import { Spinner } from "react-bootstrap"; 7 | // import developer from "../img/developer_outline I.svg"; 8 | 9 | // export default let [user,setUser]=useState(false) 10 | 11 | function Login() { 12 | const [loading, setloading] = useState(false); 13 | let [info, setinfo] = useState(""); 14 | const [user_info, setuser_info] = useState(""); 15 | const history = useHistory(); 16 | function login() { 17 | setloading(true); 18 | // console.log(setinfo) 19 | var payload = { 20 | email: document.getElementById("email").value, 21 | password: document.getElementById("password").value, 22 | }; 23 | axios({ 24 | url: "https://lfs-backend.herokuapp.com/login", 25 | method: "POST", 26 | data: payload, 27 | 28 | // url: "http://localhost:5000/login" 29 | }) 30 | .then((response) => { 31 | console.log("Response is :", response); 32 | if (response.data.user) { 33 | //Authentication done. 34 | setuser_info(response.data.user); 35 | localStorage.setItem("token", response.data.jwt_token); 36 | // console.log(response.data.user) 37 | localStorage.setItem("user", JSON.stringify(response.data.user)); 38 | history.push({ pathname: "/feed", user: response.data.user }); 39 | } else { 40 | setinfo(response.data); 41 | } 42 | // console.log("Response :",response) 43 | }) 44 | .catch((error) => { 45 | setloading(false); 46 | console.log(error); 47 | console.log("Error occured"); 48 | }); 49 | // .then((response)=>{ 50 | // console.log('Login Data sent') 51 | // this.setState({ 52 | // info:response.data 53 | // }) 54 | // // this.props.history.push('/feed') 55 | // }) 56 | // .catch(()=>{ 57 | // console.log('Error occured') 58 | // }) 59 | } 60 | 61 | // login = () => { 62 | 63 | // axios({ 64 | // method: "POST", 65 | // data: { 66 | // username: document.getElementById('username').value, 67 | // password: document.getElementById('password').value, 68 | // }, 69 | // withCredentials: true, 70 | // url: " http://localhost:5000/login", 71 | // }) 72 | // .then((res) => console.log(res)) 73 | // .catch((err)=>console.log(err)); 74 | // }; 75 | 76 | return ( 77 | <> 78 | 79 |
    80 | {/* */} 85 |
    86 |

    Log in

    87 |

    {info}

    88 | 95 | 102 | {/* */} 103 | 119 |

    120 | Don't have an account?{" "} 121 | 122 | Click here 123 | 124 |

    125 |
    126 |
    127 | 128 | ); 129 | } 130 | 131 | export default Login; 132 | -------------------------------------------------------------------------------- /src/Components/Lost_item.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import axios from "axios"; 3 | import lodash from "lodash"; 4 | import "bootstrap/dist/css/bootstrap.css"; 5 | import { useToasts } from "react-toast-notifications"; 6 | import { Button, Modal, Form, Spinner } from "react-bootstrap"; 7 | function LostItem() { 8 | const [show, setShow] = useState(false); 9 | const { addToast } = useToasts(); 10 | const token = window.localStorage.getItem("token"); 11 | const [loading, setloading] = useState(false); 12 | const [itemname, setitemname] = useState(""); 13 | const [description, setdescription] = useState(""); 14 | const [itemquestion, setitemquestion] = useState(""); 15 | const [itemimage, setitemimage] = useState([]); 16 | const [type, settype] = useState(""); 17 | // const [alertshow, setalertShow] = useState(true); 18 | 19 | const handleShow = () => setShow(true); 20 | const handleClose = () => { 21 | setloading(true); 22 | // const form = new FormData(); 23 | // form.append("name", itemname); 24 | // form.append("description", description); 25 | // form.append('itemPictures',itemname) 26 | // const payload = { 27 | // name: itemname, 28 | // description: description, 29 | // type:type, 30 | // itemPictures: itemimage, 31 | // }; 32 | // console.log(payload) 33 | if (itemname && description && type) { 34 | // console.log("Item image : ", itemimage); 35 | const info = new FormData(); 36 | info.append("name", itemname); 37 | info.append("description", description); 38 | info.append("question", itemquestion); 39 | info.append("type", type); 40 | itemimage.map((itemImage) => { 41 | info.append("itemPictures", itemImage, itemImage.name); 42 | }); 43 | 44 | axios({ 45 | url: "https://lfs-backend.herokuapp.com/postitem", 46 | method: "POST", 47 | data: info, 48 | headers: { 49 | Authorization: token ? `Bearer ${token}` : "", 50 | }, 51 | onUploadProgress: (ProgressEvent) => { 52 | console.log( 53 | "Upload progress: " + 54 | Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100) + 55 | "%" 56 | ); 57 | }, 58 | // url: "http://localhost:5000/login" 59 | }) 60 | .then((response) => { 61 | console.log(response); 62 | }) 63 | .then(() => { 64 | // eslint-disable-next-line no-lone-blocks 65 | addToast("Wohoo 🤩! Item listed successfully.", { 66 | appearance: "success", 67 | }); 68 | setitemname(""); 69 | setdescription(""); 70 | settype(""); 71 | setitemquestion(""); 72 | setitemimage([]); 73 | // console.log("Executed"); 74 | setloading(false); 75 | setShow(false); 76 | }) 77 | .catch((err) => { 78 | setloading(false); 79 | console.log(err); 80 | addToast("Oops 😞! Check internet connection or try again later.", { 81 | appearance: "error", 82 | }); 83 | }); 84 | } else { 85 | addToast("Did you missed any of the required fields 🙄?", { 86 | appearance: "error", 87 | }); 88 | } 89 | }; 90 | const temporaryShut = () => { 91 | addToast("New item listing has been disabled temporarily.", { 92 | appearance: "warning", 93 | }); 94 | setShow(false); 95 | }; 96 | return ( 97 |
    98 | 101 | 102 | setShow(false)} 105 | backdrop="static" 106 | keyboard={false} 107 | > 108 | 109 | Post item 110 | 111 | 112 |
    113 | 114 | 115 | Item name* 116 | 117 | setitemname(e.target.value)} 122 | /> 123 | 124 | 125 | 126 | 127 | Description* 128 | 129 | setdescription(e.target.value)} 134 | /> 135 | 136 | 137 | 138 | Enter a question based on the item 139 | setitemquestion(e.target.value)} 144 | /> 145 | 146 | 147 | 148 | 149 | Item type* 150 | 151 | settype(e.target.value)} 156 | > 157 | 158 | 159 | 160 | 161 | 162 | 163 | { 168 | // console.log(e.target.files) 169 | let { files } = e.target; 170 | lodash.forEach(files, (file) => { 171 | // console.log(file); 172 | setitemimage((item) => [...item, file]); 173 | }); 174 | }} 175 | multiple 176 | /> 177 | 178 |
    179 |     180 | 181 | 184 | {/* onClick={handleClose} */} 185 | 201 | 202 |     203 |
    204 | ); 205 | } 206 | 207 | export default LostItem; 208 | -------------------------------------------------------------------------------- /src/Components/MyListings.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { setConstraint } from "../constraints"; 3 | import Navbar from "../Components/Navbar"; 4 | import "../css/item_card.css"; 5 | import "../css/mylisting.css"; 6 | import Axios from "axios"; 7 | import { Card, Col, Container, Row, Badge } from "react-bootstrap"; 8 | 9 | export default function Feed() { 10 | // console.log("Status :", LOGGED_IN) 11 | // const [user_info,setuser_info]=useState(localStorage.getItem("user")) 12 | // const [user_info,setuser_info]=useState(localStorage.getItem('user')) 13 | // const [user_info, setuser_info] = useState( 14 | // JSON.parse(localStorage.getItem("user")) 15 | // ); 16 | // const [user_info,setuser_info]=useState('') 17 | // console.log(user_info) 18 | 19 | // const location = useLocation(); 20 | // useEffect(()=>{ 21 | // if(location.user==null){ 22 | // console.log("if statement",user_info) 23 | // // location.user='' 24 | // } 25 | // else{ 26 | // // console.log("Else",user_info) 27 | // console.log(location.user) 28 | // setuser_info(location.user) 29 | // console.log(user_info) 30 | // // console.log("Else statement",user_info) 31 | // } 32 | // },[]) 33 | // useEffect(()=>{ 34 | // console.log(location.user) 35 | // localStorage.setItem('user',JSON.stringify(location.user)) 36 | // setuser_info((localStorage.getItem('user'))) 37 | // },[]) 38 | // console.log("User info is :", location.user); 39 | setConstraint(true); 40 | // var user_info 41 | // if(NEW_USER===false){ 42 | // user_info=location.user 43 | // setUser(true) 44 | // } 45 | // console.log(constraint.LOGGED_IN); 46 | const [item, setitem] = useState(""); 47 | const [Found_item, setFound_item] = useState(); 48 | const ReadMore = ({ children }) => { 49 | const text = children; 50 | const [isReadMore, setIsReadMore] = useState(true); 51 | const toggleReadMore = () => { 52 | setIsReadMore(!isReadMore); 53 | }; 54 | return ( 55 |

    56 | {isReadMore ? text.slice(0, 15) : text} 57 | 58 | {isReadMore ? "...." : " show less"} 59 | 60 |

    61 | ); 62 | }; 63 | useEffect(() => { 64 | // console.log("Test"); 65 | Axios({ 66 | url: `https://lfs-backend.herokuapp.com/mylistings/${JSON.parse(localStorage.getItem("user"))._id}`, 67 | method: "GET", 68 | }) 69 | .then((response) => { 70 | // console.log(response.data.postitems); 71 | // console.log(response); 72 | let data = response.data.item; 73 | // console.log(response.data); 74 | let items = []; 75 | let Found_items = []; 76 | data.reverse().map((item) => { 77 | let created_date = new Date(item.createdAt); 78 | // console.log(date.toString()); 79 | let createdAt = 80 | created_date.getDate() + 81 | "/" + 82 | created_date.getMonth() + 83 | "/" + 84 | created_date.getFullYear() + 85 | " " + 86 | created_date.getHours() + 87 | ":" + 88 | created_date.getMinutes(); 89 | 90 | // var sec = created_date.getSeconds(); 91 | 92 | // category.postitem.findOne({createdBy: item.createdBy}).populate('name') 93 | // .exec(function (err, story) { 94 | // if (err) return err 95 | // console.log('The author is %s', story); 96 | // // prints "The author is Ian Fleming" 97 | // }); 98 | // console.log(item.itemPictures[0].img) 99 | 100 | // let user = false; 101 | // if (item.createdBy === user_info._id) { 102 | // user = true; 103 | // } 104 | // console.log("Lost item "+user+item.name) 105 | items.push( 106 | 107 | 108 | {/*
  • {item.name}
    • 109 |
  • {item.description}
    • */} 110 | 111 | 115 | 116 | {item.status ? ( 117 | <> 118 | {" "} 119 | 120 | Active 121 | 122 | 123 | ) : ( 124 | <> 125 | 126 | Inactive 127 | 128 | 129 | )} 130 | Item :{item.name} 131 | {/* Type :{item.type} */} 132 | {item.description ? ( 133 | 134 | Description :{item.description} 135 | 136 | ) : ( 137 | "" 138 | )} 139 | Type : {item.type} 140 | Created at : {createdAt} 141 | {/* 142 | Created by :{item.createdBy} 143 | */} 144 | 145 | {/* 146 | Cras justo odio 147 | Dapibus ac facilisis in 148 | Vestibulum at eros 149 | 150 | 151 | Card Link 152 | Another Link 153 | */} 154 | 155 | 156 |     157 | ); 158 | 159 | // var user1 = false; 160 | // if (item.createdBy === user_info._id) { 161 | // user1=true 162 | // } 163 | // console.log("Lost item "+user1+item.name) 164 | }); 165 | setitem(items); 166 | setFound_item(Found_items); 167 | }) 168 | .catch((err) => { 169 | console.log("Error :", err); 170 | }); 171 | }, []); 172 | 173 | return ( 174 |
    175 | 176 |
    177 |

    My Listings

    178 |
    179 |
    180 |
    181 | 182 | {item} 183 | 184 |
    185 |
    186 | ); 187 | } 188 | -------------------------------------------------------------------------------- /src/Components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { setConstraint } from "../constraints"; 3 | import "../css/Navbar.css"; 4 | import axios from "axios"; 5 | import LostItem from "./Lost_item"; 6 | import { ToastProvider } from "react-toast-notifications"; 7 | // import profile_icon from "../img/profile-icon.png"; 8 | // import { Dropdown } from "react-bootstrap"; 9 | // import Login from './Login' 10 | function Navbar() { 11 | const token = window.localStorage.getItem("token"); 12 | // console.log(props) 13 | // console.log("Status :", LOGGED_IN) 14 | // useEffect(()=>{ 15 | // axios({ 16 | // url:'checktoken', 17 | // method:"POST", 18 | // headers:{ 19 | // Authorization: token ? `Bearer ${token}` : "", 20 | // }, 21 | // }) 22 | // .then((res)=>{ 23 | // console.log(res) 24 | // }) 25 | // .catch((err)=>{ 26 | // console.log("400 : ",err) 27 | // }) 28 | // },[]) 29 | const signout = () => { 30 | // constraint.LOGGED_IN = false; 31 | setConstraint(false); 32 | 33 | console.log("Signed out !"); 34 | axios({ 35 | url: "https://lfs-backend.herokuapp.com/signout", 36 | method: "POST", 37 | headers: { 38 | Authorization: token ? `Bearer ${token}` : "", 39 | }, 40 | }) 41 | .then(localStorage.clear()) 42 | .catch((error) => { 43 | console.log(error); 44 | // console.log("Error occured"); 45 | }); 46 | }; 47 | return ( 48 | <> 49 |
    50 |
    51 | 52 |

    Lost and Found

    53 |     54 |
    55 | 56 |
    61 | 70 | 79 |
    80 |
    81 | 82 |
    83 | 84 |
    85 |     86 | {/* */} 87 | 142 |
    143 |
    144 | 145 | ); 146 | } 147 | 148 | export default Navbar; 149 | -------------------------------------------------------------------------------- /src/Components/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class NotFound extends React.Component{ 4 | render(){ 5 | return( 6 | <> 7 |

    Not Found

    8 | 9 | ) 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/Components/Response.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Navbar from "./Navbar"; 3 | import "../css/myresponses.css"; 4 | import Axios from "axios"; 5 | import { Button, Modal, Badge } from "react-bootstrap"; 6 | 7 | function Response() { 8 | const [responses, setResponse] = useState(""); 9 | const [showNumber, setShowNumber] = useState(false); 10 | const [PhoneNumber, setPhoneNumber] = useState(""); 11 | const handleCloseNumber = () => { 12 | setShowNumber(false); 13 | }; 14 | const handleShowNumber = (response) => { 15 | // console.log("Inside :", response); 16 | Axios({ 17 | url: `https://lfs-backend.herokuapp.com/getnumber/${response.belongsTo}`, 18 | method: "GET", 19 | }) 20 | .then((response) => { 21 | // console.log(response.data.Number); 22 | setPhoneNumber(response.data.Number); 23 | }) 24 | .finally(() => { 25 | setShowNumber(true); 26 | }) 27 | .catch((err) => { 28 | console.log(err); 29 | }); 30 | }; 31 | const temp = []; 32 | useEffect(() => { 33 | Axios({ 34 | url: `https://lfs-backend.herokuapp.com/myresponses/${ 35 | JSON.parse(localStorage.getItem("user"))._id 36 | }`, 37 | method: "GET", 38 | }) 39 | .then((res) => { 40 | // console.log(res) 41 | const responses = res.data.item; 42 | // console.log(responses) 43 | 44 | responses.reverse().map((response) => { 45 | let created_date = new Date(response.createdAt); 46 | let date = 47 | created_date.getDate() + 48 | "/" + 49 | created_date.getMonth() + 50 | "/" + 51 | created_date.getFullYear() + 52 | " " + 53 | created_date.getHours() + 54 | ":" + 55 | created_date.getMinutes(); 56 | // console.log(response); 57 | temp.push( 58 |
    59 |
    60 | Item ID : {response.itemId} 61 |
    62 |
    63 | Question :{" "} 64 | {response.question} 65 |
    66 |
    67 | Your Answer : 68 | {response.answer} 69 |
    70 |
    71 | Time : {date} 72 |
    73 | {response.response === "Moderation" ? ( 74 | //

    75 | // Please wait, it's in moderation. We will get back to you once 76 | // response recieved from the owner 77 | //

    78 |
    79 |
    80 | 81 | Moderation 82 | 83 |
    84 | 85 | ) : ( 86 |
    87 | {response.response === "Yes" ? ( 88 | <> 89 | {/*

    Approved !!

    */} 90 |
    91 | 92 | Approved 93 | 94 |
    95 | 101 | 102 | ) : ( 103 |
    104 | 105 | Opps !! 106 | 107 |
    108 | )} 109 | 110 | )} 111 |
    112 | ); 113 | }); 114 | setResponse(temp); 115 | }) 116 | .catch((err) => { 117 | console.log(err); 118 | }); 119 | }); 120 | 121 | return ( 122 | <> 123 | 124 | 125 | 126 |

    Here is the number : {PhoneNumber}

    127 |     128 | 129 | 130 | 133 | 136 | 137 |     138 |
    139 |

    Your responses

    140 |
    141 |
    142 |
    {responses}
    143 | 144 | ); 145 | } 146 | 147 | export default Response; 148 | -------------------------------------------------------------------------------- /src/Components/Signup.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "../css/newSignup.css"; 3 | import axios from "axios"; 4 | import Navbar from "../Components/Navbar"; 5 | 6 | export default class Signup extends Component { 7 | constructor() { 8 | super(); 9 | this.state = { 10 | info: "", 11 | }; 12 | } 13 | // state={ 14 | // username:'', 15 | // pass:'', 16 | // cpass:'' 17 | // } 18 | // handleChange=(event)=>{ 19 | // const target= event.target 20 | // const name=event.name 21 | // const value=event.value 22 | 23 | // console.log("Event is :"+event) 24 | // console.log("Event.target = "+target+"Event.name = "+name+"Event.value = "+value) 25 | 26 | // this.setState({ 27 | // [name]:value 28 | // }) 29 | // } 30 | submit = () => { 31 | this.setState({ 32 | info: "", 33 | }); 34 | // console.log("Inside Submit"); 35 | // console.log(this.state); 36 | const payload = { 37 | firstname: document.getElementById("firstname").value, 38 | lastname: document.getElementById("lastname").value, 39 | email: document.getElementById("email").value, 40 | number: document.getElementById("number").value, 41 | password: document.getElementById("password").value, 42 | cpassword: document.getElementById("cpassword").value, 43 | }; 44 | // console.log(payload.username) 45 | axios({ 46 | url: "https://lfs-backend.herokuapp.com/signup", 47 | method: "POST", 48 | data: payload, 49 | }) 50 | .then((response) => { 51 | // console.log("Response is :", response); 52 | this.setState({ 53 | info: response.data, 54 | }); 55 | // console.log("Data has been sent") 56 | if (response.data === "Done") { 57 | this.props.history.push("/log-in"); 58 | } 59 | // console.log(document.getElementById('password').value) 60 | // console.log(document.getElementById('cpassword').value) 61 | // if(document.getElementById('password').value==document.getElementById('cpassword').value){ 62 | // console.log('Client : Password did matched') 63 | // // this.props.history.push('/log-in') 64 | // } 65 | // else{ 66 | // document.getElementById('message').innerHTML='pass did not match' 67 | // console.log('Client : Password did not matched') 68 | // } 69 | // return 70 | }) 71 | .catch(() => { 72 | console.log("Error occured"); 73 | }); 74 | }; 75 | render() { 76 | // console.log("State is :"+ this.state) 77 | return ( 78 | <> 79 | 80 | 81 |
    82 |
    83 |

    Sign up

    84 |

    {this.state.info}

    85 |
    86 | { 92 | this.setState({ username: e.target.value }); 93 | }} 94 | /> 95 | { 101 | this.setState({ username: e.target.value }); 102 | }} 103 | /> 104 |
    105 |
    106 | { 112 | this.setState({ username: e.target.value }); 113 | }} 114 | /> 115 | { 121 | this.setState({ number: e.target.value }); 122 | }} 123 | /> 124 |
    125 | {/* {this.setState({username:e.target.value})}} /> */} 126 |
    127 | { 134 | this.setState({ password: e.target.value }); 135 | }} 136 | /> 137 | { 144 | this.setState({ cpassword: e.target.value }); 145 | }} 146 | /> 147 |
    148 | 151 |

    152 | Have an account?{" "} 153 | 154 | Click here 155 | 156 |

    157 |
    158 |
    159 | {/*
    160 |
    161 |

    Sign Up

    162 |

    {this.state.info}

    163 |
    164 |
    165 | 166 | {this.setState({firstname:e.target.value})}} 173 | /> 174 |
    175 | 176 |
    177 | 178 | {this.setState({lastname:e.target.value})}} 185 | /> 186 |
    187 |
    188 | 189 |
    190 | 191 | {this.setState({email:e.target.value})}} 198 | /> 199 |
    200 | 201 |
    202 |
    203 | 204 | {this.setState({password:e.target.value})}} 211 | /> 212 |
    213 |
    214 | 215 | {this.setState({cpassword:e.target.value})}} 222 | /> 223 |
    224 |
    225 | 226 | 229 |

    230 | Already registered login in? 231 |

    232 |
    233 |
    */} 234 | 235 | ); 236 | } 237 | } 238 | -------------------------------------------------------------------------------- /src/Components/privateroute.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect, Route } from 'react-router-dom'; 3 | 4 | const PrivateRoute=({component:Component,...rest})=>{ 5 | return { 6 | const token=window.localStorage.getItem('token') 7 | if(token){ 8 | return 9 | }else{ 10 | return 11 | } 12 | }} /> 13 | 14 | } 15 | 16 | export default PrivateRoute -------------------------------------------------------------------------------- /src/constraints.js: -------------------------------------------------------------------------------- 1 | let LOGGED_IN=false 2 | let NEW_USER=true 3 | function setConstraint(value) { 4 | LOGGED_IN = value; 5 | // console.log(LOGGED_IN) 6 | } 7 | const setUser=(value)=>{ 8 | NEW_USER=value 9 | } 10 | 11 | 12 | export {LOGGED_IN, setConstraint,NEW_USER,setUser} -------------------------------------------------------------------------------- /src/css/Navbar.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .navbar{ 6 | background-color: #1e1240f0; 7 | display: flex; 8 | justify-content: space-between; 9 | } 10 | .logo{ 11 | margin: 10px 0px 10px 10px; 12 | } 13 | .logo>h2{ 14 | color: white; 15 | font-size: 35px; 16 | } 17 | .logo>h2:hover{ 18 | text-decoration: none; 19 | } 20 | .signin{ 21 | color: white; 22 | display: flex; 23 | } 24 | 25 | .signin>ul{ 26 | margin: 15px 10px 0px 5px; 27 | font-size: 18px; 28 | cursor: pointer; 29 | } 30 | .postsignin{ 31 | display: flex; 32 | } 33 | .postsignin>ul{ 34 | margin: 6px 10px 0px 10px; 35 | font-size: 18px; 36 | cursor: pointer; 37 | display: flex; 38 | width: 345px; 39 | justify-content: space-around; 40 | } 41 | .signin>ul:hover{ 42 | color: black; 43 | } 44 | #test{ 45 | text-decoration:'none'; 46 | color: white; 47 | } 48 | .footer{ 49 | margin-top: 5%; 50 | background-color: #F1F2F3; 51 | display: flex; 52 | flex-direction: column; 53 | align-items: center; 54 | } 55 | .social-icon{ 56 | margin: 15px 0px; 57 | width: 200px; 58 | display: flex; 59 | justify-content: space-evenly; 60 | } 61 | .social-icon .github{ 62 | width: 33px; 63 | height: 33px; 64 | } 65 | .personal-info{ 66 | margin-bottom: 15px; 67 | } 68 | .personal-info>h6,h4,a{ 69 | text-align: center; 70 | } 71 | .personal-info>p{ 72 | margin-bottom: auto; 73 | } 74 | .icon{ 75 | width: 35px; 76 | height: 35px; 77 | } 78 | .symbol{ 79 | color: #898497; 80 | /* display: none; */ 81 | } 82 | -------------------------------------------------------------------------------- /src/css/Signup.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* margin: 0; */ 3 | /* padding: 0; */ 4 | /* font-family: sans-serif; */ 5 | /* background: #355C7D; */ 6 | /* background-image: url(img/background.jpg); */ 7 | } 8 | .Box-1{ 9 | width: 400px; 10 | padding: 20px; 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%,-50%); 15 | background: #2ddaa0; 16 | text-align: center; 17 | opacity: 0.6; 18 | border-radius: 3%; 19 | } 20 | /*.Box-1 h1{ 21 | color: white; 22 | text-transform: uppercase; 23 | font-weight: 500; 24 | } 25 | .Box-1 input[type = "text"],.Box-1 input[ type = "Password"],.Box-1 input[ type = "email"]{ 26 | border: 0; 27 | background: none; 28 | display: block; 29 | margin: 20px auto; 30 | text-align: center; 31 | border: 2px solid #03A9F4; 32 | padding: 14px 10px; 33 | width: 200px; 34 | outline: none; 35 | color: white; 36 | border-radius: 24px; 37 | transition: 0.25s; 38 | } 39 | 40 | .Box-1 input[type = "text"]:focus,.Box input[ type = "Password"]:focus{ 41 | width: 280px; 42 | border-color: #8BC34A; 43 | } 44 | .submit{ 45 | border: 0; 46 | background: none; 47 | display: block; 48 | margin: 20px auto; 49 | text-align: center; 50 | border: 2px solid #8BC34A; 51 | padding: 14px 40px; 52 | outline: none; 53 | color: white; 54 | border-radius: 24px; 55 | transition: 0.25s; 56 | cursor: pointer; 57 | } 58 | .submit:hover{ 59 | background: #8BC34A; 60 | }*/ 61 | .row1{ 62 | display: flex; 63 | } 64 | @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800'); 65 | 66 | * { 67 | box-sizing: border-box; 68 | } 69 | body { 70 | /* background: #1C8EF9 !important; */ 71 | min-height: 100vh; 72 | display: flex; 73 | font-weight: 400; 74 | font-family: 'Fira Sans', sans-serif; 75 | } 76 | 77 | h1,h2,h3,h4,h5,h6,label,span { 78 | font-weight: 500; 79 | font-family: 'Fira Sans', sans-serif; 80 | } 81 | 82 | body, html, .App, #root, .auth-wrapper { 83 | width: 100%; 84 | height: 100%; 85 | } 86 | 87 | .navbar-light { 88 | background-color: #ffffff; 89 | box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); 90 | } 91 | 92 | .auth-wrapper { 93 | display: flex; 94 | justify-content: center; 95 | flex-direction: column; 96 | text-align: left; 97 | } 98 | 99 | .auth-inner { 100 | width: 450px; 101 | margin: auto; 102 | background: #ffffff; 103 | box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); 104 | padding: 40px 55px 45px 55px; 105 | border-radius: 15px; 106 | transition: all .3s; 107 | } 108 | 109 | .auth-wrapper .form-control:focus { 110 | border-color: #167bff; 111 | box-shadow: none; 112 | } 113 | 114 | .auth-wrapper h3 { 115 | text-align: center; 116 | margin: 0; 117 | line-height: 1; 118 | padding-bottom: 20px; 119 | } 120 | 121 | .custom-control-label { 122 | font-weight: 400; 123 | } 124 | 125 | .forgot-password, 126 | .forgot-password a { 127 | text-align: right; 128 | font-size: 15px; 129 | padding-top: 10px; 130 | color: #050505; 131 | margin: 0; 132 | } 133 | 134 | .forgot-password a { 135 | color: #042a5c; 136 | } 137 | 138 | .form-group{ 139 | text-align: initial; 140 | } -------------------------------------------------------------------------------- /src/css/feed.css: -------------------------------------------------------------------------------- 1 | .title-border { 2 | border-bottom: 3px solid; 3 | width: 40px; 4 | padding-top: 15px; 5 | margin: auto; 6 | border-color: rgba(109,46,192,1); 7 | } 8 | 9 | /* .item-card{ 10 | box-shadow: 0px 5px 25px 0px rgb(204 204 204 / 75%); 11 | border-radius: 10px; 12 | display: inline-block; 13 | max-height: 427px; 14 | } 15 | 16 | .item-card>img{ 17 | max-height: 267px; 18 | border-radius: 10px 10px 0px 0px; 19 | } */ 20 | -------------------------------------------------------------------------------- /src/css/item_card.css: -------------------------------------------------------------------------------- 1 | .item-card{ 2 | box-shadow: 0px 5px 25px 0px rgb(204 204 204 / 75%); 3 | /* border:"2px solid black" */ 4 | border-radius: 10px; 5 | width: 17rem ; 6 | display: inline-block; 7 | max-height: 450px; 8 | } 9 | 10 | .item-card>img{ 11 | /* display: none; */ 12 | object-fit: contain; 13 | max-height: 267px; 14 | border-radius: 10px 10px 0px 0px; 15 | } 16 | 17 | .card-body{ 18 | text-align: left; 19 | width: max-content; 20 | } 21 | .item-desc{ 22 | display: none; 23 | } -------------------------------------------------------------------------------- /src/css/itempage.css: -------------------------------------------------------------------------------- 1 | @import '~react-responsive-carousel/lib/styles/carousel.min.css'; 2 | 3 | .itempage{ 4 | display: flex; 5 | margin: 20px 20px 20px 0px; 6 | /* flex-wrap: wrap; */ 7 | } 8 | .carousel{ 9 | width: 65%; 10 | /* border: 1px solid black; */ 11 | } 12 | .carousel .thumbs-wrapper{ 13 | text-align: center; 14 | } 15 | .itemDescription{ 16 | display: flex; 17 | flex-direction: column; 18 | border: 1px solid black; 19 | /* box-shadow: 0px 5px 25px 0px rgb(204 204 204 / 75%); */ 20 | background-color: #F3F3F3; 21 | } 22 | .details{ 23 | color: black; 24 | } 25 | .attributes{ 26 | color: #777777; 27 | font-size: 1.35rem; 28 | margin-left: 5px; 29 | } 30 | .ed-button{ 31 | margin: 10px 0px ; 32 | } 33 | .ed-button>button{ 34 | /* margin-right: 5px; */ 35 | margin-left: 5px; 36 | } 37 | 38 | .carousel.carousel-slider{ 39 | width: 60%; 40 | margin: auto; 41 | } 42 | .carousel .carousel{ 43 | margin: auto; 44 | } 45 | 46 | .responses{ 47 | margin: 10px 10px; 48 | display: inline-block; 49 | } 50 | 51 | @media(max-width:480px){ 52 | .carousel{ 53 | width: 100%; 54 | } 55 | .itempage{ 56 | flex-wrap: wrap; 57 | } 58 | } -------------------------------------------------------------------------------- /src/css/landing.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap"); 2 | .main { 3 | display: flex; 4 | flex-direction: column; 5 | flex-wrap: wrap; 6 | /* height: 100vh; */ 7 | } 8 | .intro { 9 | display: flex; 10 | flex-direction: row; 11 | justify-content: space-between; 12 | flex-wrap: wrap-reverse; 13 | /* height: 75hv; */ 14 | } 15 | .part-1 { 16 | height: 500px; 17 | width: 350px; 18 | position: relative; 19 | /* border: 3px solid green; */ 20 | } 21 | /* .part-2 { 22 | width: 500px; 23 | height: 500px; 24 | } */ 25 | 26 | .title { 27 | position: absolute; 28 | top: 50%; 29 | transform: translate(8%, -50%); 30 | } 31 | 32 | .title > h1 { 33 | font-size: 60px; 34 | font-weight: 600; 35 | font-family: "Staatliches", cursive; 36 | } 37 | 38 | .title > p { 39 | font-size: 26px; 40 | font-family: "Staatliches", cursive; 41 | } 42 | 43 | .image { 44 | margin-right: 25px; 45 | } 46 | 47 | .button { 48 | /* background-color: #ddd; */ 49 | border: 2px solid black; 50 | color: black; 51 | padding: 10px 20px; 52 | text-align: center; 53 | text-decoration: none; 54 | display: inline-block; 55 | margin: 4px 2px; 56 | cursor: pointer; 57 | border-radius: 16px; 58 | } 59 | .post-item { 60 | align-self: center; 61 | /* margin-bottom: 2%; */ 62 | } 63 | .About { 64 | background-color: #7ae1f182; 65 | } 66 | .About > h1 { 67 | margin-left: 2%; 68 | font-family: "Staatliches", cursive; 69 | } 70 | 71 | .demo_video { 72 | display: flex; 73 | align-self: center; 74 | flex-direction: column; 75 | margin: 50px 0px; 76 | } 77 | .demo_video > .section-heading { 78 | color: #2e186a; 79 | margin: auto; 80 | font-size: 2.575rem; 81 | padding: 0.5rem 0; 82 | /* font-size: 30px; */ 83 | font-family: "Staatliches", cursive; 84 | border-bottom: 3px solid #2e186a; 85 | } 86 | 87 | .yt_video { 88 | margin-top: 15px; 89 | margin-bottom: 70px; 90 | } 91 | 92 | .total-inspiration { 93 | display: flex; 94 | flex-wrap: wrap; 95 | justify-content: center; 96 | margin-top: -5%; 97 | } 98 | 99 | .inspiration { 100 | /* margin: 5% 0px; */ 101 | display: flex; 102 | justify-content: center; 103 | margin: auto; 104 | /* width: 500px; */ 105 | max-width: 700px; 106 | text-align: center; 107 | font-size: 1.125rem; 108 | } 109 | 110 | .section-heading { 111 | color: #2e186a; 112 | margin: auto; 113 | font-size: 2.575rem; 114 | padding: 0.5rem 0; 115 | /* font-size: 30px; */ 116 | font-family: "Staatliches", cursive; 117 | border-bottom: 3px solid #2e186a; 118 | } 119 | 120 | .inspiration > p { 121 | padding: 1.5rem 0; 122 | } 123 | 124 | .btn-custom { 125 | margin: auto; 126 | background-color: #2e186a; 127 | color: white; 128 | margin: 2%; 129 | } 130 | .btn-custom:hover { 131 | color: white; 132 | } 133 | /* .custom:hover{ 134 | background-color: #392277; 135 | } */ 136 | .total-about { 137 | margin-top: 10%; 138 | } 139 | .total-about > .section-heading { 140 | text-align: center; 141 | } 142 | 143 | .about-heading { 144 | width: max-content; 145 | margin: auto; 146 | } 147 | 148 | .about-card { 149 | display: flex; 150 | flex-wrap: wrap; 151 | padding: 1.5rem 0; 152 | justify-content: space-around; 153 | } 154 | 155 | .info { 156 | text-align: center; 157 | box-shadow: 0px 5px 25px 0px rgb(204 204 204 / 75%); 158 | max-width: 385px; 159 | } 160 | 161 | p { 162 | color: rgb(52, 61, 72); 163 | font-size: 1.125rem; 164 | } 165 | 166 | .total-contact-form { 167 | display: flex; 168 | align-items: center; 169 | flex-wrap: wrap; 170 | margin-top: 10%; 171 | } 172 | 173 | .contact-title > .section-heading { 174 | width: fit-content; 175 | margin: 0; 176 | } 177 | .contact-title { 178 | margin: 0px 25px; 179 | } 180 | 181 | .contact-form { 182 | flex-grow: 2; 183 | margin-right: 25px; 184 | } 185 | 186 | .contact-title > p { 187 | max-width: 560px; 188 | } 189 | .developer-img { 190 | width: 500px; 191 | height: 500px; 192 | } 193 | @media (max-width: 1020px) { 194 | .image { 195 | display: none; 196 | } 197 | } 198 | 199 | @media (max-width: 480px) { 200 | .developer-img { 201 | /* display: none; */ 202 | width: 350px; 203 | height: 350px; 204 | } 205 | } 206 | 207 | @media (max-width: 800px) { 208 | .info { 209 | margin: 10px 0px; 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /src/css/mylisting.css: -------------------------------------------------------------------------------- 1 | .listing-title{ 2 | margin-top: 5px; 3 | text-align: center; 4 | } -------------------------------------------------------------------------------- /src/css/myresponses.css: -------------------------------------------------------------------------------- 1 | .response-title{ 2 | text-align: center; 3 | margin-top: 5px; 4 | } 5 | 6 | .responses-list{ 7 | margin-top: 10px; 8 | display: flex; 9 | flex-wrap: wrap; 10 | } 11 | .responese-card{ 12 | border: 1px solid black; 13 | display: flexbox; 14 | padding: 10px 10px; 15 | margin: 0px 10px; 16 | } -------------------------------------------------------------------------------- /src/css/newSignup.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | /* background: #355C7D; */ 6 | /* color: white; */ 7 | /* background-image: url(img/background.jpg); */ 8 | } 9 | .Box-1{ 10 | width: 500px; 11 | padding: 25px; 12 | position: absolute; 13 | top: 56%; 14 | left: 50%; 15 | transform: translate(-50%,-50%); 16 | background: #1e1240f0; 17 | text-align: center; 18 | opacity: 1; 19 | border-radius: 3%; 20 | } 21 | .Box-1 h1{ 22 | color: white; 23 | text-transform: uppercase; 24 | font-weight: 500; 25 | } 26 | .Box-1 input[type = "email"],.Box-1 input[ type = "Password"],.Box-1 input[ type = "number"],.Box-1 input[ type = "text"]{ 27 | border: 0; 28 | background: none; 29 | display: block; 30 | margin: 20px auto; 31 | text-align: center; 32 | border: 2px solid #03A9F4; 33 | padding: 14px 10px; 34 | width: 200px; 35 | outline: none; 36 | color: white; 37 | border-radius: 24px; 38 | transition: 0.25s; 39 | } 40 | 41 | .Box-1 input[type = "email"]:focus,.Box-1 input[ type = "Password"]:focus,.Box-1 input[ type = "text"]:focus{ 42 | width: 280px; 43 | border-color: #8BC34A; 44 | } 45 | .submit{ 46 | border: 0; 47 | background: none; 48 | display: block; 49 | margin: 10px auto; 50 | text-align: center; 51 | border: 2px solid #8BC34A; 52 | padding: 14px 40px; 53 | outline: none; 54 | color: white; 55 | border-radius: 24px; 56 | transition: 0.25s; 57 | cursor: pointer; 58 | } 59 | .submit:hover{ 60 | background: #8BC34A; 61 | } 62 | .row1{ 63 | display: flex; 64 | } 65 | .signup{ 66 | display: flex; 67 | } 68 | 69 | @media (max-width: 480px){ 70 | .Box-1{ 71 | width: 380px; 72 | } 73 | .row1{ 74 | display: flex; 75 | flex-direction: column; 76 | } 77 | } -------------------------------------------------------------------------------- /src/img/Santorini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/src/img/Santorini.jpg -------------------------------------------------------------------------------- /src/img/developer_outline I.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/feature.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/list-item.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/login-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/login-2.svg: -------------------------------------------------------------------------------- 1 | mobile login -------------------------------------------------------------------------------- /src/img/lost-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/lost.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/notification.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/profile-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eswarupkumar/lfs-frontend/8d8a47462a165e4f33ab4374b7bb18d78aa30cfa/src/img/profile-icon.png -------------------------------------------------------------------------------- /src/img/undraw_lost_bqr2.svg: -------------------------------------------------------------------------------- 1 | lost -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import "../node_modules/bootstrap/dist/css/bootstrap.css" 5 | 6 | ReactDOM.render( 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | --------------------------------------------------------------------------------