├── recipe-frontend ├── src │ ├── index.css │ ├── components │ │ ├── Header │ │ │ ├── Header.css │ │ │ └── Header.jsx │ │ ├── SearchBar │ │ │ ├── SearchBar.css │ │ │ └── SearchBar.jsx │ │ ├── Pages │ │ │ ├── Home.jsx │ │ │ ├── Recipe.jsx │ │ │ ├── Contact.jsx │ │ │ ├── About.jsx │ │ │ └── Login.jsx │ │ ├── Footer │ │ │ ├── Footer.css │ │ │ └── Footer.jsx │ │ └── Navbar │ │ │ ├── Navbar.css │ │ │ └── Navbar.jsx │ ├── images │ │ ├── Recipe_img1.jpg │ │ ├── Recipe_img2.jpg │ │ ├── Recipe_img3.jpg │ │ └── Recipe_img4.jpg │ ├── App.css │ ├── main.jsx │ ├── App.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── recipe-backend ├── .gitignore ├── models │ └── Users.js ├── package.json ├── index.js ├── routes │ └── user.js └── package-lock.json └── README.md /recipe-frontend/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /recipe-backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /recipe-frontend/src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /recipe-frontend/src/images/Recipe_img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayashree226/Capstone-Completion-Final-Project/HEAD/recipe-frontend/src/images/Recipe_img1.jpg -------------------------------------------------------------------------------- /recipe-frontend/src/images/Recipe_img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayashree226/Capstone-Completion-Final-Project/HEAD/recipe-frontend/src/images/Recipe_img2.jpg -------------------------------------------------------------------------------- /recipe-frontend/src/images/Recipe_img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayashree226/Capstone-Completion-Final-Project/HEAD/recipe-frontend/src/images/Recipe_img3.jpg -------------------------------------------------------------------------------- /recipe-frontend/src/images/Recipe_img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayashree226/Capstone-Completion-Final-Project/HEAD/recipe-frontend/src/images/Recipe_img4.jpg -------------------------------------------------------------------------------- /recipe-frontend/src/components/SearchBar/SearchBar.css: -------------------------------------------------------------------------------- 1 | .SearchBar{ 2 | /* position: absolute; */ 3 | width: 100%; 4 | margin-bottom: 2%; 5 | font-size: 12pt; 6 | } 7 | -------------------------------------------------------------------------------- /recipe-frontend/src/components/Pages/Home.jsx: -------------------------------------------------------------------------------- 1 | function Home() { 2 | return ( 3 |
4 |

Home Page

5 |
6 | 7 | ); 8 | } 9 | 10 | export default Home; -------------------------------------------------------------------------------- /recipe-frontend/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /recipe-frontend/src/components/Pages/Recipe.jsx: -------------------------------------------------------------------------------- 1 | function Recipe() { 2 | return ( 3 |
4 |

Recipe Page

5 |
6 | 7 | ); 8 | } 9 | 10 | export default Recipe; -------------------------------------------------------------------------------- /recipe-frontend/src/components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import Navbar from "../Navbar/Navbar" 2 | import "./Header.css" 3 | function Header() { 4 | 5 | return ( 6 | <> 7 |

Recipe App

8 | {/* */} 9 | 10 | ) 11 | } 12 | 13 | export default Header 14 | -------------------------------------------------------------------------------- /recipe-frontend/src/components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footbar a{ 2 | font-size: 20px; 3 | font-weight: bold; 4 | margin: 3px; 5 | display: flex; 6 | position: absolute; 7 | bottom: 0; 8 | background-color:black;background-color: rgb(159, 228, 106);width: 100%; 9 | text-align: left; 10 | color: rgb(15, 15, 15); 11 | } 12 | -------------------------------------------------------------------------------- /recipe-frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /recipe-frontend/src/App.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: url(./images/Recipe_img2.jpg); 3 | background-repeat: no-repeat; 4 | background-size: cover; 5 | color: rgb(114, 230, 37); 6 | text-align: center; 7 | } 8 | .about{ 9 | color: rgb(243, 172, 84); 10 | text-align: justify; 11 | font-size: 18px; 12 | padding: auto; 13 | } 14 | .login{ 15 | margin: 0; 16 | color: brown; 17 | } 18 | -------------------------------------------------------------------------------- /recipe-frontend/src/components/Pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | function Contact() { 2 | 3 | return ( 4 | <> 5 |

Contact Page

6 |

7 | Contacu Us
8 | www.MyRecipeApp.com
9 | Contact No: xxx-xxx-xxxx
10 | Follow us on facebook 11 |

12 | 13 | 14 | ); 15 | } 16 | 17 | export default Contact; -------------------------------------------------------------------------------- /recipe-frontend/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | import { BrowserRouter} from "react-router-dom"; 6 | 7 | ReactDOM.createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /recipe-frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /recipe-frontend/src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar a{ 2 | font-size: 20px; 3 | font-weight: bold; 4 | margin: 3px; 5 | display: flex; 6 | justify-content: space-between; 7 | width: 100%; 8 | background-color: rgb(159, 228, 106); 9 | color: rgb(15, 15, 15); 10 | gap: 2px; 11 | 12 | } 13 | .navbar{ 14 | display: flex; 15 | justify-content: space-between; 16 | gap: 5px; 17 | margin-bottom: 20px; 18 | } -------------------------------------------------------------------------------- /recipe-frontend/src/components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import Home from "../Pages/Home"; 2 | import { Link } from "react-router-dom"; 3 | import "./Navbar.css"; 4 | 5 | function Navbar() { 6 | return ( 7 | 13 | ); 14 | } 15 | 16 | export default Navbar; 17 | -------------------------------------------------------------------------------- /recipe-frontend/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /recipe-backend/models/Users.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const userSchema = new mongoose.Schema({ 4 | username: { 5 | type: String, 6 | required: true, 7 | minLength: 3, 8 | maxLength: 20, 9 | }, 10 | email: { 11 | type: String, 12 | required: true, 13 | }, 14 | password: { 15 | type: String, 16 | required: true, 17 | minLength: 8, 18 | maxLength: 12, 19 | }, 20 | }); 21 | 22 | export default new mongoose.model("User", userSchema); 23 | -------------------------------------------------------------------------------- /recipe-frontend/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import "./Footer.css"; 2 | import Contact from "../Pages/Contact"; 3 | import {Link} from "react-router-dom" 4 | 5 | function Footer() { 6 | return ( 7 | 14 | ); 15 | } 16 | 17 | export default Footer; 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project is about Recipe app 2 | Here I created 2 folders. One frontend and one backend. 3 | In front end I used JScript, react, HTML, CSS, react-router-dom 4 | This app uses the Edamam Recipe Search API to search for recipes. where I fetched the data from api 5 | This project I also create a responsive login form with form validation in React. 6 | Here I created components to navigate tha page. 7 | I added image for landing page 8 | 9 | In backend I create routs to connet with frontend 10 | for backendI used express, mongoose, cors. I also created model with mongoose schema 11 | -------------------------------------------------------------------------------- /recipe-backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "recipe-backend", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "type": "module", 6 | "scripts": { 7 | "start": "node index.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "description": "", 14 | "dependencies": { 15 | "cors": "^2.8.5", 16 | "dotenv": "^16.4.5", 17 | "express": "^4.19.2", 18 | "mongoose": "^8.4.1", 19 | "morgan": "^1.10.0" 20 | }, 21 | "devDependencies": { 22 | "nodemon": "^3.1.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /recipe-frontend/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /recipe-frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "recipe-frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.7.2", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-router-dom": "^6.23.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.66", 20 | "@types/react-dom": "^18.2.22", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "eslint": "^8.57.0", 23 | "eslint-plugin-react": "^7.34.1", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.6", 26 | "vite": "^5.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /recipe-backend/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import dotenv from "dotenv"; 3 | import mongoose from "mongoose"; 4 | import userRouter from './routes/user.js'; 5 | import morgan from "morgan"; 6 | import cors from "cors"; 7 | // env variables 8 | dotenv.config(); 9 | 10 | // connect to MongoDb database 11 | mongoose.connect(process.env.ATLAS_URI); 12 | 13 | const app = express(); 14 | const PORT = process.env.PORT || 4000; 15 | 16 | // Middlewares 17 | app.use(morgan('dev')); 18 | app.use(express.json()); 19 | app.use(cors()) 20 | // Routes 21 | app.get('/', (req, res) => { 22 | res.send('Welcome to the User Auth API!'); 23 | }); 24 | app.use('/users', userRouter); 25 | 26 | // Global Error middleware 27 | app.use((err, req, res, next) => { 28 | res.send('Something went really wrong!'); 29 | }); 30 | 31 | app.listen(PORT, () => { 32 | console.log(`Server is running on port: ${PORT}`); 33 | }); 34 | -------------------------------------------------------------------------------- /recipe-backend/routes/user.js: -------------------------------------------------------------------------------- 1 | import express from "express" 2 | import User from "../models/Users.js" 3 | 4 | const router = new express.Router(); 5 | 6 | router.post('/login', async (req, res) => { 7 | try { 8 | const dbUser = await User.findOne({email: req.body.email}); 9 | 10 | // existing user with email 11 | if (!dbUser) { 12 | return res.send('Check email!'); 13 | } 14 | 15 | 16 | // password match 17 | if (dbUser.password !== req.body.password) { 18 | return res.send('Check password!'); 19 | } 20 | 21 | // send all the user data 22 | res.send(dbUser); 23 | 24 | } catch (error) { 25 | console.log(error); 26 | } 27 | }); 28 | 29 | 30 | router.get('/', async (req, res) => { 31 | const result = await User.find({}); 32 | res.send(result); 33 | 34 | }); 35 | 36 | 37 | export default router -------------------------------------------------------------------------------- /recipe-frontend/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import Header from "./components/Header/Header"; 4 | import Footer from "./components/Footer/Footer"; 5 | import Navbar from "./components/Navbar/Navbar"; 6 | import SearchBar from "./components/SearchBar/SearchBar"; 7 | 8 | 9 | import Home from "./components/Pages/Home"; 10 | import About from "./components/Pages/About"; 11 | import Recipe from "./components/Pages/Recipe"; 12 | import Login from "./components/Pages/Login"; 13 | import Contact from "./components/Pages/Contact"; 14 | import "./App.css"; 15 | 16 | function App() { 17 | 18 | return ( 19 | <> 20 |
21 |