Better Beans

Better Beans is a web app fusion for coffee aficionados to find local coffee shops, with popular chain branches filtered out. The app generates a shop page for each coffee shop based on Google Places data with integrated mapping. Users can leave reviews and track the shops they've "bean" to.

---

Technologies

---

App Components

Log In and Sign Up

• Developed by Jesus Gonzalez and Jan Deocampo
• Users can log in with their Google, Facebook, or GitHub accounts.

Map and Search

• Developed by Ya Liu and Daniel Prejs
• Google Places and Map integrated search function for local coffee shops that uses Regex to filter out chain locations. Results show in list and map form on desktop while mobile users have the option to toggle.

Shop and Reviews

• Developed by Izzy Lee, Stormi Hashimoto, and Qinyu Zhu
• Each shop is dynamically generated based on Google Places data and any existing review/visit data. Logged in users can leave reviews and ratings on shops they've been to, as well as add shops to their list of shops they've "bean" to or want to visit.

Profile

• Developed by Izzy Lee and Jesus Gonzalez
• Users can see the reviews they've left, see what shops they've "bean" to, and which ones they want to visit next.

Backend Architecture and Database

• Developed by Andy Fang, Jan Deocampo, Stormi Hashimoto, and Qinyu Zhu
• Postgres databased with GraphQL integration for standardized queries.

UI Owner

• Developed by Van Nguyen
• Created the initial visual design proposals for the client and responsible for the app design, colors, and light mode.

---

Contributers

Daniel Prejs

Izzy Lee

Ya Liu

Jan Deocampo

Andy Fang

Stormi Hashimoto

Jesus Gonzales

Qinyu Zhu

Van Nguyen

Installation

npm is the package management system for this project.

1. Install dependencies

   npm install

2. Create a .env file in the root directory

   # Set to production when deploying to production
   NODE_ENV=development
   
   # Database URL
   DATABASE_URL=<YOUR_DATABASE_URL>
   
   # Apollo Graphql client server URI
   APOLLO_URI=<YOUR_APOLLO_URI>
   
   # Firebase Variables
   NEXT_PUBLIC_FIREBASE_API_KEY=<YOUR_API_KEY>
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<YOUR_DOMAIN>
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=<YOUR_PROJECT_ID>
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<YOUR_STORAGE_BUCKET>
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<YOUR_MESSAGING_SENDER_ID>
   NEXT_PUBLIC_FIREBASE_APP_ID=<YOUR_APP_ID>
   
   # Google Places API
   NEXT_PUBLIC_GOOGLE_API_KEY=<YOUR_GOOGLE_PLACES_API_KEY>

3. Run production client

   npm run build

Using the app in development mode

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. 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.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Firebase Authentication set-up

You will need a firebase account to get started. Create a project, and an application for the project.

Once you have your keys, add them to the .env file in the root directory. You will need these to initialize firebase.

In Next.js, the convention for naming environment variables is that they have to start with NEXT_PUBLIC.

The app is currently set up to use Google/Facebook/Github authentication. You will need to activate those sign-in methods on firebase or remove the sign-in components you do not wish to use from pages/login/index.js.

Google Maps API set-up

• You will need a Google Maps API key to get started.
• You can create a key here: https://console.cloud.google.com/google/maps-apis/start
• Click on the credentials tab on the left side of the page
• Click on the Create Credentials button at the top of the page and follow the instructions