├── .env ├── .gitignore ├── README.md ├── Vercel.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.css ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── server.js └── src ├── App.js ├── CSS ├── Corosal.css ├── HomeIcon.css ├── checkbox.css ├── menu.css ├── search.css ├── signin.css ├── signup.css └── team.css ├── Routes.js ├── admin ├── AddCategory.js ├── AddProduct.js ├── ManageCategory.js ├── ManageProducts.js ├── Orders.js ├── UpdateProduct.js ├── apiAdmin.js └── updateCategory.js ├── auth ├── AdminRoute.js ├── PrivateRoute.js └── index.js ├── config.js ├── core ├── About.js ├── Card.js ├── Cart.js ├── Checkbox.js ├── Checkout.js ├── Contact.js ├── Corosal.js ├── Footer1.js ├── FooterPage.js ├── Galleryimg.js ├── GalleryimgHome.js ├── Home.js ├── HomeIcon.js ├── Layout.js ├── Menu.js ├── Photos.js ├── Product.js ├── RadioBox.js ├── Search.js ├── Shop.js ├── ShowImage.js ├── StarRating.js ├── Team.js ├── apiCore.js ├── cartHelpers.js └── fixedPrices.js ├── image ├── about.jpg ├── about.png ├── desk.jpg ├── login │ ├── avatar.png │ ├── background.jpg │ └── side.jpg ├── resort1.jpg ├── resort2.jpg ├── resort3.jpg ├── resort4.jpg ├── resort5.jpg ├── resort6.jpg ├── signin.jpg ├── signup │ ├── background.jpg │ ├── bg2.jpeg │ └── signup.jpg └── team │ ├── bg.jpeg │ ├── img-top1.jpeg │ ├── img-top2.jpeg │ ├── img-top3.jpeg │ ├── img1.jpeg │ ├── img2.jpeg │ └── img3.jpeg ├── index.js ├── styles.css └── user ├── AdminDashboard.js ├── Profile.js ├── Signin.js ├── Signup.js ├── UserDashboard.js └── apiUser.js /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL=http://localhost:5000/api/ -------------------------------------------------------------------------------- /.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 | .env 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Project Name : - TravelYaari** 2 | 3 | ![](https://img.shields.io/badge/MongoDB-4.2.13-003300?style=flat-circle&logo=MongoDB) 4 | ![](https://img.shields.io/badge/ExpressJS-4.17.1-000000?style=flat-circle&logo=Express) 5 | ![](https://img.shields.io/badge/React-17.0.1-87CEEB?style=flat-circle&logo=react&logoColor=309698) 6 | ![](https://img.shields.io/badge/NodeJS-16.0.0-009900?style=flat-circle&logo=node.js) 7 | ![](https://img.shields.io/npm/v/npm.svg?logo=npm) 8 | ![](https://img.shields.io/github/license/shsarv/TravelYaari-react?style=flat-circle) 9 | ![](https://img.shields.io/github/repo-size/shsarv/TravelYaari-react) 10 | ![](https://img.shields.io/tokei/lines/github/shsarv/TravelYaari-react?color=orange&logoColor=blue&style=flat-circle) 11 | 12 | This Project is live at --------> **[https://travelyaari.herokuapp.com](https://travelyaari.herokuapp.com)** 13 | 14 | 15 |
16 | 17 | 18 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 19 | 20 |
Available Scripts 21 | 22 | In the project directory, you can run: 23 | 24 | ### `npm start` 25 | 26 | Runs the app in the development mode.\ 27 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 28 | 29 | The page will reload if you make edits.\ 30 | You will also see any lint errors in the console. 31 | 32 | ### `npm test` 33 | 34 | Launches the test runner in the interactive watch mode.\ 35 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 36 | 37 | ### `npm run build` 38 | 39 | Builds the app for production to the `build` folder.\ 40 | It correctly bundles React in production mode and optimizes the build for the best performance. 41 | The build is minified and the filenames include the hashes.\ 42 | Your app is ready to be deployed! 43 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 44 |
45 | 46 | Overview: - 47 | 48 | TravelYaari presents a mesmerizing, fully featured travel website that awakens the travel enthusiast within. Vibrant imagery, expertly curated destination highlights, and seamless booking experiences within your budget will leave you spellbound. Enjoy personalized customer support, flexible payment options, and tailored booking schedules that fit your lifestyle. Immerse yourself in captivating virtual tours through stunning videos and images, making your dream getaway an unforgettable reality. 49 | 50 | PROBLEM STATEMENT :- 51 | 52 | Travel enthusiasts worldwide face the daunting challenge of discovering the perfect destinations, often struggling to find the crème de la crème of places to visit. Our innovative travel website solves this problem by showcasing an unparalleled selection of top-tier destinations, expertly curated to make your travel dreams accessible and stress-free. 53 | 54 | OBJECTIVE:- 55 | 56 | Our mission is to craft an exceptional, cutting-edge travel website using advanced MERN STACK technologies, delivering: Unforgettable, on-time, and budget-friendly excursions that exceed your wildest dreams Enthusiastically satisfied customers, every time, without exception 57 | 58 | 59 | FEATURES:- 60 | 61 | - Wishlist Cart: Collect and cherish your favorite destinations 62 | - Place Pagination: Effortlessly explore, discover, and get lost in new places 63 | - User Profile: Manage your bookings, preferences, and travel journal 64 | - Admin Features: 65 | - Place Management: Curate, update, and showcase destination listings 66 | - User Management: Monitor, support, and delight registered users 67 | - Booked Order Details: Track, manage, and perfect bookings 68 | - Mark Booking Orders: Stay organized, on top of bookings, and in control 69 | - Checkout Process: Streamlined, secure, and hassle-free shipping and payment options 70 | - Payment Integration: Robust, reliable, and trusted PayPal and credit card transactions 71 | - Database: Rock-solid storage for places and user data, ensuring seamless performance 72 | 73 | 74 | **TECHNOLOGIES :-** 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | ### How to run the project 🚀: 85 | 86 | 1. Open the `Terminal`. 87 | 2. Clone the repository by entering `$ git clone https://github.com/shsarv/TravelYaari-react.git `. 88 | 3. Ensure that `NodeJS` and `npm` are installed on the system. 89 | 4. change the diectory to repository name using `$ cd TravelYaari-react`. 90 | 4. Create a `.env` file and write `REACT_APP_API_URL='your backend api url'`. look for backend of the project [here](https://github.com/shsarv/TravelYaari-api). 91 | 5. install the dependencies by executing the follwing command: `$ npm install` or `$ npm install --openssl-legacy-provide` for base support. 92 | 6. To run the React project. execute `$npm start`. and it will point to the `localhost` server with the port `3000`. 93 | 8. Enter the `IP Address: http://localhost:3000` on a web browser and use the application. make sure that your backend api is running. 94 | 95 | 96 | -------------------- 97 | ## Help 98 | 99 | ### Solution in case of any conflicts. 100 | 101 | 1. Try to downgrade node version to 17 or 14. 102 | 2. install dependencies with `$ npm install --openssl-legacy-provide`. 103 | 3. you may get some error while installing the dependencies, Look it to the CMD and search for specific issues on Stackoverflow. 104 | 4. In case of any further issue, Raise an issue on github. 105 | 106 | ----------------------------- 107 | 108 | ### Dependencies 109 | 110 | The following dependencies can be found in [package.json](https://github.com/shsarv/TravelYaari-react/blob/master/package.json): 111 | 112 | ### Contributors 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |

Sarvesh Kumar Sharma
🖋 📖💻
Sachi Tripathi
💻
Satyam Kumar Jha
💻
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /Vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "builds":[ 3 | { 4 | "src":"*.js", 5 | "use":"@vercel/node" 6 | } 7 | ], 8 | "routes":[ 9 | { 10 | "src":"/(.*)", 11 | "dest":"/" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecommerce-front", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.10", 7 | "@testing-library/react": "^11.2.6", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bootstrap": "^4.6.0", 10 | "braintree-web": "^3.76.2", 11 | "braintree-web-drop-in-react": "^1.2.1", 12 | "compression": "^1.7.4", 13 | "dotenv": "^8.2.0", 14 | "express": "^4.17.1", 15 | "mdbreact": "^5.0.2", 16 | "moment": "^2.29.1", 17 | "photoswipe": "^4.1.3", 18 | "pm2": "^4.5.6", 19 | "query-string": "^7.0.0", 20 | "react": "^17.0.2", 21 | "react-bootstrap": "^1.5.2", 22 | "react-dom": "^17.0.2", 23 | "react-images": "^1.2.0-beta.6", 24 | "react-loading-overlay": "^1.0.1", 25 | "react-modal-video": "^1.2.6", 26 | "react-photo-gallery": "^8.0.0", 27 | "react-photoswipe-gallery": "^1.3.6", 28 | "react-rating-stars-component": "^2.2.0", 29 | "react-responsive-carousel": "^3.2.18", 30 | "react-router-dom": "^5.2.0", 31 | "react-scripts": "^4.0.3", 32 | "sass": "^1.77.8", 33 | "web-vitals": "^1.1.1" 34 | }, 35 | "scripts": { 36 | "start": "react-scripts --openssl-legacy-provider start", 37 | "build": "react-scripts build", 38 | "test": "react-scripts test", 39 | "eject": "react-scripts eject" 40 | }, 41 | "eslintConfig": { 42 | "extends": [ 43 | "react-app", 44 | "react-app/jest" 45 | ] 46 | }, 47 | "browserslist": { 48 | "production": [ 49 | ">0.2%", 50 | "not dead", 51 | "not op_mini all" 52 | ], 53 | "development": [ 54 | "last 1 chrome version", 55 | "last 1 firefox version", 56 | "last 1 safari version" 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shsarv/TravelYaari-react/55dad542afbc92470507da517485ab2c465cd61f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.css: -------------------------------------------------------------------------------- 1 | html{ 2 | scrollbar-width: none; 3 | } 4 | ::-webkit-scrollbar { 5 | display: none; 6 | } 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | font-family: Arial, Helvetica, sans-serif; 11 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | TravelYaari 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shsarv/TravelYaari-react/55dad542afbc92470507da517485ab2c465cd61f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shsarv/TravelYaari-react/55dad542afbc92470507da517485ab2c465cd61f/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 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const compression = require('compression'); 3 | const path = require('path'); 4 | const app = express(); 5 | 6 | app.use(compression()); 7 | app.use(express.static(path.join(__dirname, 'build'))); 8 | 9 | app.get('*', function(req, res) { 10 | res.sendFile(path.join(__dirname, 'build', 'index.html')); 11 | }); 12 | 13 | const PORT = process.env.PORT || 3000; 14 | 15 | app.listen(PORT, () => { 16 | console.log(`App is running on port ${PORT}`); 17 | }); 18 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const App = () =>
Hello from React
; 4 | 5 | export default App; 6 | -------------------------------------------------------------------------------- /src/CSS/Corosal.css: -------------------------------------------------------------------------------- 1 | #corosal{ 2 | width: 100%; 3 | margin:0.2rem 0rem 0rem; 4 | padding: 0%; 5 | } 6 | 7 | .corosal-caption-center{ 8 | position: absolute; 9 | top: 0; 10 | display: -webkit-box; 11 | display: -moz-box; 12 | display: -ms-flexbox; 13 | display: -webkit-flex; 14 | display: flex; 15 | -webkit-box-align: center; 16 | -moz-box-align: center; 17 | -ms-flex-align: center; 18 | -webkit-align-items: center; 19 | align-items: center; 20 | height: 100%; 21 | justify-content: center; 22 | 23 | } -------------------------------------------------------------------------------- /src/CSS/HomeIcon.css: -------------------------------------------------------------------------------- 1 | .fa-map-marker,.fa-building,.fa-plane{ 2 | font-size: 70px; 3 | color: #4caf50; 4 | } 5 | .homeicon-shadow{ 6 | box-shadow: 1px 2px 1px 2px rgb(194, 193, 193); 7 | } 8 | .homeicon-shadow:hover{ 9 | box-shadow: 1px 4px 1px 3px rgb(182, 180, 180); 10 | } -------------------------------------------------------------------------------- /src/CSS/checkbox.css: -------------------------------------------------------------------------------- 1 | .category-toolbar input[type='radio']{ 2 | opacity: 0 !important; 3 | position: fixed; 4 | width: 0; 5 | } 6 | /* .category-toolbar label{ 7 | display: inline-block; 8 | background-color: green; 9 | padding: 10px 20px ; 10 | font-size: 16px; 11 | border: 2px solid #444; 12 | border-radius: 4px; 13 | -webkit-border-radius: 4px; 14 | -moz-border-radius: 4px; 15 | -ms-border-radius: 4px; 16 | -o-border-radius: 4px; 17 | } */ 18 | 19 | .category-toolbar label:hover{ 20 | background-color: #02a308 !important; 21 | } 22 | .category-toolbar{ 23 | box-shadow: 1px 2px rgb(216, 214, 214) !important; 24 | } -------------------------------------------------------------------------------- /src/CSS/menu.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Piedra&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Yeseva+One&display=swap'); 3 | 4 | .navbar-dark{ 5 | background-color: #4caf50 !important; 6 | min-height: 65px; 7 | -webkit-box-shadow: 0 8px 6px -6px rgb(59, 58, 58); 8 | -moz-box-shadow: 0 8px 6px -6px rgb(65, 62, 62); 9 | box-shadow: 0 8px 6px -6px rgb(43, 42, 42); 10 | } 11 | 12 | #my-nav .navbar-brand, 13 | .navbar-brand:hover{ 14 | color: white !important; 15 | font-size: 32px !important; 16 | font-weight: 400; 17 | padding: 0 15px; 18 | height: 65px; 19 | line-height: 65px; 20 | font-family: 'Piedra', cursive !important; 21 | 22 | } 23 | #my-nav .navbar-toggler { 24 | float: left !important; 25 | } 26 | #my-nav .navbar-toggler { 27 | margin-top: 15px; 28 | padding: 9px 10px !important; 29 | } 30 | 31 | #my-nav .nav-item{ 32 | padding: 0.2rem !important; 33 | margin: 0rem 0.2rem !important; 34 | font-weight: bold; 35 | font-family: 'Yeseva One', cursive !important; 36 | } 37 | #my-nav .nav-item:hover{ 38 | background-color: #38aa3b !important; 39 | } 40 | @media (min-width : 766px) { 41 | #my-nav .navbar-brand { 42 | position: absolute; 43 | transform: translateX(-17%); 44 | -webkit-transform: translateX(-17%); 45 | -moz-transform: translateX(-17%); 46 | -ms-transform: translateX(-17%); 47 | -o-transform: translateX(-17%); 48 | left: 15%; 49 | } 50 | #my-nav .navbar-collapse{ 51 | margin: 0; 52 | margin-right: 8%; 53 | padding: 0; 54 | } 55 | } 56 | @media (max-width: 765px) { 57 | #my-nav .navbar-collapse { 58 | position: fixed; 59 | top: 85px; 60 | left: 0; 61 | padding-left: 15px; 62 | padding-right: 15px; 63 | padding-bottom: 15px; 64 | width: 35%; 65 | height: 60%; 66 | background-color: #4caf50; 67 | border: none; 68 | text-align: center; 69 | z-index:1000; 70 | } 71 | #my-nav .navbar-collapse.collapsing { 72 | left: -75%; 73 | transition: height 0s ease; 74 | -webkit-transition: height 0s ease; 75 | -moz-transition: height 0s ease; 76 | -ms-transition: height 0s ease; 77 | -o-transition: height 0s ease; 78 | } 79 | #my-nav .navbar-collapse.show { 80 | left: 0; 81 | transition: left 500ms ease-in-out; 82 | -webkit-transition: left 500ms ease-in-out; 83 | -moz-transition: left 500ms ease-in-out; 84 | -ms-transition: left 500ms ease-in-out; 85 | -o-transition: left 500ms ease-in-out; 86 | } 87 | #my-nav .navbar-toggler.collapsed~.navbar-collapse { 88 | transition: left 500ms ease-in-out; 89 | -webkit-transition: left 500ms ease-in-out; 90 | -moz-transition: left 500ms ease-in-out; 91 | -ms-transition: left 500ms ease-in-out; 92 | -o-transition: left 500ms ease-in-out; 93 | } 94 | #my-nav .navbar-brand { 95 | position: absolute; 96 | transform: translateX(-50%); 97 | -webkit-transform: translateX(-50%); 98 | -moz-transform: translateX(-50%); 99 | -ms-transform: translateX(-50%); 100 | -o-transform: translateX(-50%); 101 | left: 50%; 102 | font-family: 'Piedra', cursive !important; 103 | } 104 | #my-nav .navbar-toggler { 105 | border-color: rgb(248, 246, 248) !important; 106 | background-color: #4caf50 !important; 107 | 108 | } 109 | #my-nav .navbar-toggler:active { 110 | border: none !important; 111 | background-color: rgb(12, 240, 42) !important; 112 | } 113 | #my-nav .navbar-toggler:hover { 114 | border: none !important; 115 | background-color: rgb(118, 216, 147) !important; 116 | } 117 | #my-nav .navbar-toggler:visited { 118 | border: none !important; 119 | background-color: rgb(6, 155, 155) !important; 120 | } 121 | #my-nav .nav-item{ 122 | padding: 0.4rem 1rem !important; 123 | margin: 0.2rem !important; 124 | border-bottom: solid white 2px; 125 | } 126 | } 127 | 128 | .dropdownid:hover{ 129 | color: #4caf50 !important; 130 | } 131 | #dropdown-basic{ 132 | background-color: #4caf50 !important; 133 | border: none !important; 134 | box-shadow: none !important; 135 | margin: 0% !important; 136 | padding-top: 0% important; 137 | /* padding: 0% !important; */ 138 | } 139 | #dropdown-basic:hover{ 140 | background-color:#38aa3b !important ; 141 | } 142 | 143 | 144 | -------------------------------------------------------------------------------- /src/CSS/search.css: -------------------------------------------------------------------------------- 1 | #search{ 2 | background-color: #4caf50 !important; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /src/CSS/signin.css: -------------------------------------------------------------------------------- 1 | 2 | .login-account-wall { 3 | background-color: rgba(41, 51, 51, 0.473); 4 | } 5 | 6 | #login-intro,#login-intro-form { 7 | color: white; 8 | background-image: url(./../image/login/side.jpg); 9 | } 10 | 11 | @media(max-width:768px) { 12 | #login-intro { 13 | visibility: hidden; 14 | display: none; 15 | } 16 | } 17 | .loader{ 18 | position: absolute; 19 | z-index: 20; 20 | height: 110%; 21 | width: 110%; 22 | background-color: rgba(212, 209, 209, 0.582); 23 | top: -10%; 24 | left:-2%; 25 | } -------------------------------------------------------------------------------- /src/CSS/signup.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 2 | 3 | #signup-intro { 4 | background-image: url('./../image/signup/bg2.jpeg'); 5 | background-size: cover; 6 | box-shadow: 2px 7px 2px 2px rgb(190, 190, 190); 7 | } 8 | 9 | @media(max-width:575px) { 10 | #signup-intro { 11 | visibility: hidden; 12 | display: none; 13 | } 14 | } 15 | #signup-form-intro{ 16 | background-image: url("../image/signup/signup.jpg"); 17 | background-size: cover; 18 | box-shadow: 2px 7px 2px 2px rgb(190, 190, 190); 19 | } 20 | 21 | #signup-form-intro2{ 22 | background-color: rgba(239, 240, 239, 0.5); 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/CSS/team.css: -------------------------------------------------------------------------------- 1 | .profile-card-2 .card-img-block{ 2 | float:left; 3 | width:100%; 4 | height:150px; 5 | overflow:hidden; 6 | } 7 | .profile-card-2 .card-body{ 8 | position:relative; 9 | } 10 | .profile-card-2 .profile { 11 | border-radius: 50%; 12 | position: absolute; 13 | top: -60px; 14 | left: 20%; 15 | max-width: 100px; 16 | border: 3px solid rgba(255, 255, 255, 1); 17 | -webkit-transform: translate(-50%, 0%); 18 | transform: translate(-50%, 0%); 19 | } 20 | .profile-card-2 h5{ 21 | font-weight:600; 22 | color:#6ab04c; 23 | } 24 | .profile-card-2 .card-text{ 25 | font-weight:300; 26 | font-size:15px; 27 | } 28 | #logoofcard a{ 29 | color: rgb(59, 163, 59); 30 | } 31 | 32 | .fa-github:hover{ 33 | color:rgb(99, 99, 99) 34 | } 35 | .fa-twitter:hover{ 36 | color:#55acee; 37 | } 38 | 39 | .fa-linkedin:hover{ 40 | color: #0077B5; 41 | } 42 | .fa-medium:hover{ 43 | color: black; 44 | } 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/Routes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter, Switch, Route } from 'react-router-dom'; 3 | import Signup from './user/Signup'; 4 | import Signin from './user/Signin'; 5 | import Home from './core/Home'; 6 | import PrivateRoute from './auth/PrivateRoute'; 7 | import Dashboard from './user/UserDashboard'; 8 | import AdminRoute from './auth/AdminRoute'; 9 | import AdminDashboard from './user/AdminDashboard'; 10 | import AddCategory from './admin/AddCategory'; 11 | import AddProduct from './admin/AddProduct'; 12 | import Shop from './core/Shop'; 13 | import Product from './core/Product'; 14 | import Cart from './core/Cart'; 15 | import Orders from './admin/Orders'; 16 | import Profile from './user/Profile'; 17 | import ManageProducts from './admin/ManageProducts'; 18 | import UpdateProduct from './admin/UpdateProduct'; 19 | import UpdateCategory from './admin/updateCategory'; 20 | import Gallerylook from './core/Galleryimg'; 21 | import Team from './core/Team'; 22 | import About from './core/About'; 23 | import Contact from './core/Contact'; 24 | 25 | const Routes = () => { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | }; 52 | 53 | export default Routes; 54 | -------------------------------------------------------------------------------- /src/admin/AddCategory.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Layout from "../core/Layout"; 3 | import { isAuthenticated } from "../auth"; 4 | import { Link } from "react-router-dom"; 5 | import { createCategory } from "./apiAdmin"; 6 | 7 | const AddCategory = () => { 8 | const [name, setName] = useState(""); 9 | const [error, setError] = useState(false); 10 | const [success, setSuccess] = useState(false); 11 | 12 | // destructure user and token from localstorage 13 | const { user, token } = isAuthenticated(); 14 | 15 | const handleChange = e => { 16 | setError(""); 17 | setName(e.target.value); 18 | }; 19 | 20 | const clickSubmit = e => { 21 | e.preventDefault(); 22 | setError(""); 23 | setSuccess(false); 24 | // make request to api to create category 25 | createCategory(user._id, token, { name }).then(data => { 26 | if (data.error) { 27 | setError(data.error); 28 | } else { 29 | setError(""); 30 | setSuccess(true); 31 | } 32 | }); 33 | }; 34 | 35 | const newCategoryFom = () => ( 36 | 37 |
38 |
39 |
40 | 41 | 49 |
50 | 51 | 52 |
53 | ); 54 | 55 | const showSuccess = () => { 56 | if (success) { 57 | return

{name} is created

; 58 | } 59 | }; 60 | 61 | const showError = () => { 62 | if (error) { 63 | return

Category should be unique

; 64 | } 65 | }; 66 | 67 | const goBack = () => ( 68 |
69 | 70 | Back to Dashboard 71 | 72 |
73 | ); 74 | 75 | return ( 76 | 80 |
81 |
82 | {showSuccess()} 83 | {showError()} 84 | {newCategoryFom()} 85 | {goBack()} 86 |
87 |
88 | 89 | ); 90 | }; 91 | 92 | export default AddCategory; 93 | -------------------------------------------------------------------------------- /src/admin/AddProduct.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Layout from '../core/Layout'; 3 | import { isAuthenticated } from '../auth'; 4 | /* eslint-disable no-unused-vars */ 5 | import { Link } from 'react-router-dom'; 6 | import { createProduct, getCategories } from './apiAdmin'; 7 | 8 | const AddProduct = () => { 9 | const [values, setValues] = useState({ 10 | name: '', 11 | subname:'', 12 | youtubelink:'', 13 | description: '', 14 | price: '', 15 | categories: [], 16 | category: '', 17 | shipping: '', 18 | quantity: '', 19 | photo: '', 20 | loading: false, 21 | error: '', 22 | createdProduct: '', 23 | redirectToProfile: false, 24 | formData: '' 25 | }); 26 | 27 | const { user, token } = isAuthenticated(); 28 | const { 29 | name, 30 | subname, 31 | youtubelink, 32 | description, 33 | price, 34 | categories, 35 | category, 36 | shipping, 37 | quantity, 38 | loading, 39 | error, 40 | createdProduct, 41 | redirectToProfile, 42 | formData 43 | } = values; 44 | 45 | // load categories and set form data 46 | const init = () => { 47 | getCategories().then(data => { 48 | if (data.error) { 49 | setValues({ ...values, error: data.error }); 50 | } else { 51 | setValues({ 52 | ...values, 53 | categories: data, 54 | formData: new FormData() 55 | }); 56 | } 57 | }); 58 | }; 59 | 60 | useEffect(() => { 61 | init(); 62 | // eslint-disable-next-line react-hooks/exhaustive-deps 63 | }, []); 64 | 65 | const handleChange = name => event => { 66 | const value = name === 'photo' ? event.target.files[0] : event.target.value; 67 | formData.set(name, value); 68 | setValues({ ...values, [name]: value }); 69 | }; 70 | 71 | const clickSubmit = event => { 72 | event.preventDefault(); 73 | setValues({ ...values, error: '', loading: true }); 74 | 75 | createProduct(user._id, token, formData).then(data => { 76 | if (data.error) { 77 | setValues({ ...values, error: data.error }); 78 | } else { 79 | setValues({ 80 | ...values, 81 | name: '', 82 | subname:'', 83 | youtubelink:'', 84 | description: '', 85 | photo: '', 86 | price: '', 87 | quantity: '', 88 | loading: false, 89 | createdProduct: data.name 90 | }); 91 | } 92 | }); 93 | }; 94 | 95 | const newPostForm = () => ( 96 |
97 |
98 |

Post Place

99 |
100 | 103 |
104 | 105 |
106 | 107 | 108 |
109 |
110 | 111 | 112 |
113 |
114 | 115 | 116 |
117 | 118 |
119 | 120 |