Wishing Plan

Wishing Plan allows the user to tracks savings and calculates purchase feasibility of the user's wishes. It will also become a hub for planning bigger purchases with others, creating individual or collective wish lists to share on occasions like birthdays, Christmas and more.

Join our Discord server for faster responses and easier discussions about Wishing Plan.

Open Source

Wishting Plan 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 Wishing Plan 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 wishing.plan.com@gmail.com.

Getting started

Pre-requisites

• Install pnpm globally npm install -g pnpm
• Insdall 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.

Clerk Dashboard Setup

For this app to work you need to enable Discord as an OAuth provider. You can find the social options under User & Authentication / Social Providers in the Clerk Dashboard

If you change any setting here outside of adding Discord, you need to update the Expo code to handle any requirements you change.

Clerk Webhook Setup

For handling user creation and deletion, you need to setup a webhook in the Clerk Dashboard. You can find the webhook settings under User & Authentication / Webhooks. You need to add a webhook with the Subscribed events being user.deleted and user.created. In order for Clerk to communicate with your local development server, you need to use a tool like ngrok to expose your local development server to the internet. You can find the ngrok setup instructions here.

Installation and setup

• Clone the repository
• Create local .env cp .env.example .env and fill in the values
• Setup environment variables for Clerk
• Install dependencies pnpm install or just pnpm i
• Start the database pnpm db:dev
• Run pnpm db:push to push the database schema to the database
• Run the development server pnpm dev

For further information - Expo setup

Code Layout

It uses Turborepo and contains:

.github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  ├─ expo
  └─ next.js
      ├─ Next.js 13
      ├─ React 18
      └─ E2E Typesafe API Server & Client
packages
 ├─ api
 |   └─ tRPC v10 router definition
 └─ db
     └─ typesafe db-calls using Prisma

Project Board

For development management we are using GitHub Projects. In there you can see our backlog, issues sorted by priority and size. We are also working on creating a roadmap in there.

Repo health information

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

• Sonarcloud: https://sonarcloud.io/summary/overall?id=Andreasgdp_Wishing-Plan
• CodeScene: https://codescene.io/projects/33413/jobs/781250/results

External links for development

• Component library: https://chakra-ui.com/docs/components

Web Info

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

References

The stack originates from create-t3-turbo.