webroo / polly

Polling app for scheduling events. An experiment with React Server Components and Server Actions.

A polling app for scheduling events.

Description

Polly is a simple and easy to use polling app that helps you schedule events - Decide what you want to organise, suggest some dates, then let participants vote on the options that work best for them.

Try it out for yourself

Background

An experiment in using React Server Components and Server Actions. Built using Next.js and MongoDB.

Server Components and Sever Actions allow the site to be functional even with JavaScript disabled.

Prerequisites

• Node 18 (preferably via nvm)
• Docker (for local MongoDB)

Getting Started

1. Use nvm to load the correct version of Node for the project:

   nvm use

2. Install dependencies:

   npm install

3. Create a copy of the example local .env file:

   cp .env.local.example .env.local

4. Start MongoDB via Docker:

   docker compose up

5. Run the development server:

   npm run dev

6. Open http://localhost:3000 to see the site.

Deployment

The GitHub project is not directly connected to the Vercel project and instead artifacts are built using GitHub Actions and deployed onto Vercel infrastructure using their CLI tool. Production env vars are defined in the Vercel project settings and MongoDB Atlas is configured as a Vercel project integration.

MongoDB admin interface

Docker compose also provides Mongo Express, a web-based MongoDB admin interface. It can be found at http://localhost:8081/ and can be logged into with the following credentials:

Username: admin
Password: pass

Configure ESLint and Prettier in VSCode

VSCode can be configured to automatically fix and format files on save by adding the following settings to VSCode:

"eslint.run": "onType",
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
},

Note: In this project Prettier is run through ESLint, so you don't need to have the Prettier VSCode extension installed.

Credits

Parrot icon by Freepik - Flaticon