reactjs-unsplash's Introduction

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.

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

reactjs-unsplash's People

Contributors

Stargazers

Watchers

reactjs-unsplash's Issues

Suggestions

Use babel-preset-env.
If you don't want to worry about the Webpack or Babel setup, use create-react-app. It creates an almost perfect setup for most React projects.
No need to use the jsx extension. It doesn't really add any value.
In my experience, using redux-saga makes things unnecessarily complicated and makes it harder to onboard new developers. We avoid using it.
I strongly recommend the container-component approach over your current approach. By keeping all the withRouter usages and component Redux integrations in the containers, you can test components much more easily.
I recommend static typing using Flow with React. Flow types can also replace PropTypes and Redux constants. You can also use eslint-plugin-flowtype to enforce Flow types for every JS file.
In my experience, developers care more about writing and maintaining tests when the test files are always in front of them! That's why I avoid creating a separate directory for tests. For example, if I'm writing tests for a function defined in index.js, I create a test file in the same directory called index.spec.js.
Look into using Travis for your open-source projects on Github. It makes automated testing and PR reviews much easier.

Really good job overall 👍 Khaste nabashi Ahmad jan.

Recommend Projects

atahani / reactjs-unsplash Goto Github PK