{"id":22674585,"url":"https://github.com/ttibbs/nc-news","last_synced_at":"2026-04-09T07:08:11.035Z","repository":{"id":261137391,"uuid":"883115397","full_name":"TTibbs/nc-news","owner":"TTibbs","description":"Full stack news aggregate app created as part of a Digital Skills Bootcamp in Software Engineering provided by Northcoders.","archived":false,"fork":false,"pushed_at":"2025-01-02T21:15:11.000Z","size":36155,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T13:23:14.418Z","etag":null,"topics":["axios","context","crud-operation","error-handling","form-validation","javascript","react","react-hooks","react-router","realtime-database","restful-api","state-management","vite"],"latest_commit_sha":null,"homepage":"https://nc-news-ten.vercel.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/TTibbs.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}},"created_at":"2024-11-04T12:03:04.000Z","updated_at":"2025-01-22T01:50:56.000Z","dependencies_parsed_at":"2024-11-04T22:33:02.016Z","dependency_job_id":"a7210b45-2e96-45be-a41b-b895bd63c8a1","html_url":"https://github.com/TTibbs/nc-news","commit_stats":null,"previous_names":["ttibbs/nc-news"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TTibbs%2Fnc-news","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TTibbs%2Fnc-news/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TTibbs%2Fnc-news/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TTibbs%2Fnc-news/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TTibbs","download_url":"https://codeload.github.com/TTibbs/nc-news/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246181715,"owners_count":20736610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","context","crud-operation","error-handling","form-validation","javascript","react","react-hooks","react-router","realtime-database","restful-api","state-management","vite"],"created_at":"2024-12-09T17:17:14.113Z","updated_at":"2025-12-30T22:41:31.443Z","avatar_url":"https://github.com/TTibbs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003c!-- Typing SVG by DenverCoder1 - https://github.com/DenverCoder1/readme-typing-svg --\u003e\n  \u003ca href=\"https://git.io/typing-svg\"\u003e\u003cimg src=\"https://readme-typing-svg.demolab.com?font=Ubuntu\u0026weight=700\u0026size=28\u0026duration=4000\u0026pause=1000\u0026color=188EF7\u0026background=FFFFFF00\u0026center=true\u0026vCenter=true\u0026random=false\u0026width=435\u0026lines=NC%20News%20FE%20Project;Built%20With%20Vite.js;Using%20Tailwind%20CSS\" alt=\"Typing SVG\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# NC News FE Project\n\nWelcome to N(c)ews! This is a React app built with Vite.js to display news articles from a backend server. It was created as part of the frontend phase of the Northcoders bootcamp.\n\n## Table of Contents\n\n- [Live View](#live-view)\n- [About The App](#about-the-app)\n- [Tech Stack](#tech-stack)\n- [Screenshots](#screenshots)\n- [Backend Repo](#backend-repo)\n- [Requirements](#requirements)\n- [Installation](#installation)\n\n## Live View\n\nView the live version [here](https://nc-news-ten.vercel.app/)\n\n## Features to Explore:\n\n- Browse articles by topic.\n- Read detailed articles.\n- Post comments and vote on articles.\n- Sign up and log in to interact with content (e.g., post or delete comments and articles).\n\n## About the App\n\nNC News is a news aggregation and interaction app where users can:\n\n- Browse news articles by topic.\n- Read individual articles with detailed views.\n- Post comments on articles and interact via voting.\n- Create an account and log in for enhanced functionality (e.g., posting or deleting articles/comments).\n\nThis project was designed to practice frontend development principles, including routing, API integration, and dynamic user interfaces.\n\n## Tech Stack\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://devicon.dev/\"\u003e\u003cimg width=\"45\" height=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vitejs/vitejs-original.svg\" alt=\"vite-js\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://devicon.dev/\"\u003e\u003cimg width=\"45\" height=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg\" alt=\"javascript\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://devicon.dev/\"\u003e\u003cimg width=\"45\" height=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg\" alt=\"Tailwind CSS\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://devicon.dev/\"\u003e\u003cimg width=\"45\" height=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg\" alt=\"visual-studio-code-2019\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://devicon.dev/\"\u003e\u003cimg width=\"45\" height=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg\" alt=\"git\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003ch1\u003e\n      Screenshots\n    \u003c/h1\u003e\n  \u003c/summary\u003e\n\n  \u003ch2\u003e\n    Mobile\n  \u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003cimg width=\"150\" height=\"340\" src=\"https://i.ibb.co/wSLKnNd/article-mobile.png\" alt=\"Auth screen displayed on a iPhone 14 Pro Max\" /\u003e\n    \u003cimg width=\"150\" height=\"340\" src=\"https://i.ibb.co/mJvwW95/articles-mobile.png\" alt=\"Articles screen displayed on a iPhone 14 Pro Max\" /\u003e\n    \u003cimg width=\"150\" height=\"340\" src=\"https://i.ibb.co/xJrN3ZP/auth-mobile.png\" alt=\"Single article screen displayed on a iPhone 14 Pro Max\" /\u003e\n    \u003cimg width=\"150\" height=\"340\" src=\"https://i.ibb.co/xXrtJwc/topics-mobile.png\" alt=\"Topics screen displayed on a iPhone 14 Pro Max\" /\u003e\n    \u003cimg width=\"150\" height=\"340\" src=\"https://i.ibb.co/HFkYnxx/topics-slug-mobile.png\" alt=\"Topic slug screen displayed on a iPhone 14 Pro Max\" /\u003e\n  \u003c/p\u003e\n\n  \u003ch2\u003e\n    Tablet\n  \u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003cimg width=\"300\" height=\"400\" src=\"https://i.ibb.co/t4FWnRw/article-tablet.png\" alt=\"Auth screen displayed on a iPad Pro 11\" /\u003e\n    \u003cimg width=\"300\" height=\"400\" src=\"https://i.ibb.co/48ypxV6/articles-tablet.png\" alt=\"Articles screen displayed on a iPad Pro 11\" /\u003e\n    \u003cimg width=\"300\" height=\"400\" src=\"https://i.ibb.co/sy93QK8/auth-tablet.png\" alt=\"Single article screen displayed on a iPad Pro 11\" /\u003e\n    \u003cimg width=\"300\" height=\"400\" src=\"https://i.ibb.co/ZWQDdc3/topic-slug-tablet.png\" alt=\"Topics screen displayed on a iPad Pro 11\" /\u003e\n    \u003cimg width=\"300\" height=\"400\" src=\"https://i.ibb.co/5Bpwt8H/topics-tablet.png\" alt=\"Topic slug screen displayed on a iPad Pro 11\" /\u003e\n  \u003c/p\u003e\n\n  \u003ch2\u003e\n    Laptop\n  \u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003cimg width=\"480\" height=\"370\" src=\"https://i.ibb.co/D16TQkd/article-laptop.png\" alt=\"Auth screen displayed on a MacBook Pro\" /\u003e\n    \u003cimg width=\"480\" height=\"370\" src=\"https://i.ibb.co/SmLJ2Fd/articles-laptop.png\" alt=\"Articles screen displayed on a MacBook Pro\" /\u003e\n    \u003cimg width=\"480\" height=\"370\" src=\"https://i.ibb.co/vs2QR31/auth-laptop.png\" alt=\"Single article screen displayed on a MacBook Pro\" /\u003e\n    \u003cimg width=\"480\" height=\"370\" src=\"https://i.ibb.co/zJ0k4FM/topics-laptop.png\" alt=\"Topics screen displayed on a MacBook Pro\" /\u003e\n    \u003cimg width=\"480\" height=\"370\" src=\"https://i.ibb.co/1d3GBbM/topics-slug-laptop.png\" alt=\"Topic slug screen displayed on a MacBook Pro\" /\u003e\n  \u003c/p\u003e\n\n\u003c/details\u003e\n\n## Backend Repo\n\nIf you are interested in viewing the backend repo and investigating the server, you can go [here](https://github.com/TTibbs/be-nc-news)\nAnd if you are interested in viewing the API endpoints you can see them [here](https://be-nc-news-92aj.onrender.com/api)\n\n## Requirements\n\n### Node Version\n\nTo run this project, you need Node.js v22.5.1 or higher.\nTo check your version of Node, open your terminal and use the following command:\n\n```bash\nnode --version\n```\n\n## Installation\n\nFollow these steps to set up the project on your machine:\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/your-username/nc-news.git\n```\n\n### 2. Navigate to the Project Directory\n\n```bash\ncd nc-news\n```\n\n### 3. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 4. Start the Development Server\n\n```bash\nnpm run dev\n```\n\nThe app should now be running on http://localhost:5173 by default\n\n---\n\nThis portfolio project was created as part of a Digital Skills Bootcamp in Software Engineering provided by [Northcoders](https://northcoders.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttibbs%2Fnc-news","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fttibbs%2Fnc-news","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttibbs%2Fnc-news/lists"}