Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rezwanhossen/newsgrid

newaGrid is a morden news platfro affective user an eyes personalize way to access and shear news.
https://github.com/rezwanhossen/newsgrid

emailjs firebase jwt-token react-table reactjs redux stripe-js tanstack-react-query

Last synced: about 1 month ago
JSON representation

newaGrid is a morden news platfro affective user an eyes personalize way to access and shear news.

Awesome Lists containing this project

README 

        
 **NewsGrid**:



---



### **NewsGrid Setup Documentation**



---



#### **1. Introduction**

**NewsGrid** is an advanced news aggregator platform offering real-time, categorized, and personalized news feeds. Users can interact with news content by submitting, liking, sharing, and bookmarking articles, all while staying updated on trends, weather, and breaking stories.



#### **2. Project Overview**

**NewsGrid** serves as a comprehensive news hub, making the latest news accessible across multiple categories and allowing user-generated content, moderated by admins. This documentation provides a complete overview of NewsGrid's features, functionality, and development guidelines.



#### **3. Features in Detail**



1. **Real-Time News**  

   - Constant updates with the latest articles to keep users informed with current news.



2. **Categorized News**  

   - Allows sorting news by categories like Politics, Sports, and Entertainment.



3. **Voice Search**  

   - Users can search for news through voice commands for better accessibility.



4. **Users News**  

   - Dedicated section for articles contributed by users, displayed after admin approval.



5. **My News**  

   - Users can submit articles that, upon admin approval, are displayed on the platform.



6. **Like, Comment, Share**  

   - Social engagement options allow users to interact with articles.



7. **JWT Authentication**  

   - Provides secure access to user accounts and restricted pages using JWT-based sessions.



8. **Private and Admin Routes**  

   - Separate routes for general and admin users to ensure platform security.



9. **Payments**  

   - Users can make payments for premium features with secure gateways.



10. **Report via Email.js**  

    - Users can report issues or send feedback directly through email.



11. **Social Sharing**  

    - Articles are easily shareable on popular social media platforms.



12. **Personalized News**  

    - Custom recommendations page tailored to user interests.



13. **Bookmarking**  

    - Allows users to save articles for later access in their bookmark collection.



14. **Audio News**  

    - Users can listen to news articles for an improved accessibility experience.



15. **Date-Based Search**  

    - A search function that filters news by specific publication dates.



16. **Breaking News**  

    - Real-time stream for critical, urgent news stories.



17. **Trending News**  

    - Displays popular topics based on user interactions and engagement.



18. **Recommended News**  

    - Personalized entertainment recommendations to enhance user experience.



19. **Video News**  

    - Integrates YouTube live channels for users to watch live news.



20. **Location-Based Weather News**  

    - Displays local weather updates based on the user's location.



21. **User Dashboard**



    - **Add News**: Users can submit news articles, reviewed by the admin before publication.

    - **Profile Management**: Users can update their profile information.

    - **Category-Based News Selection**: Personalized feed by selecting preferred news categories.



22. **Admin Dashboard**



    - **User Management**: Admins can view all users and assign roles.

    - **Payment History**: Admins have access to all transaction records.

    - **News Moderation**: Admins review and approve user-submitted news for content quality.



---



#### **4. Architecture & Technologies**



- **Frontend**: React.js for responsive, interactive UI optimized for dynamic content.

- **Backend**: Node.js and Express.js handle server operations, authentication, and API endpoints.

- **Database**: MongoDB for user data, news content, payment history, and bookmarks.

- **Authentication**: JWT-based authentication for secure sessions.

- **Payment Gateway**: Stripe or PayPal for secure transactions.

- **Email Service**: Email.js for easy feedback and issue reporting.

- **Social Media Integration**: Enables social sharing on Facebook, Twitter, and LinkedIn.

- **Voice Recognition**: Hands-free search and interaction using voice recognition.

- **Audio Playback**: Text-to-speech APIs for audio playback of news content.



---



#### **5. User Guide**



**Home Page Features**



- **Real-Time News**: Constantly updates content to display the latest news.

- **Filter by Category**: Users can filter news by specific categories.

- **Voice Search**: Enables voice-based searching with a microphone icon.

- **Interact with News**: Like, comment, and share news articles.

- **Bookmark Articles**: Save articles to read later.

- **Audio News**: Listen to articles using the "Listen" option.

- **Date-Based Search**: Calendar-based search for specific publication dates.

- **Trending and Breaking News**: Separate sections for trending and urgent news.

- **Video News**: Watch live news channels on the website.

- **Local Weather Updates**: Location-based weather updates on the home page.



**User Dashboard**



- **Submit News**: Users can contribute articles for admin review.

- **Manage Profile**: Edit personal details and account settings.

- **Category Preferences**: Users can select preferred categories for a customized feed.



**Admin Dashboard**



- **Manage Users**: Admins can update user roles and permissions.

- **Approve or Reject News**: Admin controls user-submitted news to maintain quality.

- **Payment Tracking**: Admins can review all platform transactions.



---



#### **6. NewsGrid Setup Instructions**



##### **1. Client Side Setup**



1. **Clone the Client Repository**  

   ```bash

   git clone https://github.com/rezwanhossen/newsGrid.git

   ```



2. **Navigate to the Client Directory**  

   ```bash

   cd newsGrid-client

   ```



3. **Install Dependencies**  

   ```bash

   npm install

   ```



4. **Configure Environment Variables**  

   Create an `.env.local` file and include the following:

   ```env

   VITE_apiKey=

   VITE_authDomain=

   VITE_projectId=

   VITE_storageBucket=

   VITE_messagingSenderId=

   VITE_appId=



   VITE_IMGBB_key=

   VITE_pymeny=



   VITE_NAIMUL_API_KEY=

   VITE_Breaking_apiKey=

   VITE_recommended_apiKey=

   VITE_Video_apiKey=

   ```



5. **Run the Client Application**  

   ```bash

   npm run dev

   ```



##### **2. Server Side Setup**



1. **Clone the Server Repository**  

   ```bash

   git clone https://github.com/rezwanhossen/newsGrid-server.git

   ```



2. **Navigate to the Server Directory**  

   ```bash

   cd newsGrid-server

   ```



3. **Install Dependencies**  

   ```bash

   npm install

   ```



4. **Configure Environment Variables**  

   Create an `.env` file with the following keys:

   ```env

   DB_User=

   DB_Pass=

   ACCESS_TOKEN_SECRET=

   STRIP_KEY=

   ```



5. **Run the Server Application**  

   ```bash

   nodemon index.js

   ```



---



### **NewsGrid Team Contributors**



1. **Rezwan Hossain**  

   **Role**: Team Leader  

   **GitHub**: [github.com/rezwanhossen](https://github.com/rezwanhossen)



2. **Naimul Islum Emon**  

   **Role**: Contributor  

   **GitHub**: [github.com/Naimul02](https://github.com/Naimul02)



3. **Mahfuzur Islam**  

   **Role**: Contributor  

   **GitHub**: [github.com/mafujur-rahman](https://github.com/mafujur-rahman)



4. **Md Hasan**  

   **Role**: Contributor  

   **GitHub**: [github.com/ahsan200t](https://github.com/ahsan200t)



5. **Rafiet Rana**  

   **Role**: Contributor  

   **GitHub**: [github.com/rafietrana](https://github.com/rafietrana)



---