Sapi

Meet your food buddy 😋

Features

Sapi is an app for finding food buddies. Think of it as a cross between Tinder and Yelp, you'll have both great conversations and tasty food on Sapi!

• Meet new people nearby, check out their favourite foods, and send a spoon 🥄 (you can think of it as a like 😉) then start up a new conversation
• Find restaurants to meet up with your food buddies and have a great conversation
• Carry on your conversations on the app then check out your incoming spoons and send back some re-spoons
• Add details about yourself to your profile including a bio, favourite foods, and eating styles

Documentation

• Codebase Overview
• Tech Decisions
• How to Develop
• Screenshots
• FAQ

Codebase Overview

This section gives an overview of the codebase structure.

Top-level folders

• server backend deployment and configuration files
• client frontend codebase and serverless functions

server folder

• docker-compose.yaml orchestration of GraphQL-Engine and Caddy containers
• Caddyfile Caddy config file to make the GraphQL endpoint available over HTTPS
• .env.template, .env.graphql-engine.template, .env.caddy.template environment variable template files for Docker containers
• migrate/ folder containing PostgreSQL migrations and GraphQL-Engine metadata
• auth0/ folder containing Auth0 Rules for connecting Auth0 to Hasura GraphQL-Engine

client folder

• src/ folder containing Next.js codebase
• codegen.yaml, schemagen.yaml, allowlistgen.yaml config files for GraphQL Code Generator
• apollo.config.js config file for the Apollo GraphQL extension for vscode to provide intellisense for GraphQL queries
• next.config.js Next.js config file
• package.json project dependencies, scripts, babel config, et cetera

Tech Decisions

This section details the decisions behind the tech stack.

Backend

• Hasura GraphQL-Engine was chosen due to the robust set of features, extensive configuration, and instant zero-config GraphQL API provided ontop of a PostgreSQL database
• Caddy minimal-config reverse proxy server with Automatic HTTPS
• Auth0 secure authentication service that comes with integration with Hasura and Next.js

Frontend

• Next.js was chosen as the frontend React-based framework due to the included flexible routing system and static-site generation. The following packages are used client-side:

  • @auth0/nextjs-auth0 interoperability between Auth0 and Next.js
  • framer-motion animation library with intuitive API and physics-based animations
  • linaria CSS-in-JS library with a familiar Styled Components / Emotion API plus static CSS extraction
  • recoil highly flexible React state management system
  • urql lightweight React hooks based GraphQL client

• Development Tools

  • GraphQL Code Generator utility for generating typed GraphQL queries / mutations / subscriptions

How to Develop

This section will guide you through setting up a development environment.

Development Prerequisites

1. Yelp API Key Instructions
2. Google Maps API Key Instructions
3. Auth0 Application Setup Instructions
4. Auth0 + Hasura GraphQL-Engine Integration Instructions
5. Environment Variables entered into .env-cmdrc.json using .env-cmdrc.template.json as a starting point (remember to remove .template from the filename) containing the following key value pairs 👇

Env Template

{
  "dev": {
    "AUTH0_DOMAIN": "[Auth0 Domain]",
    "AUTH0_CLIENT_ID": "[Auth0 Client ID]",
    "AUTH0_CLIENT_SECRET": "[Auth0 Client Secret]",
    "AUTH0_SCOPE": "[Auth0 Scope]",
    "AUTH0_REDIRECT": "[Post-login URL redirect]",
    "AUTH0_LOGOUT_REDIRECT": "Post-logout URL redirect",
    "AUTH0_SESSION_COOKIE_SECRET": "[Secret used to encrypt the session cookie]",
    "NEXT_PUBLIC_GOOGLE_MAPS_APIKEY": "[Google Maps API Key]",
    "NEXT_PUBLIC_GRAPHQL_ENDPOINT": "[GraphQL server endpoint]"
  },
  "graphql": {
    "NEXT_PUBLIC_GRAPHQL_ENDPOINT": "[GraphQL server endpoint]",
    "GRAPHQL_ENDPOINT_HEADER_NAME": "X-Hasura-Admin-Secret",
    "GRAPHQL_ENDPOINT_HEADER_VALUE": "[Hasura Admin Secret]"
  }
}

Development Setup

This project uses pnpm although you may use your preferred package manager (npm / yarn)

Follow these steps to setup a development environment:

Backend

1. Register a domain name which will point to your GraphQL server
2. Deploy a PostgreSQL instance on AWS RDS Instructions
3. Deploy a Linux instance on AWS EC2 Instructions
4. Ensure that your RDS and EC2 instances are on the same VPC to allow communication between them
5. SSH into your EC2 instance Instructions
6. Clone this repo
7. In the server folder remove the .template suffix from the .env.template, .env.graphql-engine.template, and .env.caddy.template files and add your environment variables
8. Run sudo docker-compose up to start the GraphQL-Engine and Caddy containers
9. In the migrate folder remove the .template suffix from the .env.template file and add your environment variables
10. Install the Hasura CLI npm add -g hasura-cli then run hasura migrate apply and hasura metadata apply

Frontend

11. npm run gen:s generate a local copy of the GraphQL schema
12. npm run gen generate the GraphQL Operation files into client/src/operations
13. npm run dev start a local Next.js development server

Screenshots

Home

Nearby

Conversations

Profile

FAQ

• Q: Why is it called Sapi?
  • A: The name, Sapi, is derived from the Latin word, sapidus, meaning tasty.