search

TaherCCG / airybitesrecipes

AiryBites Recipes - Recipes for Air Fryers
0 stars 0 forks source link

readme

AiryBites Recipes

Introduction

Welcome to AiryBites Recipes, my Milestone Project 3 for the Level 5 Diploma in Full Stack Web Application Development! This project will showcase my skills in full-stack web development by creating a dynamic and user-friendly recipe sharing application.

alt text

Project Overview

AiryBites Recipes will enable users to create, share, and discover a variety of recipes. Users will be able to:

Deployed App : https://airybites-app-9649332aa316.herokuapp.com/

List Of Features

Navigation

Home Page

Profile Page

The Profile Page provides users with a personal space where they can view and manage their recipes.

Admin Panel Feature

404 Page

UX/UI

User Stories

First-Time Visitor

Returning User

Frequent User

Admin User

Colour Scheme

For this app, I chose warm and inviting colour scheme which will enhance the app's appeal and usability.

Colour Scheme

Primary Colour: Coral (#FF6F61)

Usage: For primary buttons, highlights, and active elements.
Reason: Coral is a warm and inviting colour that grabs attention without being overwhelming. It provides a lively and energetic touch, making interactive elements stand out and encouraging user engagement.

Secondary Colour: Sage Green (#8AB49C)

Usage: For secondary buttons, accents, and backgrounds.
Reason: Sage Green offers a calming and natural feel, complementing the vibrancy of Coral. It creates a balanced and soothing palette, enhancing the app's overall aesthetic while providing a pleasant backdrop for content.

Neutral Colour: Cream (#FFF5E1)

Usage: For background colours, cards, and sections.
Reason: Cream is a soft, neutral colour that adds warmth and elegance to the app. It ensures a clean and uncluttered look, making the text and images stand out, while providing a cohesive background for various sections.

Accent Colour: Burnt Orange (#35400)

Usage: For icons, links, and smal accents.
Reason: Burnt Orange is a bold and earthy accent colour that adds depth and contrast. It draws attention to important elements such as icons and links, enhancing the user experience by making navigation intuitive and visually appealing.

Dark Colour: Charcoal (#333333)

Usage: For text, headers, and footers.
Reason: Charcoal provides excellent readability and a strong visual foundation for text. It is a versatile and sophisticated dark colour that ensures clear contrast with lighter background colours, making it ideal for headers, footers, and body text.

Typography

Primary Font: Raleway

Raleway is a clean, elegant sans-serif font that offers readability and modern aesthetics.

I chose the Raleway font for AiryBites Recipes because of its elegant and modern design, which enhances readability and gives the app a polished, professional appearance. Its versatility and range of weights ensure a cohesive and aesthetically pleasing user experience, making it ideal for headings and prominent text within the app.

Primary Font

Secondary Font: Open Sans

Open Sans is a versatile and legible sans-serif font that complements Raleway well, ensuring readability across various devices and screen sizes.

I chose Open Sans as the secondary font for AiryBites Recipes because of its excellent readability and versatility. Its clean, neutral design complements the elegance of Raleway, ensuring that detailed recipe instructions and longer text sections are easy to read across various devices and screen sizes.

Secondary Font

MongoDB

I chose to use MongoDB for my AiryBites recipe app because its flexible, schema-less structure allows me to easily store and retrieve diverse recipe data with varying ingredients and instructions. MongoDB's document-oriented nature simplifies handling the complex, nested data typical of recipes.

Additionally, I decided to create an Entity-Relationship Diagram (ERD) for the database to provide a clear and visual representation of the data model. This ensures that the structure and relationships of the data are well understood and consistently implemented. The ERD also serves as valuable documentation, helps identify potential design issues early on, and offers guidance during development, keeping the database organised and scalable, ultimately enhancing the project's overall quality and maintainability.

ERD

erd

Relationships / References

  1. Users - Recipes
    One-to-Many: A user can create multiple recipes (author_id in Recipes references Users._id).
  2. Users - Comments
    One-to-Many: A user can write multiple comments (user_id in Comments references Users._id).
  3. Users - Ratings
    One-to-Many: A user can rate multiple recipes (user_id in Ratings references Users._id).
  4. Recipes - Comments
    One-to-Many: A recipe can have multiple comments (recipe_id in Comments references Recipes._id).
  5. Recipes - Ratings
    One-to-Many: A recipe can have multiple ratings (recipe_id in Ratings references Recipes._id).
  6. Category - Recipe
    One-to-Many: A category can have multiple recipes. (category_id in Recipes references Categories._id).

Collections

I have set up some basic collections for MongoDB to support the functionality of the AiryBites App. These collections include user profiles, recipes, ratings, comments and categories, each structured to efficiently store and retrieve relevant data. This setup ensures the app runs smoothly and can handle user interactions effectively. I will make changes to these collections as needed to better support the app's evolving requirements.

Recipe Collection

{
    "_id": {
        "$oid": "667d7bedfb3d723dcab788a0"
    },
    "recipe_title": "Recipe Title",
    "recipe_description": "Recipe Description",
    "instructions": [
        "Step 1\r",
        "Step 2\r",
        "Step 3\r"
    ],
    "cook_time": {
        "$numberInt": "60"
    },
    "prep_time": {
        "$numberInt": "60"
    },
    "total_time": {
        "$numberInt": "120"
    },
    "temperature": {
        "$numberInt": "6"
    },
    "servings": {
        "$numberInt": "6"
    },
    "image_url": "",
    "category": "Breakfast",
    "tags": [
        "Air Fryers",
        "   Potato",
        "   Wedges"
    ],
    "ingredients": [
        {
            "ingredient_id": {
                "$oid": "667d71f033ef874ed573d2fd"
            },
            "quantity": "6"
        },
        {
            "ingredient_id": {
                "$oid": "667d71f033ef874ed573d2fe"
            },
            "quantity": "1"
        }
    ],
    "created_at": {
        "$date": {
            "$numberLong": "1720552390327"
        }
    },
    "updated_at": "11/07/2024 13:30",
    "created_by": "username"
}

Explanation of Fields:

Wireframes

I have designed the wireframe for PC and mobile screens for the AiryBites App to ensure a seamless user experience across all devices. The layout is intuitive, featuring easy navigation and clear categorisation of recipes. The design includes a search function, detailed recipe views, user profiles, and a straightforward upload process for user-submitted recipes. This approach ensures users can effortlessly find, save, and add ingrediants to shopping list of their favourite air fryer recipes, whether they are using a desktop or a mobile device.

Home Page

Home Page

Search Results Page

Search Results Page

Category Page

Category Page

Recipe Detail Page

Recipe Detail Page

User Profile Page

User Profile Page

Testing

The app's functionality was also tested by friends and family. Their feedback was invaluable in identifying any issues and making necessary improvements.

For a detailed list of all testing steps taken, please refer to TESTING.md

Deployment

The deployment process involved several steps to ensure that the app was correctly and efficiently deployed to production environments.

Platform Deployment

For full deployment steps, please refer to DEPLOYMENT.md

Future Improvements to the AiryBites App

To enhance the user experience and functionality of the AiryBites app, I have identified several key improvements. Below is a list of these enhancements, along with reasons why some may face implementation delays due to time constraints and the current use of GitHub.

Planned Improvements

Conclusion While I aim to implement these improvements to enhance the AiryBites app, some features may experience delays due to the complexity and development time required. However, I am committed to continuously improving the app and will prioritise features based on user feedback and resource availability.

Tools and Technologies Used

Other Tools

Credits

Background Images

Images provided by PNGTree.

Favicon:

Favicon made on Favicon Generator

Research Websites

Acknowledgments

Mistakes and personal goals for improvements

I am aware my commits are not up to standards for good practices. I have tried to use the commits in the style listed below and I am also aware that at times I have made mistakes with my commit messages.

I have been using commit types like shown below to improve my commit messages: