MERN stack web application for creating and reading culinary recipes.
MongoDB, Expressjs, React, Nodejs
MERN is a fullstack implementation in MongoDB, Expressjs, React/Redux, Nodejs.
- logging in and signing up in JWT based user session
- creating and viewing all recipes in the system
- creating and viewing of personal recipes
- highly efficient fuzzy search (MongoDB dynamic indexes)
- uploading recipe image to Cloudinary
- logging out and secured routes
- mobile view adaptation
- frontend and backend form / requests validations
$ git clone https://github.com/Matimateokol/ukemochi-food-app.git
$ yarn # or npm i
- MongoDB
- Node ^18.15.0
- Cloudinary
notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other
$ cd ukemochi-frontend // go to frontend folder
$ yarn # or npm i // npm install packages
$ yarn dev // run it locally
// deployment for client app
$ yarn build // this will compile the react code using webpack and generate a folder called build in the root level
$ yarn start // this will run the files in build, this behavior is exactly the same how gh-pages will run your static site
run the script at the first level:
(You need to add a JWT_SECRET and other variables in .env to connect to MongoDB)
$ cd ukemochi-backend // go to server folder
$ yarn # or npm i // yarn / npm install packages
$ yarn dev // run it locally
$ yarn build
| Frontend-side | Backend-side |
|---|---|
| axios: ^1.3.4 | bcryptjs: ^2.4.3 |
| cogo-toast: ^4.2.3 | buffer-to-stream: ^1.0.0 |
| react: ^18.2.0 | cloudinary: ^1.35.0 |
| react-dom: ^18.2.0 | cors: ^2.8.5 |
| react-dropzone: ^14.2.3 | express: ^4.18.2 |
| react-icons: ^4.8.0 | express-fileupload: ^1.4.0 |
| react-router-dom: ^6.8.2 | helmet: ^6.0.1 |
| swr: ^2.1.0 | jsonwebtoken: ^9.0.0 |
| . | mongoose: ^7.0.0 |
| . | passport: ^0.6.0 |
| . | passport-jwt: ^4.0.1 |
| . | rimraf: 4.3.0 |
| . | sharp: 0.31.3 |
| . | yup: 1.0.2 |
User can log in and view Home page:
Mobile view adaptation:
