The app is a recipe sharing and discovery app. It allows users to share and discover various recipes shared by other users. The app includes an additional option of adding the ingredients of the recipe to a grocery-list to avoid last minute trips to the store. Users of the App can create, edit, and delete recipes created by them and review and save recipes by other users. The App can be considered a recipe focused social media App.
The building of the site was a team effort. The team was composed of:
The development of the app was organized using a Trello board.
The site was developed using the Express JS framework as the back-end and React JS as the front-end . Users are Authenticated using a custom OAuth as well as by using Google OAuth. Users are able to create an account, share recipes, browse recipes and search recipes as well as add reviews of other recipes. Non-authenticated users are only allowed to view recipes.
The app was coded using React JS and made use of react's properties such as hooks, components and props to build a single page app. Express JS was used for the back-end and calls to the back-end were made using Axios to the appropriate routes. To design the app Tailwind CSS was used. The app uses Mongo Schemas to create documents of objects which are stored in the Mongo Database. These objects are queried, updated or deleted using Mongoose.
The app can be cloned and run on a local machine. This is the repo of the front-end of the app which will also require this back-endl to run. Once cloned run npm install to install all the dependencies. The front-end will need a .env files which will have the Mongo DB connection string, Google client ID, secret and callback along with the saltrounds and the app secret in the .env file.
The add recipe page
The all recipes page
The landing page
Recipe details page
Shopping list page
Sign in page
User profile page
