This is my diploma work on Skillbox course "JavaScript".
That's the base of my app. No class components, React hooks everywhere instead. Redux store combined by few reducers accroding to each page of app and one global reducer for user authentication. Some actions are global, some are local for current page, see more at actions, reducers, store. Routing between pages is orginized with react-router.
I've made infinity feed that updates before you scroll down. If you have normal internet connection and don't scroll feed very fast, you will not see loading spinner below. This component also save it scroll position in store before you switching to big photo page, so when you go back to feed you will appear exactly in place where you have been. See how I did that in feed-page.js, feed-app-content.js.
Unsplash-photos-app get photos from unsplash.com using unsplash API. I also have made OAuth, so registered users can like photos. See auth-page.js, userActions.js. App token stores in localStorage and sets everytime when you refreshing or opening any page of app. See GlobalActions.js.
For combining a lot of React components together in one app I used React patterns. For example, Array as children feed-page.js (line 59), Function as Children feed-page.js (line 106), Render Callback feed-item.js (line 28) etc.
I've used Styled-components library to create styles dynamically depending of current redux store. So you can find logActionButton component that changes styles themself by value of property 'type'. And for example if you have bad internet connection, photos in feed will load in pre-render colored containers. Height of containers calculating dynamically from server response.
Layout of this app is fully adaptive. I used some components from Reactstrap library to make this.
If you have bad internet connection, my app will show you error message and suggest you to try load content again. I've made that using "error" properties in redux store and conditional rendering.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!