Nexus News is a feature-rich news website designed to provide users with a seamless and engaging experience. The platform offers the latest news and articles from renowned publishers across the globe and provides various functionalities for both free and premium users, ensuring dynamic interaction with news content. It also includes subscription options using Stripe for easy and secure payments.
- Vercel Live Link
- Firebase Live Link (May Not Work Sometimes)
- Integrated Stripe for User Subscription Payments: Secure and efficient payment processing for premium subscriptions.
- Advanced Article Search & Filter: Users can search by title, filter by publisher or tags, and sort articles by date.
- Subscription Expiration Alerts: The application checks for expiration date for premium users every 30 seconds and popup alerts notify users about subscription expiration.
For admin access, use the following credentials:
- Email:
admin@nexus.com - Password:
Admin@Nexus42
Test Card Information
| Card Type | Card Number | CVC | Expiration Date | ZIP Code |
|---|---|---|---|---|
| Visa | 4242424242424242 | Any 3 digits | Any future date | Any 5 digits |
| Visa (debit) | 4000056655665556 | Any 3 digits | Any future date | Any 5 digits |
| Mastercard | 5555555555554444 | Any 3 digits | Any future date | Any 5 digits |
| Mastercard (2-series) | 2223003122003222 | Any 3 digits | Any future date | Any 5 digits |
| Mastercard (debit) | 5200828282828210 | Any 3 digits | Any future date | Any 5 digits |
| Mastercard (prepaid) | 5105105105105100 | Any 3 digits | Any future date | Any 5 digits |
| American Express | 378282246310005 | Any 4 digits | Any future date | Any 5 digits |
| American Express | 371449635398431 | Any 4 digits | Any future date | Any 5 digits |
| Discover | 6011111111111117 | Any 3 digits | Any future date | Any 5 digits |
| Discover | 6011000990139424 | Any 3 digits | Any future date | Any 5 digits |
| Discover (debit) | 6011981111111113 | Any 3 digits | Any future date | Any 5 digits |
| Diners Club | 3056930009020004 | Any 3 digits | Any future date | Any 5 digits |
| Diners Club (14-digit card) | 36227206271667 | Any 3 digits | Any future date | Any 5 digits |
| BCcard and DinaCard | 6555900000604105 | Any 3 digits | Any future date | Any 5 digits |
| JCB | 3566002020360505 | Any 3 digits | Any future date | Any 5 digits |
| UnionPay | 6200000000000005 | Any 3 digits | Any future date | Any 5 digits |
| UnionPay (debit) | 6200000000000047 | Any 3 digits | Any future date | Any 5 digits |
| UnionPay (19-digit card) | 6205500000000000004 | Any 3 digits | Any future date | Any 5 digits |
- ReactJS
- JavaScript
- TailwindCSS
- Express.js (Server Side)
- MongoDB (Server Side)
-
Clone the Repository:
git clone https://github.com/nazmul-nhb/nexus-news-client.git cd nexus-news-client -
Install Dependencies:
npm install
-
Set Up Environment Variables: Create a
.env.localfile in the root directory and add the necessary environment variables. (Important!) -
Run the Application:
npm run dev -- --host
-
Access the Site: Open your browser and go to
http://localhost:5173/orhttp://192.168.1.12:5173/from other devices on the same network to view the application.
Click to Expand
- tanstack-table for showing interactive tables
- tanstack-query for managing states while fetching data (get)
- axios for fetching data (CRUD)
- react-photo-view to view photos in full size
- react-hook-form for handling forms
- react-simple-typewriter for typewriter animation
- swiper for slider on the homepage banner
- animate.css for animation effects
- react-tooltip for showing tooltips
- react-helmet-async for dynamic page titles
- react-icons for displaying icons throughout the site
- react-hot-toast for showing toast notifications
- sweetalert2 for showing sweet alerts
- momentjs for handling time and date formats
- keen-slider for creating publisher carousel
- leaflet for interactive maps
- react-chartjs-2 for charts and data visualization
- react-countup for number animations
- react-fast-marquee for scrolling latest headlines on top of navbar
- react-google-charts for displaying stats in admin dashboard
- react-intersection-observer for observing visibility of elements
- react-select for customizable select input fields