NC News
Screenshot Gallery
The NC News home page greets users with a welcoming layout and clear navigation. It serves as the entry point for browsing the latest articles, topics, and user information. The visually engaging banner and design ensure a user-friendly experience while directing attention to the core features of the platform.
This visual representation showcases the component hierarchy of the NC News React application. It demonstrates the modular structure, illustrating how components interact to create dynamic features, including article lists, detailed views, and forms for user interactions.
The NC News wireframe offers a high-level overview of the app’s design. It outlines the placement of elements like headers, navigation, and interactive components, providing a blueprint for the user interface. This foundation was crucial in planning the intuitive and visually appealing user experience.
This screenshot documents the API endpoints used in NC News. It includes detailed descriptions of available queries, sorting options, and example responses, reflecting the backend's robust architecture that supports dynamic content and user interactions.
The articles view displays a collection of all available articles with key details such as titles, authors, votes, and comment counts. Users can filter and sort articles based on criteria like topic or date, making it easier to find content that matches their interests.
This page provides a detailed view of a selected article, including its body, votes, and comments. Users can engage by voting or adding their own comments, fostering interaction and community engagement on the platform.
The post article form allows users to contribute new articles by providing a title, body, topic, and optional image URL. This feature emphasizes user-generated content, but the placeholder message indicates temporary unavailability for submissions.
Overview
NC News is a social news platform where users can explore, discuss, and interact with articles on a variety of topics. The app offers robust features for voting, commenting, and creating content, making it an engaging platform for users to share their perspectives and insights.
Purpose
NC News aims to foster an interactive community for news readers. By providing a platform where users can engage with articles through comments and votes. The app also empowers users to create their own content, enhancing its value as a collaborative news hub.
Key Features
Articles
- View articles by topic, author, or popularity.
- Sort articles by date, votes, or comment count for tailored browsing.
- Read detailed articles with dynamically loaded content and comments.
Interactive Features
- Upvote or downvote articles and comments to express opinions.
- Add comments to articles, with live updates and user attribution.
- Delete your own comments with confirmation and status indicators.
Article Creation
- Create and post articles, selecting from predefined topics.
- Include an image URL, title, and body for a rich content experience.
Topic Management
Explore articles by topic or add new topics to expand discussion categories.
Technologies Used
- Frontend: React for an interactive and dynamic user interface.
- Backend: Node.js and Express for efficient API management.
- Database: PostgreSQL for structured and reliable data storage.
- Testing: Jest and Supertest for thorough end-to-end testing.
User Experience Highlights
The user-friendly interface allows seamless browsing, voting, and commenting.
Dynamic updates enhance interactivity, keeping content fresh and engaging.
The ability to create and discuss articles fosters a vibrant community.