---

📋 Table of Contents

1. 📜 About the project
2. 🤖 Introduction
3. ⚙️ Tech Stack
4. 🔋 Features
5. 🤸 Quick Start
6. 🤝 Contributing

📜 About the Project

ScrollNews is a news aggregation application built in React.js that fetches daily news updates from the API, stores them in database, and saves them in localStorage before displaying them on the screen. The application is designed to provide users with the latest news updates of api in a user-friendly and interactive manner.

⚙️ Tech Stack

• React.js
• React Router
• Axios
• Appwrite
• Tailwind CSS

🔋 Features

• News Search: News is fetched daily from the API.
• Search News: Easily search for specific movies using a search function.
• Infinite Scroll: News scrolls continuously on the home page.
• Favorites: Users can save news as favorites, which are stored in localStorage.
• Trending News Algorithm: Displays trending news based on a dynamic algorithm.
• Details Modal: When clicking on a news item, a modal displays more information about it.
• Modern UI/UX: A sleek and user-friendly interface designed for a great experience.
• Responsiveness: Fully responsive design that works seamlessly across devices.

Soon

• Dark/Light Mode: Switch between light and dark modes for a better user experience.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/eobrunodias/scrollnews.git
cd scrollnews

Installation

Install the project dependencies using npm:

npm install

Set Up Environment SERVER Variables

Create a new file named .env inside the /server folder of your project and add the following content:

API_BASE_URL=
API_KEY=

Replace the placeholder values with your actual GNews API. You can obtain these credentials by signing up on the GNews.

Running the Server

npm run server

Set Up Environment VITE Variables

Create a new file named .env.local in the root of your project and add the following content:

VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=

VITE_APPWRITE_CONFIG_COLLECTION_ID=
VITE_APPWRITE_ARTICLES_COLLECTION_ID=
VITE_APPWRITE_TRENDING_COLLECTION_ID=

VITE_NEWS_UPDATE_CONFIG_ID=

Replace the placeholder values with your actual Appwrite. You can creating a new project on the Appwrite

Running the Project

npm run dev

open http://localhost:5173 in your browser to view the project.

🤝 Contributing

Where can I improve?

We welcome contributions! Whether it's improvements, bug fixes, or new features, feel free to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/new-feature).
3. Make your changes and commit them (git commit -am 'Add new feature').
4. Push your changes (git push origin feature/new-feature).
5. Open a Pull Request on GitHub.

---