Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Map of Classes] Render a selected-pin popup

Open Beginner friendly
#868 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Create src/components/map/MeetingPopup.tsx, modelling its props and rendering on the existing src/components/schedules/DayClass.tsx example. Read that component first, then render courseCode/title, start–end, building description and optional room from a single MapMeeting, showing TBA for missing time and omitting absent building/room instead of literal null. Cover the sample case plus one missing-value case in src/components/map/MeetingPopup.test.tsx, then run pnpm test -- src/components/map/MeetingPopup.test.tsx, pnpm lint and pnpm typecheck; the issue notes #867 should land first.

Written by the indexing model from the issue text.

Description

map

What to build

Show class details when a map marker is selected. Include the course, meeting time and building/room information, with a readable fallback for missing values.

Files

Steps

  1. Render courseCode/title,start–end,building description and optional room from one plain MapMeeting.
  2. Render TBA for missing time; omit absent building/room rather than literal null.
  3. Use ordinary React text for all catalog strings.

Example

Sample/09–10/Cedar Street/101 yields those fields; null room has no empty room label.

Check it works

In src/components/map/MeetingPopup.test.tsx, check the example above and the failure or limit described in the steps. Run pnpm test -- src/components/map/MeetingPopup.test.tsx, pnpm lint and pnpm typecheck.

Before starting

  • #867 — Render numbered day pins through supplied map adapter

References

Assign yourself before starting, or comment to claim the issue. Project setup.

Dominant language
TypeScript
Stars
19
Forks
94
PR merge metrics
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DevDogsUGA/DogDays

All issues in DevDogsUGA/DogDays

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.