Skip to content

Pytal/Sapi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

1 Commit
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Sapi Logo

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

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

client folder

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

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

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

Screenshots

Home

Home Page Search Search Results Share Widget Restaurant Page

Nearby

Nearby Page Jessica's Profile Tommy's Profile

Conversations

Conversations Page Chat with Sarah Spoons Section

Profile

My Profile Page

FAQ

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

About

Meet your food buddy πŸ˜‹

Resources

Stars

Watchers

Forks

Releases

No releases published