EventBlender (formerly Table Planner)

EventBlender is a web based tool for ensuring that participants in different events, such as networking or social gatherings, get the right opportunities for meeting new people. It was developed based on the real need of an entrepreneur who is arranging networking over a three course dinner, with clear intermittent periods when a change of group/table occurs. The tool takes into account group belonging (such as a “company” or similar) and runs an optimization algorithm to assign participants a place in each round, with the option of manual adjustment of the suggested set-up.

Official website: https://eventblender.app/

Table of Contents

• Stack
• Development
• Deployment
• GitHub Actions
• Testing
• Code style
• Testing
• Contribution
• About Prototyp

Stack

• Render app deployment
• Production-ready PostgreSQL Database
• Healthcheck endpoint for Render
• GitHub Actions for deploy on merge to production and staging environments
• Email/Password Authentication with cookie-based sessions
• Database ORM with Prisma
• Styling with Tailwind
• End-to-end testing with Cypress
• Local third party request mocking with MSW
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Development

• Initial setup: If you just checked out the project.

Make sure that you have Docker installed in your machine

brew install docker

Setup local database

docker compose up

Install dependencies

npm install

Executes migrations and setup database (seeding fake user, events, etc)

npm run setup

• Start dev server:

  npm run dev

This starts the app in development mode, rebuilding assets on file changes.

Prisma

We use prisma ORM to handle the database. We have a dev and a test db.

• To generate migrations, apply pending and generating the types based on the schema:

  npm run db:migrate

Seeding

• Seed the DB from the file prisma/seed.ts:

  npx prisma db seed

The database seed script creates a new user:

• Email: [email protected]
• Password: racheliscool

It also creates some events, tables, switcheroos and more.

Schema validation with Zod

We use zod for data validation. Why? .

We generate zod validation schemas based on the prisma schema. We use zod-prisma for that.

It hooks into the prisma schema as a generator. so every time we regenerate the prisma schema the zod-prisma validation schemas are generated too.

Deployment

Note: Currently, only production deployment is configured. The staging environment setup is documented below but not actively deployed.

We have one GitHub Action that handle automatically deploying your app to production and staging environments.

Prior to your first deployment, you'll need to do a few things:

• Sign up for a Render.com account

• Create a new GitHub Repository, and then add it as the remote for your project. Do not push your app yet!

  git init
  git remote add origin <ORIGIN_URL>

• Create two web services on Render, one for staging and one for production:

  1. Go to your Render Dashboard
  2. Click "New +" and select "Web Service"
  3. Connect your GitHub repository
  4. Configure the service:
     • Name: eventblender (for production) and eventblender-staging (for staging)
     • Environment: Node
     • Build Command: npm install && npm run build
     • Start Command: npm start
     • Auto-Deploy: Yes (for main branch on production, dev branch on staging)

• Create a PostgreSQL database for both your staging and production environments:

  1. In your Render Dashboard, click "New +" and select "PostgreSQL"
  2. Configure the database:
     • Name: eventblender-db (for production) and eventblender-staging-db (for staging)
     • Database: eventblender
     • User: eventblender
  3. Note down the connection details (you'll need these for environment variables)

• Add environment variables to your Render services:

  1. Go to your web service settings
  2. Add the following environment variables:
     • DATABASE_URL: The connection string from your PostgreSQL database
     • SESSION_SECRET: Generate a random secret (you can use 1password or run openssl rand -hex 32)
     • NODE_ENV: production (for production) or staging (for staging)

Now that everything is set up you can commit and push your changes to your repo. Every commit to your main branch will trigger a deployment to your production environment, and every commit to your dev branch will trigger a deployment to your staging environment.

If you run into any issues deploying to Render, make sure you've followed all the steps above and if you have, then check the Render documentation or contact Render support.

GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc. Anything in the dev branch will be deployed to staging.

Testing

Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the cypress directory. As you make changes, add to an existing file or create a new file in the cypress/e2e directory to test your changes.

We use @testing-library/cypress for selecting elements on the page semantically.

To run these tests in development, run npm run test:e2e:dev which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.

We have a utility for testing authenticated features without having to go through the login flow:

cy.login()
// you are now logged in as a new user

We also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:

afterEach(() => {
    cy.cleanupUser()
})

That way, we can keep your local db clean and keep your tests isolated from one another.

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.

Code style

Code style is enforced using ESlint, Prettier and .editorconfig. If you want to know in detail how its configured I recommend you read this wonderful article

Editor config

We use editorconfig to unify common settings for any code editor such as indent size and indent style. Config found in .editorconfig.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.

Stripe

To use the testing environment, you set the testing keys STRIPE_SECRET_KEY & STRIPE_WEBHOOK_ENDPOINT_SECRET.

Download the stripe cli: $ brew install stripe/stripe-cli/stripe

Login with your account ([email protected]): $ stripe login

Listen to the local webhook: $ stripe listen --forward-to localhost:3000/api/stripe/webhook

Test cards: https://stripe.com/docs/testing

Contribution

We welcome all contributions, whether through issue reporting, code contributions, or feature requests! Please check the Issues section of this repository to ensure your request has not already been submitted. If you don't find an existing issue, feel free to create a new one and tag it with the appropriate labels.

About Prototyp

EventBlender is maintained by Prototyp, a code lab building digital products for businesses breaking new ground.

Looking to break new ground?

Let us tell you more about our working methods, earlier cases, and how we can help you reach the next level together. We are always interested in new contacts and collaborations. Get in touch - and let’s grab a cup of coffee!