Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/willdarkins/the_scroll_down

A simple React news application utilizing Material UI and Framer motion on the front end, while ApolloGraphQL is the structural basis of the backend
https://github.com/willdarkins/the_scroll_down

apollographql css3 graphql javascript material-ui mongodb nodejs react react-router styled-components

Last synced: 13 days ago
JSON representation

A simple React news application utilizing Material UI and Framer motion on the front end, while ApolloGraphQL is the structural basis of the backend

Awesome Lists containing this project

README 

        
# The Scroll Down



## Description 



The Scroll Down is a simple platform that gives the user the opportunity to be informed by searching news across multiple news sites. The Scroll Down also allows the user to save any article they come across for later purpose. With a simple and intuitive design, The Scroll Down is a valuable tool for anyone looking to start learning about the world around them, or people who already follow the news, but want to expand their scope.  



The deployed application can be found **[HERE](https://the-scroll-down.herokuapp.com/)**



## Table of Contents



* [Badges](#badges)

* [Features](#features)

* [Usage](#usage)

* [Installation](#installation)

* [Run Locally](#runlocally)

* [Screenshots](#screenshots)

* [Demo](#demo)

* [Feedback](#feedback)

* [Authors](#authors)

* [Acknowledgements](#acknowledgements)

* [License](#license)

## Badges

 

*To complete the project the following programming languages, frameworks, platforms and libraries were used:*



![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)

![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)

![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white)

![Heroku](https://img.shields.io/badge/heroku-%23430098.svg?style=for-the-badge&logo=heroku&logoColor=white)

![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=material-ui&logoColor=white)

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)

![Apollo-GraphQL](https://img.shields.io/badge/-ApolloGraphQL-311C87?style=for-the-badge&logo=apollo-graphql)



## Features



- Light/dark mode toggle

- SignUp/SignIn/SignOut

- Reactive

- Mobile Friendly



## Usage



- User can search up any specific topic or keyword, and they are presented with multiple results.



- All results will be linked off to the articles and their appropriate site.



- User can sign up, which enables the ability to save articles that they can retroactively access.



## Installation



- In the Github repository, copy the SSH key link to clone onto your local device

- Open the project in your code editor of choice and enter the following command in console:

```bash

  npm i

```

    

## Run Locally



Clone the project



```bash

  git clone https://github.com/willdarkins/the_scroll_down

```



Go to the project directory



```bash

  cd the_scroll_down

```



Install dependencies



```bash

  npm i

```



Start the server



```bash

  npm start

```



## Screenshots



![Home Page](media/Home_Page.PNG)

![SignIn Page](media/SignIn.PNG)

![SignUp Page](media/SignUp.PNG)

![Results Page](media/Results.PNG)

![Saved News Page](media/Saved_News.PNG)



## Demo



![Video demo of how the scroll down works](media/The_Scroll_Down.gif)



## Feedback



If you have any feedback, questions regarding the development of this project, or any other specific questions that come to mind, feel free to contact us via email or Github.



Will Darkins: - [Email](mailto:[email protected]) [Github](https://github.com/willdarkins)



Aaron Robinett - [Email](mailto:[email protected]) [Github](https://github.com/aaronRobinett)



Octavio Politron - [Email](mailto:[email protected]) [Github](https://github.com/Octavio258)



## Authors



- [@Will_Darkins](https://github.com/willdarkins)



[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://willdarkins.herokuapp.com/about)



[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://willdarkins.herokuapp.com/)



- [@Aaron_Robinett](https://github.com/aaronRobinett)



[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://.com/)

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://.com/)



- [@Octavio_Politron](https://github.com/Octavio258)



[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://.com/)

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://.com/)



## Acknowledgements



 - [Awesome README](https://github.com/matiassingers/awesome-readme) Solid references for making a good README



 - [Shields.io](shields.io) for the great badges

 

## License



[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)