# Project export: BeSustainable
This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.
## Project metadata
- Hackathon: CruzHacks 2024
- Tagline: Making sustainable food choices one step at a time.
- Devpost: https://devpost.com/software/besustainable
- GitHub: https://github.com/IdkwhatImD0ing/BeSustainable
- Video: https://www.youtube.com/embed/ukji3S3eCow?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 4 GitHub contributor(s) β Bill Zhang (42 commits), conniely (15 commits), Daniel Kim (15 commits), Restyled.io (8 commits)
## Devpost submission (written by the team)
### Inspiration
π‘ As college students juggling heavy coursework, navigating the path to address global issues can feel overwhelming. Recognizing this challenge, we brainstormed solutions for busy individuals like us to contribute to sustainability. The result is BeSustainable. We are motivated by the idea that individual actions can have a ripple effect, sparking significant change. BeSustainable isn't just an app; it's a movement. Our belief is that by spreading the word about our app, we can empower the average person to contribute to creating a more sustainable world without interpreting their daily lives. We strive to make a difference with BeSustainable, one small step at a time.
### What it does
πͺ΄ Encourage sustainability - The primary goal is to increase the sustainability habits of individuals in the world. Empower individuals - BeSustainable strives to uplift the average person to contribute small but impactful changes towards sustainability. Facilitate daily integration - We aim to smoothly integrate sustainable practices into people's lives, enhancing health and well-being without significant disruptions.
### How we built it
π οΈ Designs with Figma Frontend was built using MaterialsUI Backend was built using next.js Database MongoDB Spoonacular API Google OCR
### Challenges we ran into
βοΈ Design challenges include balancing creativity and feasibility like the flow of the camera page and wanting to add more features to increase user interactions. A frontend challenge was getting used to MaterialsUI Framework and knowing which components to use and was most convenient for our app. Knowing how to format each component to ensure that it follows the designs made for the app. Merge conflicts! We faced challenges in finding a quantitative way to create a sustainability score via a list of ingredients alongside gaining the data of the ingredients in an efficient manner from the barcode and ingredients list scans. We had trouble connecting the MongoDB with our project. We also had a difficult time working with Auth0 in order to create successful login/registration.
### Accomplishments we're proud of
ππΌ We are proud to have created BeSustainable with the intention of increasing sustainability in average peopleβs lives one step at a time. Our application has a simple and easy-to-use interface that allows the user to quickly access the data through their mobile device. We are also proud of being able to learn new technology in order to create a working app.
### What we learned
π Our group gained insightful lessons through the development of our application BeSustainable. Some of which are: Discussing the flows and features of the application through the process so weβre on the same page. Creating a general timeline for completing tasks and assigning roles to quicken the development process. Discussing the flows and features of the application through the process so weβre on the same page. Creating a general timeline for completing tasks and assigning roles to quicken the development process.
### What's next
βοΈ We would in the future add an AI chatbot that will be able to give recommendation, feedback, as well as additional info the user asks for about any given ingredients! Furthermore, we would like to encourage users to exchange contacts through the app to interact with their friends' posts. As a user obtains a certain sustainability score, they would be able to connect with others around the world rather than just locally.
## README (from the GitHub repository)
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## Detected evidence (automated analysis)
Indexed codebase: 36 recognized source files, 82 KB.
- CSS (language) β detected in the code
- JavaScript (language) β detected in the code
- MongoDB (technology) β detected in the code
- Next.js (technology) β detected in the code
- OpenAI (technology) β detected in the code
- React (technology) β detected in the code
- TypeScript (language) β detected in the code
## Codebase structure (from repository index)
### Files (47 of 47)
```
__tests__/link.test.js
.eslintrc.json
.gitignore
app/api/auth/[auth0]/route.js
app/api/post/caption.js
app/api/post/route.ts
app/api/scores/route.js
app/api/sustainability/gcpVision.js
app/api/sustainability/openaiVision.js
app/api/sustainability/route.js
app/api/sustainability/scores.json
app/api/sustainability/spoonacular.js
app/api/sustainability/utils.js
app/api/user/route.js
app/BottomNavbar.js
app/camera/Loading.js
app/camera/page.js
app/components/PostBlock.js
app/components/Tree.js
app/globals.css
app/home/page.js
app/layout.js
app/loading/Loading.js
app/loading/page.js
app/logout.js
app/page.js
app/profile/LineChart.js
app/profile/page.js
app/results/error.js
app/results/page.js
jest.config.js
jsconfig.json
lib/mongodb.js
lib/post-db.js
lib/user-db.js
middleware.ts
models/postModel.js
models/userModel.js
next.config.mjs
package.json
public/manifest.json
README.md
testcode.ps1
testCrud.js
testocr.ps1
testopenai.ps1
tsconfig.json
```
### Dependencies
- package.json: @auth0/nextjs-auth0@^3.5.0, @emotion/react@^11.11.3, @emotion/styled@^11.11.0, @ericblade/quagga2@^1.8.4, @fontsource/roboto@^5.0.8, @google-cloud/vision@^4.0.2, @mui/icons-material@^5.15.5, @mui/material@^5.15.5, @mui/material-next@^6.0.0-alpha.118, @typegoose/typegoose@^12.1.0, @zxing/library@^0.20.0, axios@^1.6.5, chart.js@^4.4.1, chartjs@^0.3.24, dotenv@^16.3.2, eslint@^8, eslint-config-next@14.1.0, google-gax@^4.1.0, jest@^29.7.0, jest-environment-jsdom@^29.7.0, mongodb@^6.3.0, mongoose@^8.1.0, next@14.1.0, next-pwa@^5.6.0, openai@^4.24.7, react@^18, react-chartjs-2@^5.2.0, react-dom@^18, typescript@5.3.3, uuid@^9.0.1
### Recent commits (newest first)
- Type
- Fix styling
- Some more updates, -pwa
- Final updates
- Works
- Merge branch 'main' of https://github.com/IdkwhatImD0ing/BeSustainable
- FInal
- fixed styling
- EVEYRTHIANS GWORKING
- Images work
- Merge branch 'main' of https://github.com/IdkwhatImD0ing/BeSustainable
- All calls work
- results page and error page
- Merge pull request #25 from IdkwhatImD0ing/progress
- Merge branch 'main' into progress
- Works yay
- Merge pull request #24 from IdkwhatImD0ing/LineChart
- Line Chart
- Fixed existing user problem
- Change
## Key source files (fetched from GitHub, selected and truncated for size)
### package.json
```
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest"
},
"dependencies": {
"@auth0/nextjs-auth0": "^3.5.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@ericblade/quagga2": "^1.8.4",
"@fontsource/roboto": "^5.0.8",
"@google-cloud/vision": "^4.0.2",
"@mui/icons-material": "^5.15.5",
"@mui/material": "^5.15.5",
"@mui/material-next": "^6.0.0-alpha.118",
"@typegoose/typegoose": "^12.1.0",
"@zxing/library": "^0.20.0",
"axios": "^1.6.5",
"chart.js": "^4.4.1",
"chartjs": "^0.3.24",
"dotenv": "^16.3.2",
"google-gax": "^4.1.0",
"mongodb": "^6.3.0",
"mongoose": "^8.1.0",
"next": "14.1.0",
"next-pwa": "^5.6.0",
"openai": "^4.24.7",
"react": "^18",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18",
"uuid": "^9.0.1"
},
"devDependencies": {
"eslint": "^8",
"eslint-config-next": "14.1.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"typescript": "5.3.3"
}
}
```
### app/layout.js
```javascript
import './globals.css'
import {UserProvider} from '@auth0/nextjs-auth0/client'
import BottomNav from './BottomNavbar'
import Logout from './logout'
export const viewport = {
themeColor: '#000000',
initialScale: '1.0',
maximumScale: '1.0',
userScalable: 'no',
colorScheme: 'light dark',
}
export const metadata = {
title: 'BeSustainable',
applicationName: 'BeSustainable',
description: 'BeReal but for food',
manifest: '/manifest.json',
icons: [
{
rel: 'apple-touch-icon',
url: '/icons/apple-touch-icon.png',
},
{
rel: 'icon',
url: '/icons/favicon-32x32.png',
},
{
rel: 'icon',
url: '/icons/favicon-16x16.png',
},
],
appleWebApp: {
capable: 'yes',
title: 'BeSustainable',
statusBarStyle: 'default',
},
}
export default function RootLayout({children}) {
return (
{children}
)
}
```
### app/page.js
```javascript
'use client'
import {useRouter} from 'next/navigation'
import {Stack, Button, Box, Typography} from '@mui/material'
export default function Landing() {
const router = useRouter()
return (
BeSustainable
Making sustainable food choices one step at a time.
)
}
```
### app/loading/page.js
```javascript
import Loading from './Loading'
export default function Page() {
return
}
```
### app/results/page.js
```javascript
'use client'
import {Stack, Button, Box, Typography, LinearProgress} from '@mui/material'
import Image from 'next/image'
import {useState, useEffect} from 'react'
import {useRouter} from 'next/navigation'
import {useUser} from '@auth0/nextjs-auth0/client'
import Error from './error'
import Loading from '../camera/Loading'
export default function Results() {
const [ingredients, setIngredients] = useState()
const [score, setScore] = useState(0)
const [image, setImage] = useState('')
const [mode, setMode] = useState('')
const [loading, setLoading] = useState(false)
const router = useRouter()
const {user} = useUser()
useEffect(() => {
if (!user) {
return
}
const score = localStorage.getItem('score')
setIngredients(localStorage.getItem('ingredients'))
setScore(score)
setImage(localStorage.getItem('image'))
setMode(localStorage.getItem('mode'))
// convert to number
fetch('/api/scores', {
method: 'POST',
body: JSON.stringify({
userId: user.sid,
increase: Number(score),
}),
})
}, [user])
// If ingredients list is empty, but not undefined
if (ingredients && ingredients.length === 0) {
return
}
if (loading) {
return
}
return (
Results
{ingredients}
{score ? score.slice(0, 5) : 0}%
{mode === 'upload' && (
)}
)
}
```
### app/profile/page.js
```javascript
'use client'
import {useState, useEffect} from 'react'
import {Avatar, Stack, Typography} from '@mui/material'
import Box from '@mui/material/Box'
import Image from 'next/image'
import {useUser} from '@auth0/nextjs-auth0/client'
import LineChartComponent from './LineChart'
export default function Profile() {
const {user} = useUser()
const [scores, setScores] = useState()
useEffect(() => {
if (!user) {
return
}
fetch('/api/scores?userId=' + user.sid)
.then((res) => res.json())
.then((data) => {
setScores(data)
})
}, [user])
return (
Profile
{user ? user.name : ''}
#12345
Way to Go Green
{scores && }
{/* */}
)
}
return (
Welcome home,
{user ? user.name : ''}