News Hub
This is a Django-React web application that allows users to create, read and edit posts.The home page will list all posted news from the backend, the detail page is reserved for each individual post. It also provides search and filtering functionality through API endpoints,
News Hub uses django and django rest framework for it backend and React.js as client side for fetching Api endpoints, and both served on the same server and port!
Live Demo On
Technologies
The following technologies were used for this project:
[HTML]
[CSS]
[Python]
[Django]
[Django REST Framework]
[PostgresSQL]
[React.js]
[Material Ui]
[Redux]
Running this App
Clone the app
fork and clone this repository.Switch to project directory before running the below commands.
Frontend Setup
cd frontend in the project root.Run
npm install to fetch the frontend dependencies.Run
npm start to spin up a development server.Run
npm run build to create a production build of frontend.Backend Setup
Create a virtual environment
Activate the virtual environment
Install dependencies
Configure Postgres
Make migrations
Migrate apps and database
Collect Static files
Run Tests
Start server
Features
RESTful Api - It follows Rest architectural style
JSON Web Token -JWT - Secure data transmission b/w this app and it users
Unit Testing -Pytest - Manually test each component to ensure it works correctly
Token base authentication - Djoser - Provides basic view for auth actions
SMTP Email Server - Email Delivery and Communication for sending and receiving email
Powerful DB Queries- Filtring, Search - This app provides refine search results of model to user
React - Router - Provide easy navigation for this app without refreshing the page
Redux Toolkit - A central store that provide easy access to data across all components
Exploring Some endpoints Locally
Run below codes in the terminal or use any api client such as postman.
Endpoints
The endpoints, expected payloads, and responses are described below.
Get all news items
Request
GET api/v1/posts/Server Response
Get Posts by Category
Request
GET /api/v1/posts/?post_category=techPayload
Server Response
Create a user
Request
POST api/v1/auth/users/Payload
Server Response
Activate a user
Request
POST api/v1/auth/users/activation/Payload
Server Response
Other Endpoints
POST /api/v1/comment/post/<post-slug>/GET /api/v1/post/<str:slug>/GET /api/v1/posts/?post_category=tech
