A modern news feed platform with role-based access, built for seamless reading and effortless content management.
NewsFlow is a full-stack news feed web application that delivers a clean, BBC-inspired reading experience. It features a dual-role system — Admins manage the entire news lifecycle while Users enjoy a distraction-free reading interface with powerful filtering, search, and pagination capabilities.
- Browse and read published news articles
- Search news by keyword
- Filter articles by category or topic
- Navigate articles with smooth pagination
- Add new news articles with image uploads (via Cloudinary)
- Edit and update existing articles
- Delete articles
- View and manage all published content
- Full dashboard control over the news feed
| Layer | Technology |
|---|---|
| Frontend | React.js |
| Backend | Node.js + Express.js |
| Database | MongoDB (Mongoose ODM) |
| Media Storage | Cloudinary |
| Authentication | JWT (Role-based: Admin / User) |
NewsFlow/
├── client/ # React frontend
│ ├── public/
│ └── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Route-level pages (Home, Article, Admin Dashboard)
│ ├── context/ # Auth & global state
│ └── utils/ # API helpers, constants
│
├── server/ # Node/Express backend
│ ├── controllers/ # Route handlers
│ ├── models/ # Mongoose schemas (User, News)
│ ├── routes/ # API routes
│ ├── middleware/ # Auth, role guards
│ └── config/ # DB & Cloudinary config
│
└── README.md
- Node.js >= 18.x
- MongoDB (local or Atlas)
- Cloudinary account
git clone git clone https://github.com/Prawshant123-ui/NewsFlow.git
cd NewsFlow
Create a .env file in the server/ directory:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secretCreate a .env file in the client/ directory:
REACT_APP_API_URL=http://localhost:5000/api# Install backend dependencies
cd server
npm install
# Install frontend dependencies
cd ../client
npm install# Start the backend server
cd server
npm run dev
# Start the frontend (in a new terminal)
cd client
npm startThe app will be available at http://localhost:3000
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/auth/register |
Register a new user |
| POST | /api/auth/login |
Login and receive JWT |
| Method | Endpoint | Access | Description |
|---|---|---|---|
| GET | /api/news |
Public | Get all news (with search, filter, pagination) |
| GET | /api/news/:id |
Public | Get a single article |
| POST | /api/news |
Admin | Create a new article |
| PUT | /api/news/:id |
Admin | Update an article |
| DELETE | /api/news/:id |
Admin | Delete an article |
Query parameters supported on GET /api/news:
/api/news?search=election&category=politics&page=2&limit=10
| Param | Description |
|---|---|
search |
Keyword search on title and content |
category |
Filter by news category |
page |
Page number (default: 1) |
limit |
Articles per page (default: 10) |
The NewsFlow interface is inspired by the clean, editorial aesthetic of BBC News — featuring a structured news grid layout, clear typography hierarchy, and a category-based navigation bar. The design is original and not affiliated with or copied from BBC.
Add your screenshots here
| Home Page | Article View | Admin Dashboard |
|---|---|---|
 |
 |
 |
🌐 Live Site: (https://newsflow01.netlify.app/)
- Frontend: Vercel / Netlify
- Backend: Render / Railway
- Database: MongoDB Atlas
- Media: Cloudinary
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request
This project is licensed under the MIT License.