Our Next Bite

A fun web app for friends to share and discover restaurant recommendations. Never wonder where to eat next! Built with SolidJS, Vite, Tailwind CSS, Convex, Formisch, and Valibot.

Our next bite

Getting Started

Prerequisites

• Node.js (Latest stable version recommended)
• pnpm (Package manager)
• Convex account and project (see Convex docs)
• .env.local file configured (see Environment Setup below)

Installation

Clone the repository

git clone git@github.com:krake747/next-bite.git
cd next-bite

Install dependencies

pnpm install

Environment Setup

Copy the example environment file and configure your Convex deployment:

cp .env.example .env.local

Edit .env.local with your Convex deployment details (get these from your Convex dashboard):

# Used by Convex CLI for development/deployment
CONVEX_DEPLOYMENT=your-deployment-name

# Used by the application at runtime
VITE_CONVEX_URL=https://your-deployment.convex.cloud
VITE_CONVEX_SITE_URL=https://your-deployment.convex.site

Set the required Convex environment variables for authentication:

# Required for backend authentication (convex/auth.ts)
npx convex env set CONVEX_SITE_URL "https://your-deployment.convex.site"

# Required for Better Auth
npx convex env set BETTER_AUTH_SECRET "$(openssl rand -base64 32)"

Google Maps Setup

Create a Google Cloud project and enable the following APIs:

• Maps JavaScript API - Required for displaying maps
• Places API - Required for restaurant autocomplete

Create an API key and add it to your .env.local:

VITE_GOOGLE_MAPS_API_KEY=your-google-maps-api-key

Note: For Advanced Markers to work, you need a Map ID. For testing, you can use DEMO_MAP_ID. For production, create a Map ID in Google Cloud Console (Maps Management).

The app includes a Luxembourg location bias for autocomplete suggestions.

Start Convex backend dev server (syncs to your cloud dev project)

pnpm run convex:dev

In another terminal, start the frontend development server

pnpm dev

Open http://localhost:5173 in your browser.

Available Scripts

• pnpm dev - Start frontend development server
• pnpm convex:dev - Start local Convex dev server (syncs to cloud dev)
• pnpm convex:deploy - Deploy Convex to production
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm fmt - Format code
• pnpm lint - Lint code

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Feel free to open issues and pull requests to contribute to this project. Any contributions you make are greatly appreciated!

Acknowledgments

Made with ❤️ for food lovers who love trying new bites 🍝. Built with SolidJS.