Welcome to Plan-it Social

Welcome to plan-it-social-web! These are some quick notes on how to start contributing to our open source project. A good place to start is to join our Discord server.

The group meets most Mondays 6pm PST (meetup)

Helpful Links

• Discord server
• Figma wire-frame
• GitHub
• Meetup

What we're using

• Figma
• MySQL
• [PlanetScale] (https://planetscale.com/)
• Prisma
• React 18
• Remix
• Tailwind CSS
• TypeScript
• Vercel

Development

To run your Remix app locally, make sure your project's local dependencies are installed:

npm install

Afterwards, start the Remix development server like so:

npm run dev

Open up http://localhost:3000 and you should be ready to go!

If you're used to using the vercel dev command provided by Vercel CLI instead, you can also use that, but it's not needed.

Contributing

1. If you're a contributor to the repo skip to Step 2
   1. Join the group, check out the Discord server!
   2. Fork the repo
   3. Clone your fork
   4. Set your upstream to the project main branch to avoid merge conflicts git remote add upstream https://github.com/social-plan-it/plan-it-social-web.git
2. Create a branch git checkout -b <name>
3. Add your .env file (example here or ask the Discord for help on details)
4. Run npm install
5. Make your changes
6. Add you changed files with git add and git commit -m "<a stellar commit message>"
7. Push your changes to your fork with git push
8. Create a pull request
9. Iterate on the solution
10. Get merged

Formatting and Linting

Please utilize our formatting and linting command npm run lint. Also included in our documentation, are great instructions on how to setup this functionality to automatically run on save in VS code.

Type Checking

This project uses TypeScript to enforce static typing, enhancing code quality and catching potential issues early in the development process. Before submitting a pull request, ensure that your changes pass TypeScript type checking. Run the following command locally:

npm run typecheck

VS Code Setup

Use the following settings to format your files on save:

{
  // These are all my auto-save configs
  "editor.formatOnSave": true,
  // turn it off for JS and JSX, we will do this via eslint
  "[javascript][javascriptreact][typescript][typescriptreact]": {
    "editor.formatOnSave": false
  },
  // tell the ESLint plugin to run on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Prisma

We've created some handy scripts to help with database management with Prisma. Occasionally you might need to use these to update the database on your local machine.

• npm run build:db - generate your prisma client when starting out or when updates are made to the Prisma schema

• npm run update:db - prototype your schema to iterate on schema design locally

• npm run seed:db - consistently create data by seeding data into our database. We have a slightly different setup than when is in the Prisma docs. We are using --require tsconfig-paths/register to use the ~ path feature in Remix (ref: Kent C. Dodds)