This project is a for the SWITCH research study by the University of South Carolina. It involves the Comprehensive Food Database that can be seen here.
We later modified this boilerplate version and adjusted it for our needs. It is now archived as an example. Note that this code is not finalized; it is merely to show an example of what you can do with the Comprehensive Food Database.
This project uses the PHP library Symfony.
To run, be sure to install Symfony and Composer.
In general, please follow this to set up the project.
You will need to get all the composer packages. Do this by running
composer update followed by composer install
NOTE: You may need PHP's xml extension. Install with sudo apt-get install php-xml and then restart apache with sudo service apache2 restart see here.
NOTE: You may be able to bypass any issues with composer update by running composer install --ignore-platform-reqs. This is not recommended, however.
To make this go faster, install php-curl with sudo apt install php-curl.
The following are useful extensions for this project.
- PHP Intelephense
- PHPDoc Comment (CTRL + Shift + i to add DocBlocks)
- PHP Namespace Resolver
- HTML Snippets
- JavaScript Code Snippets
- Symfony Code Snippets
- Symfony for VSCode
- Twig
- Twig Language 2
- Twig Language
- Emmet Live
To run the project, run
symfony server:start -d
If you run into any problems with the database, make sure you have doctrine:
composer require doctrine
You will also likely need to make migrations.
php bin/console make:migration
php bin/console doctrine:migrations:migrate
You will need to build the assets using npm.
Make sure you have all of the required npm assets by running npm i.
There has been an error with the latest versions of npm. See this.
You may need to switch node versions to version 16. You should also have nvm. Install following here
Now to install node 16:
nvm install 16
Now you should be able to run npm run build.
Food search page (without entry)
Food search page (with entry)
Clicking a food. Nutrients and image show.
Note that you can also see different portions. Here is one for tbsp.
... and one for cup.
When add a food, it goes to Stored Foods. Here is the top half of the screen.
... and here is the bottom. I had to zoom out a bit to fit it all. There are dynamic graphs that adjust to nutrition amounts.
When done entering foods, can submit them to store them to your user. I am not a front-end developer, so I leave the beautification of the "Successfully saved foods" to the reader as homework.
Going to the "Food" page, you can see a calendar with your entered foods. If you click a calendar date you can see what you ate that day. Let's click today.
Here are the pie charts for all the items we ate today. This is the first half of the page.
Screencast from 02-12-2023 01:47:27 PM.webm And here is the second half. You can scroll to see the foods.
- If this code or anyother I have written has helped you, feel free to make a donation at https://www.buymeacoffee.com/whalenlexn.