OptimisticTrousers/cooking-recipe-portal

Fullstack web application built by Tony Isern, Eliza Clamor, and Souley Abdoul Aziz for the CS 306 Database Design Final Project. Hosted backend using Digital Ocean, NGINX, Let's Encrypt, and PM2.

Cooking Recipes

Description

[App] Creating a cooking recipes SQL portal using SQL, React.js, Express.js, and several component libraries. Final project for CS 306 Database Design at NJCU. Built by Tony Isern, Eliza Clamor, and Souley Abdoul Aziz.

Live deployment on a Digital Ocean droplet, configured with an NGINX reverse proxy, added an SSL certificate using Let's Encrypt, and served over HTTPS: https://cooking-recipes-portal.netlify.app/ Or clone repo, cd into app, then run "npm run dev" Or clone repo, cd into server, then run "npm run dev" Create your own local MySQL database and create a .env file with a DB_HOST, DB_USER, DB_PASSWORD, and DB properties

Screenshots

Showcase

Kooha-2023-05-28-14-21-59.webm

Tables Used

CREATE TABLE categories( categoryName VARCHAR(100) PRIMARY KEY NOT NULL, createdAt VARCHAR(100) NOT NULL, categoryDescription VARCHAR(200) NOT NULL ) ENGINE=INNODB;

CREATE TABLE recipes( recipeId VARCHAR(100) PRIMARY KEY, recipeTitle varchar(100) NOT NULL, recipeAuthor varchar(100) NOT NULL, createdAt varchar(100) NOT NULL, recipeContent varchar(10000) NOT NULL, recipeCategory VARCHAR(100), CONSTRAINT fk_category FOREIGN KEY (recipeCategory) REFERENCES categories(categoryName) ) ENGINE=INNODB;

Purpose

Creating a project that utilizes a SQL database and which utilizes core SQL concepts like foreign keys. Building an interactive user interface with an SQL database.

Beyond that, other learning outcomes were:

• Designing reusable components
• Using components from libraries like Bulma, Mantine, Material UI, and Chakra UI
• Building a fullstack application
• Using an interactive table like Material React Table
• Creating custom react hooks like useFetch

Features

1. Allows users to see a table of all recipes
2. Allows users to see a table of all categories
3. Allows users to perform CRUD operations on recipes
4. Allows users to perform CRUD operations on recipes
5. Allows users to enter concept about their recipes with a RichText HTML editor
6. Allow users see the HTML content of their recipe in a seperate page by clicking "View"
7. Allows users to filter, search, export, and many more things using the Material React Table

Development

Javascript Framework(s)

• React

Technologies used

• Chakra - UI library
• Material UI - UI library
• Mantine - UI library
• DaisyUI - UI library
• Bulma - UI library
• Material React Table - Interactive table
• React Quill - RichText HTML Editor
• React Router - Client-side routing
• React CSS Modules - CSS with local scoping
• Express - Web framework
• MySQL - Relational database

How To Use

• Clone this Repo

• Install Dependencies inside of the "/app" directory from the root project

  cd app && npm install

• Install Dependencies inside of the "/server" directory from the root project

  cd server && npm install

• Setup the MySQL Server on your local computer using this link: https://dev.mysql.com/doc/mysql-getting-started/en/

• Add env file in the root folder of the "/server" directory:

  DB_HOST=localhost
  DB_USER=root
  DB_PASSWORD=password
  DB=my_db

• Add env file in the root folder of the "/app" directory:

  VITE_API_DOMAIN=https://example-api-domain.com

• Run Development Server using the same command inside of the "/app" to start the front-end

  npm run dev

• Run Development Server using the same command inside of the "/server" to start the backend-end

  npm run dev

Areas for Improvement

• Create a comments table
• Allow users to like recipe posts
• Allow users to comment on recipe posts
• Authentication

Known Bugs

1. None identified