Skip to content

📸 this app allows you to watch and like photos from unsplash.com

Notifications You must be signed in to change notification settings

VadimVeberg/unsplash-photos-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is my diploma work on Skillbox course "JavaScript".

React, Redux and React-router

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.

Feed

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.
Feed

Unsplash API

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.

Patterns

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.

Styled Components

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.
Pre-render containers

Adaptive

Layout of this app is fully adaptive. I used some components from Reactstrap library to make this.

Error handling

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.
Error handling

Available Scripts

In the project directory, you can run:

npm start

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.

npm run build

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!