robin-natale / veganhacktivists

The veganhacktivists.org website, built using Next.js and hosted on our Digital Ocean Docker droplet

Vegan Hacktivists

Our official website. On here you can find information about the different projects Vegan Hacktivists has been working on throughout the last couple of years. You can also find out what services we provide, who we are, who we partner with and read our blog.

Introduction

Team Avocado is the new JavaScript focused team of the Vegan Hacktivists. We're going to take on more projects in the future, but as the first one we're gonna rebuild our old main website https://veganhacktivists.org/ ➡️ https://new.veganhacktivists.org/.

We're using Next.js and Tailwind for that. In this trello board you can find more stuff in the info column, for example, some of the images to be used, fonts, colors... On the board you can also access the Things to do cards. If you are doubting which card to pick first, talk to Joaquín [TL] 🇪🇸 and we'll take a look at the available ones or even create others, in order for you to get used to the project.

Because this team is so new we still have to document all of this somewhere, so reach out to the #🥑vegan-hacktivists channel on Discord if you need anything or something is missing! 💚

Table of contents

• Vegan Hacktivists
  • Introduction
  • Table of contents
  • Getting Started
    • Setting up env vars
    • Setting up the database
    • Installing the dependencies
    • Migrate and seed the database
    • Coding conventions and guidelines
    • Configuring your editor
  • Grab a card
  • Frequently Asked Questions
  • Resources

Getting Started

Setting up env vars

There's a sample .env.example file with the values that need to be defined and some sensible defaults.

cp .env.example .env # .env.local works too!

To get the basic functionality to work you'll need at least:

• CF_SPACE_ID
• CF_DELIVERY_ACCESS_TOKEN

Ask your team lead for any key you might need!

Setting up the database

A docker-compose.yml file is included in the project. It requires a the database environment variables to be set up (see Setting up env vars).

docker compose up -d db

This command will create a database container listening on the port 5432 of your machine. To stop it, run:

docker compose down

Installing the dependencies

We use pnpm as a package manager. Install it whatever way fits you best https://pnpm.io/installation. Note that you need at least version >=7.0.0.

Install the dependencies:

pnpm install

Run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Migrate and seed the database

Your database will be empty by default. We use prisma as an ORM.

Prisma will be installed along with the other dependencies if you followed the steps in Installing the dependencies.

There are three key concepts at play here: generate, migrate and seed.

• Running pnpm prisma generate will create the client that connects to the database, as well as the types to access them safely from the code. For example, given a User model, it will allow this:

  import type { User } from "@prisma/client";
  import prisma from "lib/db/prisma";
  const users = prisma.findMany(); // users is of User[] type!

• pnpm prisma migrate dev will apply all pending migrations to the database. If there are changes to the schema, it will also create a migration with those new changes. In production, migrations are applied during the build phase of the project. If you want to prototype database schemas it is recommended to use pnpm prisma db push instead, as it will avoid creating unnecessary migrations.

• pnpm prisma db seed will run the prisma/seed.ts script. It's purpose is to populate the database with sample data to improve the development experience.

Coding conventions and guidelines

We are still figuring this out as we go, but for now we follow these guidelines for TypeScript and these conventions for React.

As for Git conventions, we try to follow the style guide as described here.

Configuring your editor

It is recommended to install EditorConfig, Prettier and ESLint, although the commit hooks will already take care of the formatting.

It is also recommended to activate the Editor: Format on save option.

Grab a card

Steps for working on a card from our Trello board:

• Grab a card from the Things to do column and drag it to the In Progress column
• Create a new branch feature/my-new-feature off the main branch
• Create a Pull Request when you're done
• Move the card to PR Ready
• Sit back and wait for approvals or comments!

Feel free to ask other team members to review Pull Requests.

Frequently Asked Questions

• How should URLs be formatted?

  URLs should use dashes (-) instead of underscores (_), so /this-is/my/page should be used instead of /this_is/my/page.

Resources

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!