Unsplash Clone

Introduction

This project was developed to demonstrate how you can develop a React.js web application like unsplash from scratch. All of the components have been developed without any third parties library like react-bootstrap. If you understood Persian, you would be able to enroll this course in Faranesh.com.

This project has written only for educational purpose. So we don't want to abuse the name or idea of unsplash.com.

How Does It Look Like?

Some Libraries that have been used

Flow

Everybody nags about JavaScript is loosely typed language, and most of the bugs come from this feature. There are two ways to handle static type checking, TypeScript, and flow. I've used flow since I love ES6 syntax.

Jest

Jest is the best tool for testing React.js applications. It has some cool features like Snapshot. Since this project was developed for educational, Only some tests have been written to demonstrate how tests should be by Jest library.

styled-components

There are many libraries to handle style in React. One of the best libraries is styled-component since you can manage style of components base on behaviors.

Redux Persist

Redux was used as store management Since we don't want to lose user informations such as user profile or access token. Redux Persist was used to store user state into local storage. The configuration is easier than you would think!

Pre Requirements

1.create new application

Since this project is based on unspalsh API you need to have an application. Follow this link to create a new application. You need to set these permissions.

public
read_photos
write_likes
read_collections
write_collections

NOTE: The Redirect URI is http://localhost:3000/auth/callback in development mode base on default settings.

2. create a file with .env.development OR .env.production name to set environment variables like .env.

For more information please see the create-react-app documentation.

NODE_ENV=development

REACT_APP_ROOT_URL=https://unsplash.com

REACT_APP_API_ROOT=https://api.unsplash.com/

REACT_APP_CLIENT_ID=XXXXXXXXXXXXX

REACT_APP_CLIENT_SECRET=XXXXXXXXXXXXX

REACT_APP_OAUTH_PATH=https://unsplash.com/oauth/authorize?client_id=XXXXXXXXXXXXX&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fcallback&response_type=code&scope=public+read_photos+write_likes+read_collections+write_collections

REACT_APP_REDIRECT_URI=http://localhost:3000/auth/callback

Project Commands

Start App in Development Mode

npm run start

Test

npm run test

Test in Watch Mode

npm run test-w

Flow Checking

npm run flow

Linting

npm run lint

Build Project in Production Mode

npm run build

Build and Run Server

npm run build-and-run-server

Run Server Only

npm run run-server