The Know - News Website
"The Know" is a dynamic News Website developed as a group project for the course Server-Side-Web Development (CPSC4125). It is designed to provide users with the latest news by fetching real-time data from the GNews API.
The site features many functionalities such as search capability, category filtering, and an interactive user interface with news cards and a carousel display on the homepage.
🎯Features
- Real-Time News Updates: Fetches the latest news articles from the GNews API.
- Search Functionality: Allows users to search for news articles based on keywords.
- Category Filtering: Users can filter news articles by different categories for more focused browsing.
- Responsive Design: News Cards and Carousel on the homepage to display news articles in an interactive and user-friendly manner.
- External Article Redirection: Clicking on a News Card redirects users to the original source of the article.
🖥️Tech Stack
- React: Utilizes React for its frontend development to create a responsive and interactive user interface.
- Bootstrap: Uses Bootstrap for its frontend development to create a responsive and interactive user interface.
- Data Fetching: Employs various methods like
fetch and axios for API calls to GNews.
- Testing: Incorporates Cypress and Jest for comprehensive testing of the application's functionality and performance.
✅Getting Started
- Clone the Repository:
git clone https://github.com/CSU-ServerSide-Fall-23/Group_2.git
cd news-website
-
Install Dependencies:
npm install
-
Environment Variables:
Set up a .env file with your GNews API key:
REACT_APP_NEWS_API_KEY=<YOUR KEY HERE>
REACT_APP_NEWS_API_BASE_URL=<YOUR BASE URL> ex: https://gnews.io/api/v4 (if you use GNEWS)
-
Run the Application:
npm run start
🧪Testing
To run tests, execute the following command:
npm run test
- For Cypress tests:
npm run cypress:open
🌐Live Demo
See the Live Demo - Deployed with Render.
📹Video Demos
Demo 1
Demo 2
Demo 3 (Final)
Team Members
Group 2 - Furlong Logan, Shreya Kola, Mills Maria