MomentMeal - A marketplace for food and recipes.

MomentMeal is a platform that connects food lovers and chefs. It allows users to discover new recipes, share their own, and modify existing ones to make it just right for them.

Getting started

Pre-requisites

• Install pnpm globally npm install -g pnpm
• (Optional) Install Docker e.g., Docker Desktop for Windows or Docker Engine for Linux. See Docker installation for more information.
  • This is to have a local database for development. You can also use a remote database like the ones hosted by Neon

Clerk Dashboard Setup

For this app to work you need to setup clerk OAuth providers. You can find the social options under User & Authentication / Social Connections in the Clerk Dashboard

Pr. default we are using Google, Facebook, and Discord so for best experience you should setup these in the Clerk Dashboard.

Installation and setup

• Clone the repository
• Create local .env for the main app (./apps/web/.env). Do this by:
  • cp apps/web/.env.example apps/web/.env
  • And fill in the values
• Install dependencies pnpm install or just pnpm i
• Start the database pnpm db:dev or if using a provider like Neon, you can skip this step
• Push the database schema to the database
  • From apps/web: pnpm prisma:push
  • Or from the root: pnpm run --filter=momentmeal prisma:push
• Run the development server pnpm dev

Open Source

MomentMeal is an open source project. We welcome contributions from the community. There are many ways to contribute to the project, from writing tutorials or blog posts, submitting bug reports and feature requests or writing code which can be incorporated into MomentMeal itself. Here is a list of some of the ways you can contribute to the project:

• Report bugs - If you find a bug, please report it in the issue tracker.
• Suggest new features - If you have an idea for a new feature, please suggest it in the issue tracker.
• Implement new features - If you want to implement a new feature, please create an issue in the issue tracker and describe the feature you want to implement. This will allow us to discuss the feature and make sure it fits with the project.
• Improve code quality - We use SonarCloud and CodeScene to measure the code quality of our project. You can help us improve the code quality by fixing bugs and vulnerabilities.
• Improve documentation - If you find any errors in the documentation or want to improve it, please contribute with a pull request.
• In the future, we will want to implement translations of the app. If you are interested in helping us with this, please contact us at [email protected].

Get in contact with maintainers

If you have any questions or want to get in contact with the maintainers, you can reach out to us on Discord or by email at [email protected].

Branching strategy

We are using two branches that are protected:

• prod - This is the main branch where all the code that is in production is located.
• master - This is the branch where all the code that is deployed to staging is located.
  • master should always be deployable to staging thereby also prod.
  • All changes from maintainers and contributers should go toward master.

All other branches are dev branches that are created from master and merged back into master when the development is done.

NOTE: Dev branches meaning short-lived branches that are created for a specific feature or bug fix. If the feature cannot be completed in a short amount of time, it is recommended to surround the feature with a feature flag and merge the branch into master quickly to avoid merge conflicts.

Deployment

Staging (staging.momentmeal.com)

The staging environment is automatically deployed when changes get to the master branch. This is done frequently, as all development goes here. Stating is used to test the state of master, to see if we are ready to deploy to prod with new features/improvements.

Production (momentmeal.com)

The production environment is automatically deployed when changes get to the prod branch. There is no strict cadence for this, but it is done when we have a set of features/improvements that are ready to be released. It will also happen, that there is a bug in production we need to address, then a hotfix/some-name is made toward prod to solve the issue, directly deploying to prod. But this should not happen often

Development

UI Components

Since we are making use of the Shadcn UI library, we have a set of components that are already made for us. This means that we can focus on the business logic and not the UI. If you need a component that is not yet in the /components/ui folder, take a look at Shadcn UI and see if the component is available there. Then you should be able to from the /apps/web directory run pnpm dlx shadcn-ui@latest add ??? replacing ??? with the relevant component. This will automatically install add the component to the ui folder.

If there is not yet a component in the Shadcn UI library, this typically means the component is a domain-specific component. These should be created in the /components folder, ideally in a relevant subfolder.

Feature Flags

Create the feature flag in PostHog and use the feature flag in your code.

(Server rendered components) Follow the steps below to create a feature flag:

import PostHogClient from '<relative path to app/posthog.ts>';

export default async function Home() {
  const posthog = PostHogClient();

  const flagEnabled = await posthog.getFeatureFlag(
    'testFeature',
    <user distinct id>
  );

(Client rendered components) Follow the steps below to create a feature flag:

import { useFeatureFlagEnabled } from 'posthog-js/react'

function App() {
    const flagEnabled = useFeatureFlagEnabled('testFeature')

    if (flagEnabled) {
        // do something
    }
}

Project Board

For development management we are using GitHub Projects. In there you can see our backlog, issues sorted by priority and size.

How the board is used

• Main : This is the main board where all issues that are ready to be picked up, or are in progress, are located.
• Actions Needed : This is where issues that are blocked or need more detail are located.
• Good First Issue : This is where issues that are good for new contributors are located.
  • Issues with the label good first issue are automatically added to this board.
• Bugs : This is where all bugs are located.
  • Issues with the label bug are automatically added to this board.

As a contributor

Feel free to pick up any issue that is in the main board. If you are new to the project, you can start by looking at the Good First Issue board.

In any case, if you have any questions, feel free to ask in the issue or in the Discord server, no matter what board the issue is in.

Repo health information

Here is the current overview of the code health of the repository measured by:

• Sonarcloud: https://sonarcloud.io/summary/overall?id=BHelpful_BHelpful

External links for development

• Clerk docs: https://clerk.com/docs
• Component library: https://ui.shadcn.com/docs
• Prisma docs: https://www.prisma.io/docs
• Tailwind CSS docs: https://tailwindcss.com/docs

Web Info

The smallest width we will accommodate for the webpage is 240px.

Credits

This project has taken inspiration from the following projects:

• https://github.com/sadmann7/skateshop
• https://github.com/joschan21/quill Both https://github.com/sadmann7 and https://github.com/joschan21 have done some awesome work, so go support them.