Coder Social home page Coder Social logo

lukaszkolodziejski / xxxl_global-news-2 Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 194.49 MB

[ GIF ] ( That is XXXL_Global-News-1 with completely New and Modern Technologies >> Extra Bonuses << ) // 07.2020

JavaScript 91.33% HTML 1.72% CSS 6.95%
react react-hooks redux redux-saga react-redux-hooks redux-thunk javascript es6 axios scss

xxxl_global-news-2's Introduction

XXXL_Global-News-2 // 07.2020

This work the same like XXXL_Global-News-1, but more Modern and with New Other Technologies:

  • Builded on one of my the best Webpack
  • (XXXL_Global-News-1) Redux & Redux-Thunk
  • (XXXL_Global-News-2) Redux & Redux-Thunk & Redux-Saga
  • All in the function components
  • React Hooks (e.g. useState, useEffect, useCallback, useMemo)
  • React-Redux Hooks (e.g. useDispatch, useSelector)
  • React.memo()
  • (XXXL_Global-News-1) Works asynchronously with: asyncComponent()
  • (XXXL_Global-News-2) Works asynchronously with: React.Lazy()
  • Testing with Enzyme
  • Better syntax of code & fixed some bugs
  • More Components to No Repeat the same Code

I connected here a lot of technologies in one place:

... to show what I can create,

JavaScript                      React.js                           Redux
Redux-Thunk                     Redux-Saga                         React Router
Axios                           SASS / SCSS                        CSS Modules
CSS3                            function* generator / yield        HTML5                                
Babel                           ES6                                REST API    
Webpack                         React.Lazy()                       React.memo() 
React-Redux Hooks               React Hooks

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




2. Show more articles:

Demo CountPages alpha




3. Filter "Topic" >> Tech, Sports, Travel, Politics <<

Demo CountPages alpha




4. Filter "Time": >> This month, This week, Today <<

Demo CountPages alpha




5. Filter "Sort By":>> Popularity, Publication Date <<

Demo CountPages alpha




6. Clear all of filters:

Demo CountPages alpha




7. Click and Show this full Article:

Demo CountPages alpha




8. Return to main page:

Demo CountPages alpha




9. Responsive View from large Desktop to Mobile Version:

Demo CountPages alpha




10. Fast summary all of Steps:

Demo CountPages alpha




11. Scheme of Project

Demo CountPages alpha




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.

xxxl_global-news-2's People

Contributors

lukaszkolodziejski avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.