<div align="right"><a href="https://app.netlify.com/sites/virtual-coffee-io/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/ad849482-1158-4a45-bed5-14f3d17ae97d/deploy-status" /></a> <!-- prettier-ignore-start --> <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

<!-- ALL-CONTRIBUTORS-BADGE:END --> <!-- prettier-ignore-end --> </div>

Virtual Coffee is a laid-back conversation with developers twice a week. It's the conversation that keeps going in slack. It's the online events that support developers at all stages of the journey. It's the place where you go to make friends who all just happen to be in tech.

Anyone can join! Whether you're just thinking about getting into tech or have been in it for decades.

We know that growth comes at all levels and that no matter what stage of the journey you're on, you can teach and learn.

So come with a question or a topic to discuss, ask for feedback on your portfolio, answer another developer's question, or just sit back and listen to others talk about tech.

Our mission is to form community, allow room for growth and mentorship at all levels, and to provide a safe space for everyone interested in tech.

Please take a moment to read our Code of Conduct.

See you there!

Working on the site:

• This site is built using Next.js.
• Check out our CONTRIBUTING guideline to make contributions.
• If you're new to open source, check out our Git & GitHub 101 and Contributor Guide resources.

Table of Contents:

• Local Development Setup
• Commands
• Loading data
• Adding content
• Contributors

Local Development Setup

Steps to run the site locally for development or curiosity

1. Fork and clone the repository

Follow these steps to create a fork of this repository and clone it to your local machine.

2. Navigate to the repo directory

If you have just run git clone ... , the next step would be to move into the cloned repo:

cd virtualcoffee.io

3. Install dependencies

This repo requires node, pnpm, and the Netlify CLI to get started.

Installing node:

The best way to install node is to download the installer from their site. This repo requires node version 22.20.

If you already have a different version of node installed, but don't want to update globally, you can install a package called nvm, which will allow you to easily switch node versions. Once you have nvm installed (or if you already have it installed), you can run nvm use in the main directory and it will install the proper version of node.

Installing pnpm:

pnpm is a package manager that is used to install the rest of our dependencies.

Read more about pnpm on their docs site.

The best way to install pnpm for this project is by using Corepack, a new feature bundled with Node.

Install pnpm via corepack with the following commands:

corepack enable
corepack prepare

Setting up your .env

Use the following command to create a local .env file. Then open the new file (.env) and adjust any settings that are needed.

cp .env.example .env

Installing package dependencies

Once you have node, pnpm, and the Netlify CLI installed, you're ready to install the local dependencies! Run the following command:

pnpm install

At this point you're ready to roll! Run the following command to get rolling!

pnpm dev

Read more about what pnpm dev does in the following section.

Commands

The following commands are available for your use. Most of the time you'll only ever need pnpm dev.

pnpm dev

pnpm dev

This is the only command you need to do normal local development.

Starts a local server and watches your source files for changes. Use this to preview local development.

Once you run this command, a local server is running at http://localhost:9000! Any changes you make to the src folder should also re-build the site and re-load your browser.

You should see something like 'Server now ready on http://localhost:9000' below, which means the watcher is waiting to build your awesome changes!

Use ctrl-c to quit the server when you're done.

pnpm build

pnpm build

Builds a production-ready version of the site. This is what Netlify uses to build our site.

pnpm format

pnpm format

Runs Prettier on all of our files. This happens automatically via husky and lint-staged, so there's usually no need to run this manually.

pnpm lint

pnpm lint

Runs ESLint on all of our files, so you can check for errors or warnings. This happens automatically at build time.

Loading data

A lot of the data loaded on the site is from APIs that require private keys or tokens. Unfortunately we can't publish these or distribute them too widely.

All of the data points have mock data that is used if the required API key isn't present, so contributors should be able to make UX-related changes without needing them.

If you'd like to work on a feature that requires an API key, please reach out to a maintainer and we can probably get that going.

Adding content

Resources

Our VC Resources are created using MDX. MDX is basically a combination of Markdown and React.

Any files added to src/content/resources will be automatically loaded and added to the appropriate index page.

A good way to start adding a new page would be to copy one of the existing pages, then edit the details and content.

Monthly Challenges

Every month, our monthly challenge page will need to move the current challenge to the main portion of the list, and add the new challenge to the current challenge section.

To make the updates, read the instructions at the Monthly Challenge Technical Guidelines page on the VC Community Building Resources.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://pedaars.co.uk/"><img src="https://avatars.githubusercontent.com/u/11647950?v=4?s=100" width="100px;" alt="Aaron Pedwell"/><br />_{<b>Aaron Pedwell</b>}</a><br /><a href="#content-pedaars" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://abbeyperini.dev/"><img src="https://avatars.githubusercontent.com/u/68071056?v=4?s=100" width="100px;" alt="Abbey Perini"/><br />_{<b>Abbey Perini</b>}</a><br /><a href="#content-abbeyperini" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://adamabundis.xyz/"><img src="https://avatars.githubusercontent.com/u/21162229?v=4?s=100" width="100px;" alt="Adam Abundis"/><br />_{<b>Adam Abundis</b>}</a><br /><a href="#content-abuna1985" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/kingahmedino"><img src="https://avatars.githubusercontent.com/u/47981052?v=4?s=100" width="100px;" alt="Ahmed Mohammed"/><br />_{<b>Ahmed Mohammed</b>}</a><br /><a href="#content-kingahmedino" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/awildstone"><img src="https://avatars.githubusercontent.com/u/11568530?v=4?s=100" width="100px;" alt="Aimee Wildstone"/><br />_{<b>Aimee Wildstone</b>}</a><br /><a href="#content-awildstone" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/aishat-ajose"><img src="https://avatars.githubusercontent.com/u/58638871?v=4?s=100" width="100px;" alt="Aishat Ajose"/><br />_{<b>Aishat Ajose</b>}</a><br /><a href="#content-aishat-ajose" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/charlieintech"><img src="https://avatars.githubusercontent.com/u/97811982?v=4?s=100" width="100px;" alt="Aishe Ibrahim"/><br />_{<b>Aishe Ibrahim</b>}</a><br /><a href="#content-charlieintech" title="Content">🖋</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/aishwarya-mali"><img src="https://avatars.githubusercontent.com/u/43086476?v=4?s=100" width="100px;" alt="Aishwarya Mali"/><br />_{<b>Aishwarya Mali</b>}</a><br /><a href="#content-aishwarya-mali" title="Content">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/AlexCovone"><img src="https://avatars