This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
I built this project to learn more about React and Next.js and to get nutritional information about many foods from place.
Nutrition Data retrieves nutritional information about many foods from the USDA food database. These foods include fresh produce, meats, fish, dairy, and packaged foods.
React app structure with Next.js. How to make axios queries to an api using React Query. Material UI theme and how to extend a theme.
I used react query instead of useEffect to make the api call. The useEffect hook runs after rendering the entire user interface. So the api call will start after completing the rendering of the UI. By using react query data can be fetched data and rendered in parallel.
The biggest challenge I faced was figuring out how the USDA food database api worked. The documentation is poor. This link https://app.swaggerhub.com/apis/fdcnal/food-data_central_api/1.0.1#/FDC/getFood is the documentation. There isn't a table that describes which number corresponds to which nutrient name in the GET /v/food/{fdcId} call. I typed in numbers in ascending order and then watched the response to get what nutrient name corresponded with which number.
Features I hope to add: Add the fonts currently used for the nutritional labels.
Here is the link to signup for an api key: https://fdc.nal.usda.gov/api-key-signup.html
Here is a live version: https://nutrition-data.vercel.app/