MachiamCook

Recipe sharing app!

App for foodies and cooking enthusiasts who love to discover and share new dishes.

Record of your famous family recipes online and share it with the world.

Who knows, it might become Michelin Star Dish!?

Deployment

Upload and share your famous recipes on MachiamCook.

Click to View

Sample account:-

• User ID: May
• Password: 123

Timeframe

1 week

Technologies and Tools Used

• HTML
• CSS
• ejs
• Nodejs
• Express
• Express-session
• Mongoose / MongoDB
• GitHub
• Cyclic
• Visual Studio

NodeJS packages installed and used

npm i
npm upgrade --latest
npm install nodemon -D
npm install -g express-generator
npm install express-session
npm install mongoose
npm install dotenv --save
npm install method-override
npm install bcrypt
npm install cookie-parser
npm install connect-mongo

User Story

When user ...	What happens...
Click Log in	User will be redirected to the login page.
Enter the correct userID and password	User will be redirected to the user's Home page.
Enter the wrong userID and/or password	User will be informed of the error and remained on the login page.
Click on YAY!	User will be redirected to recipes page where all submitted recipes are displayed
Click on view	User will be redirected to recipes' detail page where user can read up on how to make the dish.
Input their comment and press submit	Their comment will be posted below the recipes' information.
Click Submit Recipe	User will be redirected to /recipes/new page. Where the user can fill in and submit their own recipes
Click Submit Recipe button	User's new recipe will be posted to the "All Recipes" and "My Book" pages, which can be accessed under the nave bar.
Click My Book	User will be redirected to /users/book page. Where users can view all the recipes that they have submitted.
Click on view	User will be redirected to recipes' detail page where the user can update or delete their submitted recipes.
Click Log out	User will be logged out and logged out successful message will be shown.

Model and their relationships

MachiamCook use both one to many and one to one relationship

One to many:-	One to one relationship:-
1 User ID has many recipes submitted under them.	1 Recipe only has 1 author (userName).
1 Recipe have many reviews.	1 Review can be made by 1 user (userName).

CRUD RESTful Routes

Recipes example:-

Wireframe and App Screenshots

1. Homepage

2. Login page

3. If Login fails If log in was unsuccessful, user will remain on the same login page and show the Invalid login msg and ask user to try again.

• If the password is wrong,

• If the user ID is wrong,

4. If Login successful, welcome user's home page

5. Submit New recipes page

6. All Recipes page

7. Each Recipe's Detail page

8. Recipe's review

• if there are no reviews

• if there are reviews

9. User's My Book page

Only user have access to their own submitted recipes in My Book page. The author name refer to the userName.

const book = async (req, res) => {
  try {
    const recipes = await Recipe.find({
      author: req.session.user.userName,
    }).exec();
    if (recipes) {
      const context = { recipes };
      // res.send("my book page");
      res.render("users/book", context);
    } else {
      // res.send("Show book, need to log in");
      res.redirect("/login");
    }
  } catch (error) {
    res.send(error);
  }
};

10. User's Submitted Recipe's Detail page

11. Update Recipe

12. Log out

User Login Authorization

isAuth is added to routes to check if the user has login or not.

If the user has not login, they will be directed to user/login page, asking them to log in.

If the user is login, proceed wiht the next action next();.

const isAuth = async (req, res, next) => {
  try {
    if (req.session.user.user_id) {
      const user = await User.findById(req.session.user.user_id).exec();
      res.locals.user = user;
      next();
    } else {
      const context = { msg: "Unauthorized, Access denied. Please login." };
      res.render("users/login", context);
    }
  } catch (error) {
    const context = { msg: "Unauthorized, Access denied. Please login." };
    res.render("users/login", context);
  }
};

Learning Points

• ejs <%%> make it harder to read the codes compared to HTML.
• Set small goals and do one step at a time.
• If unsure, write console.log to find out if the code is correct.
• Use res.send("insert msg"); to check for error and is the route is set up correctly.
• Try and catch error is useful.
• Learn to accept and understand errors in the terminal.

Future Impovements

• user registration
• category selection
• search bar
• like and bookmark recipes

References

Recipes used in MachiamCook are not owned by me. All rights belong to allrecipes.