Concept

Vegan Witch Pot is a community based website made by Laynaria for sharing vegan recipes. Guests can access recipes that are shared by users and approved by admins. Users can create their own recipes and decide to share them or keep them for themselves. They can also create their own weekly menu of recipes and get a shopping list to ease their groceries.

There is three level of authentified users :

• Users > They can create recipes and asks for approval.
• Cooks > They can approve their own recipes.
• Admins.

Features

In the current version

• View and access recipes.
• Filters for recipes page (name, type, time, difficulty, my recipes).
• Authentification. (Login, Register and Disconnect)
• Profile Editing. (Change Password, Email, Avatar, Delete User)
• Create & Edit Recipes. (Title, Type, Cooking Time, Picture, Difficulty, Steps, Sharing, Approval, Ingredients)
• Delete Recipes.
• Uploading Pictures. (User Avatar and Recipe Thumbnail)
• Contact for both authentified users and guests.

Upcoming

• Weekly Menu.
• Shopping List.
• More Security.
• Forgotten Password.
• Commentary on Recipes.
• Quality Of Life Improvements.
• Admin Pannel.

App Structure

graph TD;
    Landing-->Home;
    Home-->About-Us;
    Home-->Recipe;
    Home-->Your-Menu;
    Home-->Contact;
    Home-->Login;
    Home-->Profile;
    Home-->Recipe-Id;
    Recipe-->Recipe-Id;
    Recipe-->Add-Recipe;
    Login-->Register;
    Login-->Edit-Password;
    Recipe-Id-->Edit-Recipe-Id;
    Error404;

Loading

Setup & Use

Project Initialization

• In VSCode, install plugins Prettier - Code formatter and ESLint and configure them
• Clone this repo, enter it
• Run command npm run setup
• NB: To launch the backend server, you'll need an environment file with database credentials. You'll find a template one in backend/.env.sample

Available Commands

• setup : Initialization of frontend and backend, as well as all toolings
• migrate : Run the database migration script
• dev : Starts both servers (frontend + backend) in one terminal
• dev-front : Starts the React frontend server
• dev-back : Starts the Express backend server
• lint : Runs validation tools, and refuses unclean code (will be executed on every commit)
• fix : Fixes linter errors (run it if lint growls on your code !)

FAQ

• The Template used for this project is a fullstack foundation template made by the Wild Code School.
• All pictures and icons from this project are open source. Most of them come from lotifiles, iconify and unsplash. The witch avatar though comes from the artist Freepik from Flaticon platform.
• Don't forget to create your frontend and backend .env files by copying the .env.sample files from each directory.

Technologies

• React
• Node
• Express
• MySQL

Tools

• Concurrently : Allows for several commands to run concurrently in the same CLI
• Husky : Allows to execute specific commands that trigger on git events
• Vite : Alternative to Create-React-App, packaging less tools for a more fluid experience
• ESLint : "Quality of code" tool, ensures chosen rules will be enforced
• Prettier : "Quality of code" tool as well, focuses on the styleguide
• _ Airbnb Standard_ : One of the most known "standards", even though it's not officially linked to ES/JS
• Nodemon : Allows to restart the server everytime a .js file is udated