Frontend: https://nc-news-five.vercel.app
Backend API: https://nc-news-be-6q9q.onrender.com/api
Northcoders News is a full-stack social news web application built with React and Node.js.
Users can browse articles, filter by topic, sort content, vote on articles, post comments, and delete their own comments.
This project demonstrates RESTful API design, React state management, routing, optimistic updates, and full deployment to production.
-
View all articles
-
View individual articles
-
Filter articles by topic
-
Sort by:
- Date
- Votes
- Comment count
-
Toggle ascending / descending order
- Upvote and downvote articles
- Optimistic UI updates
- Error handling for failed requests
- View comments for each article
- Post new comments
- Delete your own comments
- Client-side validation
- Error handling
- 404 route handling
- Invalid article handling
- Invalid topic handling
- User-friendly error messages
- React
- Vite
- React Router
- Fetch API
- Hosted on Vercel
Frontend Repository: https://github.com/Myyanzhaochen/nc-news
- Node.js
- Express
- PostgreSQL
- Hosted on Render
Backend Repository: https://github.com/Myyanzhaochen/nc-news-BE
git clone https://github.com/Myyanzhaochen/nc-news
cd nc-news
npm install
npm run dev
The app will run on:
http://localhost:5173
npm run build
- Node.js v18+
- npm v9+
This portfolio project was created as part of a Digital Skills Bootcamp in Software Engineering provided by Northcoders.
This project demonstrates:
- Full CRUD REST API integration
- URL-driven state management
- Optimistic rendering patterns
- React component architecture
- Error boundary design
- Production deployment workflow
- Frontend–Backend integration
Yanzhao Chen GitHub: https://github.com/Myyanzhaochen