Welcome to the NC News! This is a React-based frontend application that interacts with the Northcoders News API. The project allows users to view, interact with, and manage articles, comments, and votes in a news platform-style interface.
You can access the live app here:
NC News HUB - Live Version
This frontend project connects to the Northcoders News API, offering users a platform to view articles, post and delete comments, and interact with articles through upvotes and downvotes.
- Article Listing: Displays a list of all available articles.
- Article Details: View detailed information about each article.
- Commenting System: Allows users to add, view, and delete comments.
- Voting on Articles: Upvote and downvote articles.
- Topic Filtering: View articles filtered by topics.
- Sorting Articles: Organize articles based on criteria such as date or votes.
- Error Handling: Provides feedback to users in case of errors.
Before running the project locally, ensure that you have the following installed:
- Node.js (>= 14.x) 🟢
- npm (Node Package Manager) 📦
To get the frontend up and running, follow these steps:
Clone the repository to your local machine:
git clone https://github.com/erascu/nc-news.gitNavigate to the project directory and install the required dependencies:
cd nc-news
npm installTo run the application locally, start the development server:
npm run devThis project is set up to communicate with the backend API. Make sure the backend API is running and CORS is enabled for smooth interaction between frontend and backend.
You may need to configure environment variables for your development environment. Create a .env file in the root of your project and add necessary API configurations if required.
- Component: Articles
- Displays a list of all articles with their titles, authors, and published date.
- Allows users to sort articles based on popularity or date.
- Component: SingleArticle
- Allows users to click on an article to view detailed information.
- Displays comments related to an article and allows the user to post and delete comments.
- Users can upvote or downvote articles (currently hardcoded for a single user).
- Allows users to post a comment on an article. The user is hardcoded for now, but this functionality is ready to be connected to a proper authentication system.
- Users can delete their own comments.
- Component: Topics
- Displays articles filtered by the selected topic.
- Component: NotFound
- Provides an error message when something goes wrong, such as with an incorrect endpoint.
- React for building the UI components.
- React Router for handling routing and navigation.
- Axios for making API requests.
- Vite for fast and modern build tools.
- CSS for styling the application.
- Tailwind CSS for utility-first CSS styling, used in combination with the ShadCN UI library for pre-designed, customizable components.
- Radix UI for accessible, unstyled UI components (e.g., React Menubar and React Select).
- dotenv for managing environment variables (if required).
- ESLint for linting and code quality checks.
The app is deployed and can be accessed live. You can deploy it on services like Netlify, Vercel, or any other platform that supports React applications.
This project was created to interact with the Northcoders News API, which is a backend service simulating a Reddit-like platform for managing articles, topics, and comments. The frontend is fully functional for interacting with the API and allows for an engaging user experience.
This portfolio project was created as part of a Digital Skills Bootcamp in Software Engineering provided by Northcoders