source: Am I Responsive

Our platform allows users to explore, search, and discover a wide variety of recipes. With a simple sign-up, you can add, edit, and share your own culinary creations, making Flavor Hub your go-to destination for all things delicious.

I used coolors.co to generate the color palette. Orange, blue, and their corresponding hues were selected for their association with energy and harmony, making them ideal for a website dedicated to recipes. These colors enhance the visual appeal and create a welcoming environment for users.

Typography plays a key role in enhancing user experience and establishing a cohesive visual identity. The font choices for this website were carefully selected to reflect a clean, modern, and professional aesthetic, ensuring the content is both visually appealing and easy to read across all devices.

• Imprima
  Used as the primary font for the entire website. Its clean, modern appearance makes it highly readable and perfect for maintaining consistency throughout the site.
• Arimo
  Chosen for the headings (h1-h6), providing a distinct and professional look. It adds emphasis to the content while contributing to the structured design of the site.

In cases where the primary fonts are not supported by the browser, a fallback to a generic sans-serif font is included. This ensures that the website maintains readability and consistency across different platforms and browsers.

The combination of Imprima for body text and Arimo for headings contributes to a visually cohesive and user-friendly design. This typography setup ensures the site remains accessible and visually appealing, while also reflecting a modern and professional aesthetic.

• As a new user, I want to see a clear and recognizable logo so that I can easily remember the brand.

• As a new user, I want to understand the web app’s purpose right away so that I know what the platform offers.

• As a new user, I want to navigate easily through the website using the navigation bar so that I can find relevant sections and features quickly.

• As a new user, I want to easily sign up so that I can access personalized features like adding and editing recipes.

• As a new user, I want to see a search bar so that I can search for recipes across the site.

• As a new user, I want to see social media icons so that I can follow the platform on various channels.

• As a returning user, I want to securely log in so that I can manage my recipes and access personalized content.

• As a returning user, I want to add new recipes so that I can share my favorite dishes with others.

• As a returning user, I want to edit my existing recipes so that I can update or improve them over time.

• As a returning user, I want to delete a recipe that I’ve added so that I can manage my recipe collection.

• As a returning user, I want to mark recipes as favorites so that I can easily find them later.

• As a returning user, I want to see a community of other cooks and food enthusiasts so that I can learn from others and share my experiences.

• As a returning user, I want to make posts in the community so that I can share cooking tips and experiences.

• As a returning user, I want to comment on others’ posts so that I can engage in discussions and exchange ideas.

• As a returning user, I want to view all my added recipes on one page so that I can easily manage them.

• As a returning user, I want to log out securely so that my session remains safe on shared devices.

• As a returning user, I want access to a dedicated page for each recipe where I can view and add detailed information.

• As a returning user, I want to be able to edit the information on each recipe page to keep it accurate and up-to-date.

• As a site admin, I want to stay connected with users so that they can report issues or provide feedback about the app.

• As a site admin, I should be able to delete posts that violate community guidelines so that the site remains a safe and welcoming space.

• As a site admin, I should be able to view who created each post to monitor content and user activity.

• As a site admin, I should be able to delete users who violate rules to maintain a respectful community.

• As a site admin, I need to manage and view user accounts effectively to ensure the site’s integrity.

• As a site admin, I should be able to redirect users to the homepage if they encounter a 404 error (page not found).

• As a site admin, I should be able to redirect users to the homepage if they try to access a forbidden page (403 error).

• As a site admin, I should be able to handle internal server errors by directing users back to the homepage with an appropriate message (500 error).

• As a site administrator, I would like to stay connected with users so that they can report any issues or provide feedback on user experience.

• As a site administrator, I should be able to delete posts that violate community guidelines to ensure the site remains a safe and welcoming space.

• As a site administrator, I should be able to view who created each post so that I can monitor content and user activity.

• As a site administrator, I should be able to delete users who violate the rules to maintain a safe and respectful community.

• As a site administrator, I need to manage and view user accounts effectively to maintain control over the user base and monitor activity.

• As a site administrator, I should be able to direct users back to the homepage if they encounter a page that is not found (404 error).

• As a site administrator, I should be able to redirect users to the homepage if they try to access a page that is forbidden (403 error).

• As a site administrator, I should be able to handle internal server errors by redirecting users back to the homepage with an appropriate message (500 error).

I have use Balsamiq to design my site wireframes.

• Hero Image

  • Clearly communicates the purpose of the website to the user.

• Welcome Text and Callout Message

  • A welcoming message that introduces the site name and invites users to explore the recipes.

• Call-to-Action Button

  • A prominent button that guides users to take specific actions, simplifying navigation.

• About Text

  • Provides an overview of the website's purpose.

• Search Bar

  • Enables users to search for recipes by name, category, or cuisine.
  • Displays the number of posts matching the search query when successful.
  • Shows a message if no results are found, informing users that nothing matched their search term.

• Card

  • Appears on both the Profile Page and the Home Page.
  • Features a hover effect that adds shadows to enhance visual appeal.
  • Displays images uploaded by users, along with the title and a brief description.
  • Includes two buttons for editing or deleting the post.

• NavBar

  • Provides users with a clear and accessible pathway to navigate through the website:
  • Includes links to key sections like Home, Profile, Add Recipe, and more.
  • Adapts to different screen sizes, ensuring a seamless experience on both desktop and mobile devices.
  • Enables easy access to user-specific features, such as login, registration, and logout options.

• Footer

  • Provides essential information and additional navigation options for users
  • About Us Text: Briefly describes the purpose and mission of Flavor Hub, offering users insight into the website's focus on culinary inspiration and community.
  • Quick Links: Offers easy access to important sections of the website, such as Home, Profile, and Add Recipe, ensuring users can quickly navigate to key areas.
  • Social Media Links: Connects users to Flavor Hub's social media profiles, allowing them to stay updated and engaged with the community on platforms like Facebook, Instagram, X and YouTube.

• Registration Page

  • Enables users to securely create an account on Flavor Hub, allowing them to personalize their experience, save their favorite recipes, and contribute their own culinary creations.

• Log In Page

  • Provides returning users with a secure way to access their accounts, manage their recipes, and engage with the community. Ensures that users can easily continue where they left off, whether adding new recipes or editing existing ones.

• Contact Us

  • Provides users with a simple and convenient way to reach out to the Flavor Hub team for questions, feedback, or assistance.
  • When users contact the admin through the contact page, they receive an immediate auto-reply, confirming their message has been received.
  • This feature ensures users feel acknowledged and reassured that their inquiries are being addressed promptly.

• Add Recipe Page

  • Allows users to contribute to the Flavor Hub community by adding their own recipes. Users can input ingredients, cooking steps, preparation time, and more to share their culinary creations with others.

• Edit Recipe Page

  • Enables users to update or modify their previously submitted recipes. This feature ensures that users can keep their recipes accurate and up-to-date.
  • Includes a "Cancel" button that allows users to return to the home page without making any changes.

• Delete Recipe

  • Allows users to delete their recipes using a dedicated delete button.
  • After clicking the delete button, a confirmation alert prompts to confirm the deletion, helping to prevent accidental removals.

• Recipe Page

  • Displays detailed information about each recipe, including ingredients, step-by-step cooking instructions, preparation time, and cooking time. This makes it easy for users to browse and follow the recipe.

• Profile Page

  • Allows users to easily manage their recipes in one place.
  • Users can view, edit, or delete their submitted recipes directly from their profile page.

• '404' Page

  • Informs users that the page they are trying to access cannot be found. This helps users understand they may have entered an incorrect URL or the page has been moved or deleted.

• '403' Page

  • Alerts users that they do not have the necessary permissions to access the requested page. This helps maintain security by restricting access to unauthorized users.

• '500' Page

  • Notifies users of an internal server error, indicating something went wrong on the server side. This ensures users are aware of the issue while the development team resolves it.

• Manage Categories

  • Add Category: Allows the admin to create new categories by clicking the "Add Category" button, enabling better organization of recipes.
  • Edit and Delete Categories: Displays a list of all existing categories, providing the admin with options to edit or delete them as needed for maintaining an organized structure.

• Manage Users

  • View Users: Enables the admin to view a list of all registered users on the platform, offering insight into the user base.
  • Delete Users: Provides the admin with the ability to delete users and all posts associated with them, ensuring control over the content and user management.

• Favorites

  • Save Favorite Recipes: Users will be able to mark their favorite recipes and save them to their profiles for easy access, creating a personalized collection of go-to dishes.

• Leave Comments

  • Comment and Rate Recipes: Users will have the ability to leave comments and rate recipes, fostering community interaction and providing feedback to recipe creators.

• Blog Community

  • Community Blog: A blog section will be incorporated, allowing users to share their cooking experiences, tips, and stories, creating a vibrant community space for discussion and inspiration.

• Design & Wireframing:

  • - Used for creating wireframes.

• Version Control & Collaboration:

  • - Version control system to track code changes.
  • - Secure online platform for code storage and collaboration.
  • - Cloud-based IDE for development.

• Frontend Development:

  • - Markup language for the main site content.
  • - Stylesheet language used for site design and layout.
  • - Programming language used for user interaction on the site.
  • - JavaScript library used to simplify DOM manipulation and event handling.

• Backend Development:

  • - Back-end programming language used to build server-side logic.
  • - Python web framework used to create the web application.
  • - Non-relational database used with Flask for data storage and management.

• Hosting & Deployment:

  • - Cloud platform used for hosting and deploying the back-end application.
  • - Cloud platform used for hosting and deploying the back-end application.

• Frontend Libraries & Frameworks:

  • - Front-end framework for responsive design and pre-built components.
  • - Icon library used for scalable vector icons.
  • - Source for web fonts and icons used across the site.

• AI and Content Creation:

  • - AI tool used to assist in writing content.

• Email & Communication:

  • - Service used to send automatic email replies to users after contact.

• Design Tools:

  • - Tool used for testing and choosing font combinations.
  • - Tool used for generating the site's logo.
  • - Platform used to source inspiration and images.

• Alerts & User Interface:

  • - Library used to style alerts on the site.

Flavor Hub utilizes MongoDB, a non-relational database, for its flexibility and document-based data model. This structure is ideal for handling the varying attributes of recipes without requiring changes to the overall schema.

This flexible schema is advantageous as it allows for a variety of attributes to be stored, even as the data evolves over time.

The database, named flavor_hub, currently contains the following collections:

1. users: Stores user information and credentials.
2. recipes: Contains detailed information about each recipe, such as ingredients, steps, and associated user ID.
3. categories: Stores different categories under which recipes can be classified (e.g. Desserts, Main Course).

In future iterations of Flavor Hub, we plan to introduce additional collections to enhance user interaction and personalization:

1. comments: This collection will store user comments and ratings on recipes. It will be linked to both the users and recipes collections to manage feedback effectively.
2. favorites: This collection will allow users to save their favorite recipes. It will link users to their selected recipes, providing a personalized experience.

These future collections will be added to expand the functionality of Flavor Hub and enhance user engagement.

I used Lucidchart to create the database schema diagram. This diagram visually represents the current collections, their relationships, and the fields within each collection.

I use trello to plan the tasks

The live deployed application can be found on Render.

This project uses MongoDB for the non-relational database.

To obtain your own MongoDB Database URI, sign up on their site, then follow these steps:

• The name of the database on MongoDB should be called insert-your-database-name-here.
• The collection(s) needed for this database should be insert-your-collection-names-here.
• Click on the Cluster name created for the project.
• Click on the Connect button.
• Click Connect Your Application.
• Copy the connection string and replace password with your own password (also remove the angle-brackets).

This project can be deployed to both Heroku and Render. Choose the platform you prefer or follow both instructions for flexibility.

Heroku is a Platform as a Service (PaaS), for cloud deployment. Follow these steps to deploy:

1. Create a New Heroku App:

   • Log in to your Heroku Dashboard.
   • Click "New" in the top-right corner and select "Create new app".
   • Enter a unique app name and choose a region (EU or USA), then click "Create App".

2. Configure Environment Variables:

   • Navigate to the "Settings" tab of your Heroku app.

   • Click "Reveal Config Vars" and set the following environment variables:

     Key	Value
     IP	0.0.0.0
     PORT	5000
     SECRET_KEY	Your own value
     MONGO_URI	Your MongoDB connection string
     MONGO_DBNAME	Your MongoDB database name
     EMAIL_API	Your EmailJS public key

3. Prepare Deployment Files:

   • Ensure the following files are in the root directory of your project:

     • requirements.txt: Lists all required Python packages.

       pip3 freeze > requirements.txt

     • Procfile: Specifies the commands to run your application.

       echo web: python app.py > Procfile

       Replace app.py with the name of your primary Flask application file.

     • runtime.txt: Specifies the Python version.

       python-3.9.18

4. Deploy Your Application:

   • Log in to Heroku CLI:

     heroku login -i

   • Set the remote for Heroku:

     heroku git:remote -a app_name

     Replace app_name with your Heroku app name.

   • Push your code to Heroku:

     git push heroku main

   • Open your application in a browser:

     heroku open

Render is another PaaS option that can deploy your Flask application. Follow these steps to deploy your app on Render:

1. Create a New Render Web Service:

   • Go to the Render Dashboard.
   • Click "+ New" button in the top-right corner and select "Web Service".
   • Connect your GitHub account or GitLab and select the repository for your project.
   • Render will automatically detect the type of app you're deploying. Choose Python for the runtime environment.
   • Under Environment, set the following:
   • Build Command: pip install -r requirements.txt
   • Start Command: python app.py

2. Configure Environment Variables:

   • In the Environment Variables section of your Render Web Service setup, add the same variables as for Heroku:

     Key	Value
     IP	0.0.0.0
     PORT	5000
     SECRET_KEY	Your own value
     MONGO_URI	Your MongoDB connection string
     MONGO_DBNAME	Your MongoDB database name
     EMAIL_API	Your EmailJS public key

3. Prepare Deployment Files:

   • Make sure the following files are in the root directory of your project:

     • requirements.txt: Lists all required Python packages.

       pip3 freeze > requirements.txt

     • Procfile: Specifies the commands to run your application.

       echo web: python app.py > Procfile

       Replace app.py with the name of your primary Flask application file.

     • runtime.txt: Specifies the Python version.

       python-3.12.8

4. Deploy Your Application:

   • Once everything is set up, click "Create Web Service" on Render to trigger the build and deploy process.

   • Render will build your project, install dependencies, and deploy your Flask app.

   • After deployment, Render will provide a URL where you can access your live application.

To configure EmailJS for sending automatic replies:

1. Sign Up:

   • Create an account on EmailJS.

2. Create Email Service:

   • Set up an email service in your EmailJS dashboard.

3. Install EmailJS Library:

   • Include the EmailJS script in your HTML or install it via npm:

     npm install --save @emailjs/browser

   • Or with yarn:

     yarn add @emailjs/browser

4. Add EmailJS Script to Your Project:

   • Include the following script in your HTML file:

     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
     <script type="text/javascript">
       (function(){
           emailjs.init({
             publicKey: "YOUR_PUBLIC_KEY",
           });
       })();
     </script>

5. Create and Use Email Templates:

   • Set up email templates in the EmailJS dashboard.
   • Use the following code to send emails:

     emailjs.send(serviceID, templateID, templateParams, options);

To run the project locally:

1. Clone the Repository:

   • Clone the repository:

     git clone https://github.com/Lauren21717/flavor-hub.git

2. Install Dependencies:

   • Install the required packages:

     pip3 install -r requirements.txt

3. Create a Local env.py File:

   • Create a file named env.py with environment variables:

     import os
     os.environ.setdefault("IP", "0.0.0.0")
     os.environ.setdefault("PORT", "5000")
     os.environ.setdefault("SECRET_KEY", "your_value")
     os.environ.setdefault("MONGO_DBNAME", "your_db_name")
     os.environ.setdefault("MONGO_URI", "your_mongo_uri")
     os.environ.setdefault("EMAIL_API", "your_email_api_key")
     os.environ.setdefault("DEBUG", "True")
     os.environ.setdefault("DEVELOPMENT", "True")

4. Run the Application:

   • Start the Flask application:

     python app.py

   • Access the application at http://localhost:5000.

1. Go to the GitHub repository.
2. Click on the "Code" button and copy the URL.
3. Open your terminal and run:

   git clone https://github.com/Lauren21717/flavor-hub.git
   

By forking a GitHub repository, you create a personal copy of the original repository under your own GitHub account. This allows you to view and modify the code without affecting the original repository.

To fork this repository, follow these steps:

1. Log in to GitHub and navigate to the GitHub Repository.
2. At the top-right corner of the repository page, just above the "Settings" button, click the "Fork" button.
3. After clicking the "Fork" button, a copy of the repository will be created under your GitHub account.

You can now work on your own copy of the repository, make changes, and propose improvements through pull requests if desired.

• Good Food - Recipe content and food pictures.
• W3Schools - Function reference and examples.
• Flask - Jinja2 syntax for templates.
• SweetAlert - Styling flash messages on the page.
• Pinterest - Images for the hero section.
• Google - Images for the about section.
• Materialize CSS - Footer design.
• Shopify - Logo creation.
• ChatGPT - Content assistance.