https://github.com/crosbow/Nexus_Frontend
Nexus is a platform for accessing and sharing news content. It offers dynamic articles, user reviews, and premium features for subscribers.
https://github.com/crosbow/Nexus_Frontend
express javascript jwt mongodb reactjs stripe tailwindcss
Last synced: 8 months ago
JSON representation
Nexus is a platform for accessing and sharing news content. It offers dynamic articles, user reviews, and premium features for subscribers.
- Host: GitHub
- URL: https://github.com/crosbow/Nexus_Frontend
- Owner: jubayerahmed46
- Created: 2025-02-03T05:59:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T12:42:16.000Z (over 1 year ago)
- Last Synced: 2025-02-05T13:35:45.250Z (over 1 year ago)
- Topics: express, javascript, jwt, mongodb, reactjs, stripe, tailwindcss
- Language: JavaScript
- Homepage: https://nexus-3e632.web.app/
- Size: 270 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nexus: Your Gateway to Free, Premium News Content
## Live Site URLs
- **Firebase Instance 1**: [Nexus Live](https://nexus-3e632.web.app/)
- **Firebase Instance 2**: [Nexus Live2](https://nexus-3e632.firebaseapp.com/)
- **Surge**: [Nexus Live3](https://nexus-news-gatway.surge.sh)
---
## Admin Credentials
- **Email**: N/A
- **Password**: N/A
---
## Features
1. **Responsive Design**
Nexus offers a fully responsive layout, ensuring a seamless user experience across mobile, tablet, and desktop devices.
2. **Dynamic Articles**
The platform dynamically fetches and displays the latest news articles using React Query, keeping users up-to-date effortlessly.
3. **User-Friendly Article Posting**
Adding articles is simple and smooth with a user-friendly interface. Premium users can enjoy enhanced features tailored for them.
4. **User Reviews**
Users can express their opinions and provide reviews on articles or platform features, offering valuable insights.
5. **User Authentication**
Secure login and registration powered by Firebase Authentication, including role-based access control for admins and premium users.
6. **Premium Articles**
Subscribed users gain exclusive access to premium articles, enhancing satisfaction and retention.
7. **Admin Dashboard**
Admins can efficiently manage articles, subscriptions, and user roles through an intuitive dashboard.
8. **Integrated Payments**
Subscription management is handled securely and efficiently through Stripe.
9. **Real-Time Notifications**
Users receive live updates about breaking news and other important notifications without refreshing the page.
10. **SEO Optimized**
Designed with SEO best practices to rank higher on search engines and attract more traffic.
---
## Tech Stack
- **Frontend**: React, TailwindCSS, MaterialUI, DaisyUI, Framer Motion
- **Routing**: React Router
- **Backend**: Node.js, Express
- **Database**: MongoDB
- **Authentication**: Firebase
- **Payments**: Stripe
- **Others**: React Query, Framer Motion
---
## Repositories
- **[Backend Repo](git@github.com:Programming-Hero-Web-Course4/b10a12-server-side-jubayerahmed46.git)**
- **[Frontend Repo](git@github.com:Programming-Hero-Web-Course4/b10a12-client-side-jubayerahmed46.git)**
---
## Run the Project Locally
### Step-by-Step Guide
1. Clone the repositories:
- **Client-Side**:
```bash
git clone
```
2. Navigate to the respective project directories:
- **Client-Side**:
```bash
cd client
```
3. Install dependencies:
- **Client-Side**:
```bash
npm install
```
4. Add `.env` files:
- **Client-Side**: Add Firebase credentials in `.env`.
- **Server-Side**: Add MongoDB credentials in `.env`.
5. Start the servers:
- **Client-Side**:
```bash
npm run dev
```
---
### Dependencies
- **React**: JavaScript library for building user interfaces.
- **TailwindCSS**: Utility-first CSS framework for rapid UI development.
- **MaterialUI**: React component library for fast and customizable UI components.
- **DaisyUI**: TailwindCSS plugin for beautiful, customizable UI components.
- **React Query**: For data fetching, caching, and synchronization.
- **Framer Motion**: For animations and transitions.
- **Node.js**: JavaScript runtime for building server-side applications.
- **Express**: Web framework for Node.js.
- **MongoDB**: NoSQL database for storing application data.
- **Firebase**: Platform for authentication and hosting.
- **Stripe**: Payment gateway for subscription management.