DEV Community

Cover image for Researchers Are Begging for This: The Academic LinkedIn
CarGDev
CarGDev

Posted on

Researchers Are Begging for This: The Academic LinkedIn

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Endorsement — a frontend-only Researcher Endorsement & Collaboration Platform built with React (19), Vite, TypeScript and Zustand. The app is a client-side mock of an academic social feed where junior researchers can create profiles, post markdown abstracts, attach in-memory markdown content, receive endorsements on specialties and posts, and share endorsement links.

The project emphasizes discoverability across disciplines, a simple endorsement graph, and a clean modular architecture ready for a future backend.

The application has mocked data and not backend was developed at this time.

Demo

Endorsement home page

My Experience with GitHub Copilot CLI

I consulted the official GitHub Copilot CLI documentation while preparing this submission to ensure accurate descriptions of CLI capabilities and commands. In this session the Copilot "documentation fetch" was used programmatically to confirm features (models, installation options, experimental flags, and available commands) and to cite how Copilot CLI can be launched and configured.

Practically, the project edits and file operations were driven by the Copilot-assisted terminal workflow in this environment: files were created and edited, CSS adjustments applied, and git commits executed. The CLI docs informed correct terminology and helped shape the explanation below so the submission is accurate about Copilot CLI features.

Session prompts, knowledge and actions (summary)

Below is a concise chronological summary of the visible user prompts I have used and the corresponding actions taken during creating the application.

  1. Initial product specification

    • I provided a detailed spec (React 19 + Vite + TypeScript + Zustand, routes, types, components, store actions, seed data, and UI behavior).
    • Action: scaffolded project files and implemented core store, types, routes, and components according to the spec.

  2. Dependency & build issues

    • npm install failed due to a specific unavailable zustand sub-version.
    • Action: updated package.json to use "zustand": "^4" so installation succeeds.
  • Vite failed to load @vitejs/plugin-react ESM plugin (require vs ESM issue).
  • Action: added "type": "module" in package.json to allow ESM plugin loading.

  1. Runtime errors & quick fixes

    • App.tsx threw ReferenceError: PDFModal is not defined.
    • Action: replaced the undefined reference with the existing MarkdownModal and committed the fix.

  2. UX / UI adjustments requested by the user

    • Add a 5px gap on tags row → updated CSS (.tags-row { gap: 5px }).
    • Move "Share something..." to the top of the feed → updated Home.tsx to place the create input above the feed and open the create modal on focus.
    • Make the whole PostCard clickable to view detail; keep internal buttons interactive → updated PostCard to navigate to /post/:id on card click and used event.stopPropagation() for buttons and links.
    • Move "Open MD" control next to Endorse and under the preview → adjusted PostCard layout accordingly.
    • Add breadcrumb on PostDetail → added a simple "← Home" link above the post card.
    • Replace alert() usage with a top-right NotificationCenter → implemented NotificationCenter component, added store.notifications, and replaced alert calls with addNotification(...) calls.

  3. Markdown instead of PDF

    • User requested markdown attachments (mocked) instead of real PDF handling.
    • Action: adapted posts to support attachedMarkdown { name, content } and added MarkdownPreview / MarkdownModal components.

  4. Formatting, linting and project metadata

    • Added README.md with author details and the screenshot path.
    • Updated package.json with my data (author: cargdev carlos.gutierrez@carg.dev, homepage, repository) and added a prettier script.
    • Created .prettierrc and .prettierignore, added ESLint config (.eslintrc.cjs) and .eslintignore, and added lint and prettier scripts to package.json.

  5. Commits

    • Performed git add and git commit operations at several points to save progressive changes (commits recorded in the repository).
    • Note: the markdown submission created by this request is intentionally created but not committed (per your instruction).

  6. Tools and helper actions used during the session

    • File operations: created and edited files (components, routes, store, styles, README and configs).
    • Searches: located occurrences of alert() and other patterns to replace them.
    • Git: staged and committed changes via shell commands.
    • Copilot docs fetch: programmatically retrieved official Copilot CLI docs to ensure accurate description for this submission.

Notes and follow-ups

  • The app is frontend-only and uses an in-memory Zustand store with seed data; localStorage persistence is optional and not required for the MVP.
  • Markdown rendering used in the demo is a lightweight approach for mock content; for production use, replace the simple renderer with a proper parser + sanitizer (e.g., marked + DOMPurify).

Top comments (0)