O'Reilly Recipes
Full Stack application with CRUD functionality
Project Overview
The objective of this project was to build a full stack application that had full CRUD functionality. I also used this opportunity to further push my skills in React and NextJs. Upon starting this project, I decided to use React-Redux for my state managment as this was a JavaScript tool I had not yet used at this point in my career.
Technologies used
React
Redux
NextJs
TailwindCSS
NodeJs
Express
MongoDB
Challenges Faced
This was the second version of the O'Reilly Recipes app that I had built. The first version was a basic application built upon vanilla JavaScript using the MVC framework and EJS templates.
I decided to use React-Redux as my state management due to never having used this tool before. I found it extremily powerful when needing to store a users session. This was important as I needed to hold the users login when the page was refreshed to make sure the user was still logged in.
Another challange I faced was trying to handle image uploading for a new or edited recipe. This was carried out by using an NPM package called 'Multer' and storing the image files on Cloudinary.com. Multer is a NodeJs middleware for handling 'multipart/form-data'.
Main Screen Layout
Recipes are displayed from the main screen for any user of the application to view. The recipes are retrived using Axios to call my custom API that retrives the data from the MongoDB database.
User registration
A user has the ability to create an account using an email and password of their choice. The email has to be unquie and this information in stored in our database. After the user creates a password, this password is then hashed using the 'bcrypt' package that securely stores them as hashed passwords instead of plaintext.
Recipe Creation
Once a user has created an account, they have the ability to then create a Recipe. This recipe is then stored on the MongoDB database.
Recipe Example
Any person viewing the application has the ability to click into a recipe to view its details. If a user has logged into the application, they then have the ability to edit or even delete any recipe that they themselves have created.