Dragon News is a modern and feature-rich news portal website. Users can read the latest news by category, filter news by specific topics, and read the full details of each article on a dedicated dynamic page. Certain pages require users to create an account and log in, managed through a secure authentication system.
| Category | Technology |
|---|---|
| Framework | Next.js (App Router) |
| UI Library | HeroUI (NextUI) |
| Authentication | Better Auth |
| Database | MongoDB |
| Language | JavaScript |
| Styling | Tailwind CSS |
- Category-based News on Homepage — News listed and displayed according to different categories
- Dynamic News Details Page — Each article has its own dynamic route for reading full details
- Category Filtering — Filter and view all news under a specific category with a single click
- Sign Up — New user registration system
- Log In — Secure login system
- Log Out — Safe logout from the current session
- Session Management — Session handled securely via Better Auth
- Protected Routes — Certain pages are accessible only to logged-in users
- MongoDB Integration — Data storage and management on the server
- User Data Storage — User information stored securely in the database
dragon-news/
├── app/
│ ├── (auth)/
│ │ ├── login/
│ │ └── register/
│ ├── (main)/
│ │ ├── page.jsx # Homepage
│ │ ├── news/[id]/ # Dynamic News Details
│ │ └── category/[id]/ # Category Filter Page
│ └── layout.jsx
├── components/
│ ├── Navbar.jsx
│ ├── NewsCard.jsx
│ └── CategoryList.jsx
├── lib/
│ ├── auth.js # Better Auth configuration
│ └── db.js # MongoDB connection
└── public/
- Node.js v18+
- MongoDB (Atlas)
# Clone the repository
git clone https://github.com/mahmud-abdullah-262/dragon-news-with-backend.git
# Navigate to the project directory
cd dragon-news
# Install dependencies
npm installCreate a .env.local file and add the following variables:
MONGODB_URI=your_mongodb_connection_string
BETTER_AUTH_SECRET=your_auth_secret
BETTER_AUTH_URL=http://localhost:3000npm run devThe application will run at http://localhost:3000.
Dragon News is a full-featured news portal built with Next.js App Router and HeroUI, delivering a modern and responsive user interface. The project integrates Better Auth to ensure secure user authentication, with fully functional Sign Up, Log In, Log Out, and Session Management. All user data is stored securely in a MongoDB database. Users can filter news by category and read the full details of any article on a dedicated dynamic page. Protected pages are accessible only to authenticated users, making Dragon News a professional and secure news platform.
Abdullah Al Mahmud
- GitHub: @mahmud-abdullah-262
⭐ If you find this project helpful, please give it a star!