Horiseon Web Application

A Next.js exhibition site showcasing reimagined riverbank designs for the Saigon River.

Getting Started

Option 1: Local Development

First, install dependencies:

npm install

Then run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

Option 2: Docker (CLI)

Build the Docker image:

docker build -t horiseon-webapp .

Run the container:

docker run -p 3000:3000 horiseon-webapp

Open http://localhost:3000 to view the application.

To run in detached mode:

docker run -d -p 3000:3000 --name horiseon horiseon-webapp

Stop the container:

docker stop horiseon

Remove the container:

docker rm horiseon

Option 3: Docker Desktop (GUI)

1. Build the image:

   • Open Docker Desktop
   • Navigate to the Images tab
   • Click Build button
   • Select this project directory
   • Set image name: horiseon-webapp
   • Click Build

2. Run the container:

   • Go to the Images tab
   • Find horiseon-webapp
   • Click the Run button (▶️)
   • Expand Optional Settings:
     • Container name: horiseon
     • Ports: Host port 3000 → Container port 3000
   • Click Run

3. Access the application:

   • Go to the Containers tab
   • Find the running horiseon container
   • Click the Open in browser link (port 3000:3000)
   • Or visit http://localhost:3000

4. Manage the container:

   • Use the Stop, Start, or Delete buttons in the Containers tab

Development

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

This project uses next/font to automatically optimize and load fonts.

Learn More

To learn more about Next.js and Docker:

• Next.js Documentation - learn about Next.js features and API
• Learn Next.js - an interactive Next.js tutorial
• Docker Documentation - learn about containerization
• Docker Desktop - download Docker Desktop

Deploy

The current app is deployed on aws, using S3 + Cloudfront.

• The pipeline is triggered on update to Main (see .github/workflows/deploy.yml)

Contributing

We welcome contributions! Please follow these guidelines:

Branch Strategy

1. Create or switch to a ui feature branch:

   git checkout -b feature/your-feature-name
   or
   git checkout feature/ui

2. Make your changes and commit:

   git add .
   git commit -m "feat: describe your changes"

3. Push your branch:

   git push origin feature/your-feature-name

Pull Request Process

1. Create a Pull Request from your feature branch to dev
2. Ensure all tests pass and code is properly formatted
3. Request review from team members
4. Once approved, merge the PR into dev

⚠️ Warning: Do not create pull requests directly into main. All PRs should target the dev branch. 5. Delete the feature branch after merging

Code Standards

• Follow the project's TypeScript configuration
• Ensure responsive design for all components
• Test changes in mobile viewports
• Maintain accessibility standards (WCAG 2.1)