Welcome to NC News Frontend! This project is a front-end web application that allows users to browse and interact with articles and comments from the NC News API. The app provides a user-friendly interface to view articles, vote on them, post comments, and perform other related actions.
You can access the deployed version of the app by following this link: NC News Frontend
NC News Frontend is built using React.js and styled with CSS. It consumes data from the NC News API, which is hosted separately on the backend.
-
Upon visiting the app, you'll see a list of articles displayed on the homepage. You can click on any article to view its details, including the full content and comments.
-
To interact with the articles, you can upvote or downvote them by clicking the respective buttons.
-
You can also post your comments on an article by navigating to the article details page and using the comment form at the bottom.
-
To explore different topics, you can use the navigation bar at the top, which lists all available topics. Clicking on a topic will filter the articles based on the selected category.
To see the code for the backend server/API that powers this app, you can visit the following repository: NC News Backend GitHub.
To see the live API visit the following: nc-news-api
Before running the project locally, ensure you have the following installed:
- Node.js (Minimum version required: 12.0.0)
You can check your Node version by running the following command in your terminal:
node --version
To run the NC News Frontend on your local machine, follow these steps:
- Clone this repository to your local machine using the following command:
git clone https://github.com/JackCollier/nc-news-fe.git
- Navigate to the project directory:
cd nc-news-fe
- Install the required dependencies:
npm install
- Start the development server:
npm start
- The app should now be running on your local server at
http://localhost:3000
.
Now, you can play around with the app locally and test its features.
Please note that the app will make API requests to the backend, so make sure the backend server is also running and accessible.
If you encounter any issues or have any questions, feel free to raise an issue on the GitHub repository. Happy coding!