{"id":48739927,"url":"https://github.com/baberlabs/fe-nc-news","last_synced_at":"2026-04-12T06:38:32.097Z","repository":{"id":251740333,"uuid":"838240722","full_name":"baberlabs/fe-nc-news","owner":"baberlabs","description":"Client-side React SPA that consumes a REST API to display and interact with news articles and comments. Focuses on predictable UI state, client-side routing, and correct API consumption.","archived":false,"fork":false,"pushed_at":"2025-12-26T16:17:22.000Z","size":673,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-12T06:38:30.985Z","etag":null,"topics":["axios","client-side","frontend","react","react-router","rest-api-client","single-page-application","tailwindcss","ui-state","vite","web-application"],"latest_commit_sha":null,"homepage":"https://babers-reach.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baberlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-05T08:35:29.000Z","updated_at":"2025-12-26T16:20:49.000Z","dependencies_parsed_at":"2024-08-05T13:14:53.248Z","dependency_job_id":"00257cfb-e8ab-4f98-ad3e-f2e2383005e8","html_url":"https://github.com/baberlabs/fe-nc-news","commit_stats":null,"previous_names":["baberlabs/fe-nc-news"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/baberlabs/fe-nc-news","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baberlabs%2Ffe-nc-news","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baberlabs%2Ffe-nc-news/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baberlabs%2Ffe-nc-news/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baberlabs%2Ffe-nc-news/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baberlabs","download_url":"https://codeload.github.com/baberlabs/fe-nc-news/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baberlabs%2Ffe-nc-news/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31706765,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","client-side","frontend","react","react-router","rest-api-client","single-page-application","tailwindcss","ui-state","vite","web-application"],"created_at":"2026-04-12T06:38:31.570Z","updated_at":"2026-04-12T06:38:32.089Z","avatar_url":"https://github.com/baberlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NC News Frontend (Client Application)\n\nA React-based single-page application that consumes the NC News REST API.\n\nThe application allows users to browse, filter, sort, and interact with news articles and comments. It focuses on correct API consumption, client-side routing, and predictable UI state, without server-side rendering or backend logic.\n\n---\n\n## Live Deployment\n\n- **Frontend (Netlify):**  \n  https://babers-reach.netlify.app\n\n- **Backend API (Render):**  \n  https://be-nc-news-8igb.onrender.com/api\n\nThe frontend and backend are deployed independently and communicate exclusively over HTTP.\n\n---\n\n## What This Application Provides\n\n- Displays a paginated list of articles\n- Filters articles by topic\n- Sorts articles by date, title, votes, or comment count\n- Allows users to view individual articles\n- Fetches and displays article comments\n- Allows logged-in users to:\n  - post comments\n  - vote on articles\n  - delete their own comments\n\nAll data is fetched from a live REST API. No data is mocked on the client.\n\n---\n\n## Client-Side Behaviour\n\n- Routing is handled entirely on the client using React Router\n- UI state is driven by API responses and local component state\n- Logged-in user state is persisted via `localStorage`\n- Optimistic updates are used for voting interactions\n- Error states and loading states are handled explicitly in the UI\n\nThere is no authentication system. “Login” is simulated by selecting an existing username exposed by the API.\n\n---\n\n## Tech Stack\n\n- **Framework:** React 18\n- **Routing:** React Router v6\n- **HTTP Client:** Axios\n- **Styling:** Tailwind CSS v3\n- **Build Tool:** Vite\n- **Deployment:** Netlify\n\nThis is a pure client-side SPA. There is no server-side rendering and no backend code in this repository.\n\n---\n\n## Project Structure (High-Level)\n\n- `src/pages/`  \n  Route-level components (Home, Articles, Article, User, Login)\n\n- `src/components/`  \n  Shared UI components (Header, Navigation, Logo)\n\n- `src/contexts/`  \n  Global state (logged-in user context)\n\n- `src/utilities/`  \n  API clients, formatting helpers, and small pure functions\n\n- `src/styles/`  \n  Tailwind CSS entry point\n\nThe structure prioritises separation of concerns and readability over abstraction.\n\n---\n\n## Local Development\n\n### Requirements\n\n- Node.js (LTS recommended)\n- npm\n\n---\n\n### Setup\n\n```bash\ngit clone https://github.com/baberlabs/fe-nc-news.git\ncd fe-nc-news\nnpm install\nnpm run dev\n```\n\nThe application will be available at:\n\n```text\nhttp://localhost:5173\n```\n\n---\n\n## Design Notes\n\n- API calls are isolated in utility modules rather than embedded in components\n- Custom hooks (`useArticles`, `useComments`, `useUser`, etc.) encapsulate data-fetching logic\n- UI components are kept deliberately simple and explicit\n- Tailwind is used directly without component abstraction layers\n\nThe code favours clarity and traceability over cleverness.\n\n---\n\n## Limitations\n\n- No authentication or authorisation\n- No form validation beyond basic client-side checks\n- No caching layer beyond in-memory React state\n- No accessibility audit beyond sensible defaults\n\nThese constraints are intentional and reflect the scope of a client-only application consuming a pre-defined public API.\n\n---\n\n## Acknowledgements\n\nThis frontend application was created as part of a **Digital Skills Bootcamp in Software Development** delivered by **Northcoders**, a UK-based training provider.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaberlabs%2Ffe-nc-news","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaberlabs%2Ffe-nc-news","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaberlabs%2Ffe-nc-news/lists"}