Development Setup

1. cd src Make sure you are under src directory
2. npm install Install all packages (need to do this every time you switch a branch)
3. Create .env file
4. npm run dev Start server
5. Open the link on terminal (usually is localhost)

Note

We are using ES Modules not CommonJS modules

Directory

src                    # (running everything within src)
├── google_api
│   └── api.js              # The api interface functions for google
├── app
│   ├── components
│   │   ├── navbar
│   │   └── footer
│   ├── {other pages' directories (folder names are routes)}
│   ├── page.tsx            # Home page
│   └── layout.tsx          # Base layout
├── package-lock.json       # Do not touch
├── package.json            # All package listing and scripts
└── tailwind.config.js

Initialize node modules

Make sure you are under src in command line and run npm install.
It should install (locally) all the packages needed (from package.json) into node_modules folder.

Note
Please run the command again when there's a change in package.json (i.e. adding packages).

Create dotenv file

Make sure to create a .env file under src with the following attributes

# For project on cloud console
credentials_client_id=
credentials_project_id=
credentials_auth_uri=
credentials_token_uri=
credentials_auth_provider_x509_cert_url=
credentials_client_secret=

# Contact us form
spreadsheet_id=
recaptcha_secret_key=
NEXT_PUBLIC_RECAPTCHA_SITEKEY=
NEXT_PUBLIC_MAP_KEY=

# Authorization Tokens
token_type
token_client_id
token_client_secret
token_refresh_token

# Firebase
firebase_apiKey=
firebase_authDomain=
firebase_projectId=
firebase_storageBucket=
firebase_messagingSenderId=
firebase_appId=

References

• Cloud Firestore
• Integrate Firebase with a Next.js app
• Tailwind Styling (built in to next js)
• Photo Zoomed in
• Count Down (or copilot)