asyncapi/conference-website

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, fork the repository and clone it.

git clone https://github.com/<username>/conference-website.git

Change Directory

cd conference-website

Install Dependencies

npm install

Run the development server:

npm run dev
# or
yarn dev

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

You can start editing the page by modifying files in the app directory. The page auto-updates as you edit the file.

Testing

Running E2E Tests with Cypress

This project uses Cypress for end-to-end testing.

Interactive Mode (Recommended for Development)

# Make sure the dev server is running
npm run dev

# In another terminal, open Cypress UI
npm run cy:open

Then in the Cypress UI:

1. Select "E2E Testing"
2. Choose your browser
3. Click on any test file to run tests

Headless Mode (CI/CD)

# Make sure the dev server is running
npm run dev

# In another terminal, run all tests
npx cypress run

# Run specific test file
npx cypress run --spec "cypress/e2e/Navbar.cy.ts"

Available Test Suites

• cypress/e2e/Navbar.cy.ts - Navigation tests (desktop & mobile)
• cypress/e2e/Footer.cy.ts - Footer component tests
• cypress/e2e/Landing.cy.ts - Landing page tests
• cypress/e2e/Venue.cy.ts - Venue page tests
• cypress/e2e/Gallery.cy.ts - Gallery page tests

Gallery

The /gallery page shows photos hosted on Cloudinary. The site reads them straight from the AsyncAPI Cloudinary account, so there is no photo list to maintain in this repository.

Adding photos (no code needed)

1. Open the Cloudinary console and go to Media Library → conference-gallery.
2. Create a folder for the event, named <city>-<year>, for example london-2026. The folder name becomes the album title on the page ("London 2026"), and albums are ordered by year, newest first.
3. Drag and drop the photos into that folder. Photos inside sub-folders are shown in the same album.

Deployment

The deployed site needs these variables in the host's environment (refer example.env.local):

• CLOUDINARY_URL - the API environment variable from the Cloudinary console, in the form cloudinary://<api_key>:<api_secret>@<cloud_name>. Keep it secret.
• CLOUDINARY_GALLERY_FOLDER - the root folder that holds the album folders, conference-gallery.

Without CLOUDINARY_URL the page keeps showing the "Photos from our past conferences are on their way" message, even after photos are uploaded.

Storybook

This project uses Storybook for component development and documentation.

Running Storybook

# Start Storybook development server
npm run storybook

This will start Storybook on http://localhost:6006.

Building Storybook

# Build static Storybook for deployment
npm run build-storybook

The static files will be generated in the storybook-static directory.

AsyncAPI Contributors ✨

Thanks goes to these wonderful people (emoji key):

V Thulisile Sibanda 📖

AISHAT MUIBUDEEN 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!