# Project export: Neophil
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: TreeHacks 2024
- Tagline: It's a new dawn by fostering a new love for trying new things: a web app showing you new foods and new experiences based on your life.
- Devpost: https://devpost.com/software/neophil
- GitHub: https://github.com/TreeHacks2024/TreeHacksProject
- Demo: https://www.canva.com/design/DAF9D-3-mEE/vVI5_4Sl-XBkZDNZm5ZSKQ/edit
- Video: https://www.youtube.com/embed/4AjrqZddpFc?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 3 GitHub contributor(s) — Kevin Phouisangiem (15 commits), caseychen14 (9 commits), Jay (5 commits)
## Devpost submission (written by the team)
### Inspiration
Neophile: defined as the love of or enthusiasm for what is new or novel. / Nearly 1 in 4 adults are lonely where 40% of respondents aged 16-24 reported feeling lonely often or very often (Mental Health Foundation) and 1 in 3 older adults aged 50–80 (34%) (CNN). Our web app's name Neophil is derived from this definition of our goal to push anyone, no matter their identity, age, or background to explore and do more of what is unfamiliar but exciting. Our target market is youth, early career professionals and seniors--the people who are most vulnerable of falling into the traps of routine and social isolation and missing the benefits of entertainment, fitness (health), and personal development (education). After experiencing 3 years of isolation, and examining the interplay of shifted social dynamics and emphasis on how immensely isolation culture has perpetuated the culture of social isolation across all populations from developing youth to our seniors, we noticed that people are always inherently afraid to try new things that push them out of their comfort zone. Some people also experience decision fatigue and do not have time do to research on what new things they should explore. That is how the idea of Neophil was born.
### What it does
This website generates a proposal for a novel experience for the user to do in the category of exploring new foods or new experiences (recreation, fitness). Depending on the category they select, we built our app to further customize suggestions to our users via proposing location specific suggestions via implementation of the Yelp API, a logarithmic sorting function to propose NEW or counter experiences to users and/or analysis of biometric data parameters (in the case of Fitness/Recreation proposals). (E.g. if you have a range of BP outside of 60-100 bpm, then it will suggest an activity that is more promoting towards your cardiovascular health).
### How we built it
We built it using React, Typescript, Bootstrap, Node.js, Express.js and C++. We also used Canva to create a mockup of what the ideal website should look like before trying to code the same elements with React into the actual website. We tried our best to develop an algorithm that can output proper response after prompting backend based on running geolocation, a json database in backend to output proper suggestions base on user input, and a separate disconnected component (for now...) of integrating biometric information to filter our web app's suggestions at improving one's fitness journey! For the hardware component, it is a visual/hardware representation of collection/synchrony of smart watches/health data that will infer a certain physiological state of health due to our lack of access to a Smartwatch. Based on this implication, it will suggest different physical activities that can positively impact health.
### Challenges we ran into
2/4 of our team are beginners in the hackathon space where it is either our first ever hackathon or we come from zero technical experience or background. This provided a significant challenge but a challenge that stimulated immense personal development and growth in our skills in building, adapting to change, and learning new things. We ran into challenges almost every hour but we worked together to overcome them by learning to communicate effectively and efficiently between each other as well as accessing resources online, mentors onsite to solve the problems we had and learn from them. We took a long time to be able to learn/adopt a solution but in the end, we celebrate in the fact that we got it to work. The biggest challenge for beginners like our team is building up a fully functional integrated product with all components of backend, front end and hardware connected however, the biggest thing may be the success in building our personal development and collaboration. We still are challenged with incorporating the hardware and frontend and figuring out that aspect. We had hoped to use TerraAPI but did not possess a smart watch in order for our specific use case of the watch and API
### Accomplishments we're proud of
We are most proud of creating something that incorporates the strength of all the skills each of our team members had and working together to ideate and finetune a web app that can bring about social fulfillment, growth, and positive impact! We accomplished creating an eye catching mockup of what we plan our website to look like in the future. We accomplished creating the website of the prototype version. In addition, we came up with a mock representation of it's connection to smart devices. We overcame the beginner's experiences and hesitancies with participating at a hackathon at this scale and learned and grown personally, professionally, and via skills.
### What we learned
We learned to utilize every team member's different skill set to the best of their abilities. For the majority of our team, it was our first time working with this kind of tech stack and integrating the different pieces together. We learned to utilize LLMs to try to develop an algorithm for appropriate output of suggested activities or restaurants. We learned how to integrate different elements of Bootstrap elements into a React website based off a Canva mockup design and flow of the user experience. We learned that Canva is a potential tool for ease of developing such mockups and We also learned to use hardware by being trained in Stanford's PRL lab and accessing microcontrollers like Arduino, jumper wires, different sensors and coding that function of this hardware on Arduino IDE and C++.
### What's next
Our team is determined to solve the engineering and fundamental build steps that we need to improve on to build out our app fully. This is accomplishable with time. This includes working on the algorithm to output a proper suggestion to user based on set criteria to solve for novel experiences/set parameters. In terms of setting parameters for the app for Fitness and Recreation, we hope to integrate it with smart devices that track biometric data in order to provide a platform integrated with a technology like TerraAPI that can extract biometric data easily from a smart watch and integrate into our web app. In terms of long future vision, we plan to expand the categories users can select from so that our mission of doing novel things may expand into all realms of daily living and wellness of an individual beyond just discovering new food opportunities. We also plan to account for people that have disabilities and allergies to make it inclusive to as possible. In addition, we want to be able to link across multiple accounts so the data can be used to provide a more personalized recommendation for the next activity the user should try out. In the end, our goal is to bring this product to life initially as a pilot for the markets of students, new graduates and young professionals and then extend it with a multi-language feature for seniors and older folks. References Loneliness and isolation: https://www.cnn.com/2023/10/24/health/lonely-adults-gallup-poll-wellness/index.html https://www.mentalhealth.org.uk/our-work/public-engagement/unlock-loneliness/loneliness-young-people-research-briefing Health References: https://www.health.harvard.edu/heart-health/should-i-worry-about-my-fast-pulse#:~:text=Heart%20rates%20that%20are%20consistently,the%20rest%20of%20the%20body. Arduino Uno Hardware Circuitry: https://www.youtube.com/watch?v=eYn9XzNepLQ&ab_channel=iTechShouters, Arduino Uno Library for
## README (from the GitHub repository)
# TreeHacksProject
TreeHacks 2024 Project
## Detected evidence (automated analysis)
Indexed codebase: 22 recognized source files, 33 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- HTML (language) — detected in the code
- React (technology) — detected in the code
- TypeScript (language) — detected in the code
- C++ (language) — claimed on Devpost, not found in the code
- JavaScript (language) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code
- Python (language) — claimed on Devpost, not found in the code
## Codebase structure (from repository index)
### Files (34 of 34)
```
.gitignore
backend/index.ts
backend/package.json
backend/tsconfig.json
hardware/heartrate_sensor_component.ino
LICENSE
my-app/.gitignore
my-app/package.json
my-app/public/index.html
my-app/public/manifest.json
my-app/public/robots.txt
my-app/README.md
my-app/src/App.css
my-app/src/App.test.tsx
my-app/src/App.tsx
my-app/src/Components/Footer.tsx
my-app/src/Components/Home.tsx
my-app/src/Components/LandingPage/LandingPage.tsx
my-app/src/Components/LandingPage/sun.css
my-app/src/Components/QuestionsPage/QuestionsPage.tsx
my-app/src/Components/QuestionStatus/QuestionStatus.css
my-app/src/Components/QuestionStatus/QuestionStatus.tsx
my-app/src/Components/Sun/SunAnimation.css
my-app/src/Components/Users/backendAlgorithm.ts
my-app/src/Components/Users/Recreation.tsx
my-app/src/Components/Users/UserInputs.json
my-app/src/Components/Users/wordvecs25000.json
my-app/src/index.css
my-app/src/index.tsx
my-app/src/react-app-env.d.ts
my-app/src/reportWebVitals.ts
my-app/src/setupTests.ts
my-app/tsconfig.json
README.md
```
### Dependencies
- backend/package.json: @types/express@^4.17.21, cors@^2.8.5, express@^4.18.2, node-fetch@^2.7.0, ts-node@^10.9.2
- my-app/package.json: @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, @types/jest@^27.5.2, @types/node@^16.18.82, @types/react@^18.2.56, @types/react-dom@^18.2.19, bootstrap@^5.3.2, react@^18.2.0, react-bootstrap@^2.10.1, react-dom@^18.2.0, react-scripts@5.0.1, typescript@^4.9.5, web-vitals@^2.1.4
### Recent commits (newest first)
- Merge branch 'main' of https://github.com/TreeHacks2024/TreeHacksProject
- File upload of ML json file, wip
- last min changes
- Update QuestionsPage.tsx
- Create heartrate_sensor_component.ino
- yelp api now factors cost
- removed extra food search feature that was on the bottom
- pages with state
- progress rn
- Update index.html
- Create SunAnimation.css
- Merge branch 'main' of https://github.com/TreeHacks2024/TreeHacksProject
- node
- spinning sun
- yelp and design changes
- single entry bar
- Merge branch 'main' of https://github.com/TreeHacks2024/TreeHacksProject
- adds a recommendation system to page
- yelp api
- adds rec to page
## Key source files (fetched from GitHub, selected and truncated for size)
### backend/package.json
```
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "ts-node index.ts",
"dev": "nodemon index.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"node-fetch": "^2.7.0",
"ts-node": "^10.9.2"
},
"devDependencies": {
"@types/express": "^4.17.21"
}
}
```
### my-app/package.json
```
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.82",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.10.1",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
```
### backend/index.ts
```typescript
import express, { Request, Response } from 'express';
const fetch = require('node-fetch');
const cors = require('cors');
const app = express();
app.use(cors());
const PORT = process.env.PORT || 5000;
app.use(express.json());
app.post('/api/yelp', async (req: Request, res: Response) => {
const apiKey: string = 'Vy0xKItRP_qjFgW4JnvWVhrdHnW9-mwpP0ou6NnCVjtJ_B0lurvfDoPzsL54mfwyCNCpDf4zlyZWLagEFKDSLdHVaR-sTz6P-Wujt6zTnq6c_VDw9a5ijpsDMcPQZXYx'; // Ensure you use your API key securely
const userLocation: string = req.body.location;
const url: string = `https://api.yelp.com/v3/businesses/search?location=${userLocation}&price=${req.body.price}`;
try {
const yelpResponse = await fetch(url, {
method: 'GET',
headers: {
Authorization: `Bearer ${apiKey}`,
'content-type': 'application/json',
},
});
if (!yelpResponse.ok) throw new Error('Yelp API response was not ok.');
const data = await yelpResponse.json();
res.json(data);
} catch (error) {
console.error('Error:', error);
res.status(500).json({ message: 'Internal Server Error' });
}
});
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
```
### my-app/src/App.tsx
```typescript
import './App.css';
import Home from "./Components/Home";
import Rec from "./Components/Users/Recreation";
import Footer from "./Components/Footer";
import Container from 'react-bootstrap/Container';
function App() {
return (
);
}
export default App;
```
### my-app/src/index.tsx
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```
### my-app/src/react-app-env.d.ts
```typescript
///
```
### my-app/src/setupTests.ts
```typescript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
```
### my-app/src/App.test.tsx
```typescript
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render();
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
```
### my-app/src/reportWebVitals.ts
```typescript
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
```
### my-app/src/index.css
```css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: "#2f5d51";
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
```
[12 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]