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.
- 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
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.
- 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 justpnpm 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
- From apps/web:
- Run the development server
pnpm dev
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].
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].
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.
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
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.
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
}
}
For development management we are using GitHub Projects. In there you can see our backlog, issues sorted by priority and size.
- 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.
- Issues with the label
- Bugs : This is where all bugs are located.
- Issues with the label
bug
are automatically added to this board.
- Issues with the label
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.
Here is the current overview of the code health of the repository measured by:
- 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
The smallest width we will accommodate for the webpage is 240px.
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.