Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/lukaszkolodziejski/xxxl_global-news-1

[ GIF ] My the Second Largest Project ( from React to Redux-Saga... ) // 07.2020
https://github.com/lukaszkolodziejski/xxxl_global-news-1

asynchronous-components axios bem cssmodules es6 html5 mvp prop-types react react-router redux redux-thunk rest-api scss

Last synced: about 13 hours ago
JSON representation

[ GIF ] My the Second Largest Project ( from React to Redux-Saga... ) // 07.2020

Awesome Lists containing this project

README

        

> ## XXXL_Global-News-1 ( from React to Redux-Thunk... ) // 07.2020
> #### I connected here a lot of technologies in one place:
> #### ... to show what I can create.

```js
JavaScript React.js Redux
Redux-Thunk Redux-Saga React Router
Axios SASS / SCSS CSS Modules
CSS3 function* generator / yield HTML5
Babel asynchronous components REST API
Prop Types ES6 BEM
MVP

```

> # How it work ? (11 Steps)
> ## I want to show the most important details and possibilities of my application here :) (only 2 min)

---

> ## 1. Start page & Load API:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/1-start.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 2. Show more articles after click the button:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/2-show-more-button.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 3. The Filter "Topic" >> Tech, Sports, Travel, Politics <<
>> #### Click 2 times to reset this filter
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/3-filter-topic.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 4. The Filter "Time": >> This month, This week, Today <<
>> #### Click 2 times to reset this filter
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/4-filter-time.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 5. The Filter "Sort By":>> Popularity, Publication Date <<
>> #### Click 2 times to reset this filter
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/5-filter-sortBy.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 6. Clear all of filters:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/6-clear-filter.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 7. Click and Show this full Article:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/7-read-more-article.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 8. Return to main page:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/8-return-article.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 9. Responsive View from large Desktop to Mobile Version:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/9-responsive-view.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> ## 10. Fast summary all of Steps:
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/10-all-steps.gif)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---

> > # 11. Scheme of Project
[![Demo CountPages alpha](https://github.com/LukaszKolodziejski/AppUnite-2/blob/master/src/assets/11-schemat.png)](https://github.com/LukaszKolodziejski/AppUnite-1)

---
---
---
---

>> # Extra Bonus :fire:

### Please Check this Project and after then I welcome to my second Solution (XXXL_Global-News-2) to show more Advanced Technologies.
### But Now Really Check this Entire (XXXL_Global-News-1) to see later what's the Difference between both Projects.

---
---
---

> > # How to use the downloaded files

### 1) Run "npm install" in the extracted folder
### 2) Run "npm start" to view the project

Compare my code to yours to solve issues you might encounter. You may also copy
the content of src/ into your own project's src/ folder to use your project setup
(which might've been created with a different create-react-app version) and still use my code.