Search for food, recepies, and full detailed information on how to prepare them.

Overview

Foodipy | JavaScript Capstone

This is a group project being built in our second module of our curriculum at microverse. its a web application for listing all of the food sources and how to prepare them, using a video and an instruction guide screenshot

Our goal here is to Build an application that calls from a large data set of food from an API and also integrate some user involvement where you can like and comment on your favorite meal. click here to see deployed live version

Features implemented so far are:

Built With

  • Lighthouse (An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more).
  • Webhint (A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors).
  • Stylelint (A mighty, modern linter that helps you avoid errors and enforce conventions in your styles).
  • ESlint (A mighty, modern linter that helps you avoid errors and enforce conventions in JavaScript codes)
  • Webpack (Used for bundling JavaScript files for usage in a browser)
  • Jest (A JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly.)

To get a local copy up and running follow these simple example steps.

Prerequisites

The basic requirements for building the executable are:

  • A working browser application (Google chrome, Mozilla Fire fox, Microsoft edge ...)
  • VSCode or any other equivalent code editor
  • Node Package Manager (For installing packages like Lighthous, webhint & stylelint used for checking for debugging bad codes before deployment)

Getting Started

Cloning the project

git clone  https://github.com/harlexkhal/Foodipy <Your-Build-Directory>

Getting packages and dependencies

To get all package modules required to build the project run:

npm install

every package module required to build the project is listed in the package.json file. this is used as a reference to get all dependencies.

Building

To build the project run:

npm run build

after you run this sucessfully you'd locate the build from in the dist folder located from the parent directory of the project. two files are being built which are, core.js and index.html

Running

To run the program on a browser through a server run this command in your cli

npm start

This should open the page in your localhost on port 8080. then you'd be able to view the built page generated using webpack.

Unit-Testing

You can find each unit test cases in the __Testbase__ folder located in the parent source directory of the project. you can create your own custom unit test and test it by running

npm run test

This should run all unit test found in the unit.test.js from the __Testbase__ folder.

License

All source code files are licensed under the permissive zlib license (http://opensource.org/licenses/Zlib) unless marked differently in a particular folder/file.

Author

Comments
  • peer to peer CR second capstone

    peer to peer CR second capstone

    Hello @harlexkhal and @mnekx, Good job there is nothing to say.

    • There is no linters errors.
    • good usage of git flow.
    • the design looking good.
    • functions working perfectly.
    opened by Banstein 0
  • Update README.md

    Update README.md

    Description

    In this, the following was done

    • [x] added on a statement on how to test the app

    Checklist:

    • [x] No linter errors.
    • [x] I have used correct Gitflow.
    • [x] Work is documented in a professional way.
    • [x] List of JavaScript best practices is followed.
    opened by mnekx 0
  • Version 1

    Version 1

    Description

    In this version, the following was done:

    Type of change

    • [x] Set up the project with Webpack and Jest
    • [x] Add tests for items counter
    • [x] Find external API
    • [x] Add footer
    • [x] Add header
    • [x] Choose assets
    • [x] Display list of items on the Homepage
    • [x] Add all items counter on the Homepage
    • [x] Display Comments pop up with selected item's details
    • [x] Display number of likes for each item on the Homepage
    • [x] Display comments for a given item on the Comments pop-up
    • [x] Create feature: add new like
    • [x] Create feature: add new comment
    • [x] Add comments counter
    • [x] Add tests for comments counter
    • [x] Launched to Github pages here
    • [x] Link to Video documentation here

    Checklist:

    • [x] No linter errors.
    • [x] I have used correct Gitflow.
    • [x] Work is documented in a professional way.
    • [x] List of JavaScript best practices is followed.
    opened by mnekx 0
  • Fix README.md

    Fix README.md

    Description

    In this milestone, I update the social network handles for Alex's account names.

    Type of change

    • [x] update handles for Alex to equal respective accounts

    Checklist:

    • [x] No linter errors.
    • [x] I have used correct Gitflow.
    • [x] Work is documented in a professional way.
    • [x] List of JavaScript best practices is followed.
    opened by mnekx 0
  • Add Responsiveness

    Add Responsiveness

    Description

    In this milestone, I added responsiveness to the site to make it look decent on smaller devices.

    Type of change

    • [x] Add media queries for breakpoints max-width: 960px, 768px
    • [x] Updated README.md
    • [x] Added MIT license
    • [x] Updated screenshot.png

    Checklist:

    • [x] No linter errors.
    • [x] I have used correct Gitflow.
    • [x] Work is documented in a professional way.
    • [x] List of JavaScript best practices is followed.
    opened by mnekx 0
  • Peer-review week-5 module 2

    Peer-review week-5 module 2

    Hello @harlexkhal we took a look at your project and we liked what you did. we observed that you followed good coding practices including

    • No linter issues
    • git flow
    • writing meaningful commit messages

    However we also observed that you did not follow some practices as they are supposed to be implemented.

    • Please consider breaking the project to small tasks and working on them in different branches as opposed to having one long Pull request
    • Consider using a paradigm that is understood by your teammates to avoid conflicts and most importantly to give the code reviewers an easy time when reviewing your code,

    with no further issues to mention we think in general you did a good job on the project and Kudos to you and your partner.

    opened by daudi13 0
  • UI Bug Fixes

    UI Bug Fixes

    Description

    In this, the following fixes were made

    Type of change

    • [x] removed iframe border with border: none
    • [x] added comments count placeholder
    • [x] repositioned the 'X' for the modal

    Checklist:

    • [x] No linter errors.
    • [x] I have used correct Gitflow.
    • [x] Work is documented in a professional way.
    • [x] List of JavaScript best practices is followed.
    opened by mnekx 0
  • Create GUI

    Create GUI

    Description

    In this milestone, I created the GUI of the app which contains the following tasks

    Type of change

    • [x] Add header
    • [x] Add footer
    • [x] Choose assets

    Checklist:

    • [x] No linter errors.
    • [x] I have used correct Gitflow.
    • [x] Work is documented in a professional way.
    • [x] List of JavaScript best practices is followed.
    opened by mnekx 0
  • Peer-to-peer Code Review - M2W5

    Peer-to-peer Code Review - M2W5

    The project and Kanban board have good structure. Here are few suggestions:

    • Keep modules inside src directory.
    • It is better to keep commit small and relevant. Even if things are copied from old projects, it is better to group the changes in independent and relevant commits.
    • It is better to add meta tags in HTML when there are needed.
    opened by ahangarha 0
  • [0.5pt] Find external API - group task

    [0.5pt] Find external API - group task

    Find an API to base the development of the webapp around it. The API should allow you to

    • Get a list of items with a unique item id (or generate the unique id).
    • For a given item, get detailed information about it. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.
    opened by harlexkhal 0
  • [4pt]  - Display list of items on the Homepage - Student A

    [4pt] - Display list of items on the Homepage - Student A

    Create the main part of the homepage that keeps the layout from the wireframe:

    Screenshot 2021-06-27 at 21 50 23

    When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

    Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

    This task does not include displaying the number of likes for each item.

    This task does not include the counter of the items.

    opened by harlexkhal 0
Owner
Alexander Oguzie-Ibeh
Software Engineer & Game programmer, I have a strong niche for good code architectural design and optimization. C++,C#, Java, JS, PHP. Open to new opportunities
Alexander Oguzie-Ibeh
Food Delivery APP is a website designed to provide interactive user experience and increase user engagement when ordering food delivery.

Food-Delivery-APP Features Food Delivery APP is a website built with HTML/Tailwind CSS/JavaScript, React and enhanced with 3D design using Spline to p

Qian Xiang 3 Oct 6, 2022
API for the Baby Food Introduction Application. Keep your baby's food introductions in check with this application and backtrack in case of allergies!

Baby food introduction API This API is part of the Baby Food Introduction application, which aims to help technological parents keep track of the food

David Alecrim 6 Nov 25, 2022
This is food detection WebApp, which will tell users about the nutrients value of particular food image which they upload

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ankush Gupta 3 Sep 8, 2022
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
"Jira Search Helper" is a project to search more detail view and support highlight than original jira search

Jira Search Helper What is Jira Search Helper? "Jira Search Helper" is a project to search more detail view and support highlight than original jira s

null 41 Dec 23, 2022
🧙 Mage is an open-source data management platform that helps you clean data and prepare it for training AI/ML models.

Intro Mage is an open-source data management platform that helps you clean data and prepare it for training AI/ML models. What does this do? The curre

Mage 2.5k Jan 4, 2023
null 8 Nov 11, 2022
A webpage where the user can search for different TV shows, comment them and like them.

TV Shows In this project we built a webpage where the user can search for different TV shows, comment them and like them. Video Built With Major langu

Giuseppe Tomasini 6 Jul 9, 2022
A curated collection of common interview questions to help you prepare for your next interview.

30 Seconds of Interviews A curated collection of common interview questions to help you prepare for your next interview. This README is built using ma

30 seconds 11k Jan 7, 2023
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 2022
Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Uptime Monitoring API Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about thei

Mohamed Magdi 2 Jun 14, 2022
This repository contains the Solidity smart contract of Enso, a detailed list of features and deployment instructions.

Enso NFT Smart Contract This repository contains the Solidity smart contract of Enso, a detailed list of features and deployment instructions. We stro

enso NFT 3 Apr 24, 2022
A github action that provides detailed bundle analysis on PRs for next.js apps

Next.js Bundle Analysis Github Action Analyzes each PR's impact on your next.js app's bundle size and displays it using a comment. Optionally supports

HashiCorp 369 Dec 27, 2022
A more detailed discord data package explorer

Ever wondered what Data discord collects? Or did you ever want to view what's inside of a discord package? Discord Package is a customisable tool that allows you to view your data in a fancy way. You could also use our exporting feature to share your selected data with your friends.

Peter 220 Jan 5, 2023
The Main Purpose The main purpose of creating an anaonline information system, as an effort responsive to the management of the data of the Members of the Persis Youth based on information technology systems

landing-page-pp landing-page-pp.vercel.app #The Main Purpose The main purpose of creating an anaonline information system, as an effort responsive to

Hilman Firdaus 6 Oct 21, 2022
A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery ?? Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Linus Lee 215 Dec 30, 2022