Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tinspham209/redux-photo-app
Building Image controller with React, Redux-toolkit, Login with Google
https://github.com/tinspham209/redux-photo-app
firebase formik photo-component react redux-toolkit
Last synced: 2 months ago
JSON representation
Building Image controller with React, Redux-toolkit, Login with Google
- Host: GitHub
- URL: https://github.com/tinspham209/redux-photo-app
- Owner: tinspham209
- Created: 2020-06-17T17:24:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T17:27:34.000Z (about 1 year ago)
- Last Synced: 2023-12-15T18:34:18.382Z (about 1 year ago)
- Topics: firebase, formik, photo-component, react, redux-toolkit
- Language: JavaScript
- Homepage:
- Size: 7.41 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mini Project: Photo App
### Date created: 24 - Jun - 2020
### Screenshot
### Functions:
- View list of photos
- Add new photo
- Edit photo
- Remove photo
- Login with Google
### Tech-stack
- ReactJS Hooks
- bootstrap & reactstrap
- Redux & Redux Toolkit
- Formik : Form
- react-select : selected form
- react-router-dom
- Yup : validation form
- axios : HTTP GET/POST
- query-string : parse & stringify url query strings
- react-firebaseui : firebase UI
- firebase
### Plan of actions
1. Initial project
2. React: 24 - Jun - 2020
- Setup ReactJS
- Add scss support
- Add react-router
- Build UI with Reactstrap
- Folder Structure
- Routing structure
- Relative imports with jsconfig
- Header component
- Banner component
- Random photo component
- NotFound component
- Photo component
- PhotoCard
- PhotoForm
- PhotoList
- Build custom field into Formik
- Bind custom control into Formik
- Random photo control
- Form validation with Yup
3. Redux: 26 - Jun - 2020
- Setup Redux Toolkit
- Add photo with Redux toolkit
- Edit/Remove photo
4. Deploy: 26 - Jun - 2020
5. API: 27 - Aug - 2020
- Fetch API and handling with axiosClient & query-string
6. Auth: 27 - Aug - 2020
- Firebase config
- handle firebase auth changed
- Create Google login UI with firebaseUI
- Handling Race condition when using firebase token
- Handling unsubscribe firebase listener when setTimeout run
- Async action with Redux
- Fake user api
- Async action getMe()
- Call action getMe() on component
### Bug:
- Can't use `process.env.VARIABLE_NAME`
- Solution:
- Update variable in `.env`
- `REACT_APP_API_URL` : replace axiosClient.baseURL in `src\api\axiosClient.js`
- `REACT_APP_FIREBASE_API` : replace config firebase `config.apiKey` in `src\App.js`
- `REACT_APP_FIREBASE_AUTH_DOMAIN` : replace config firebase `config.authDomain` in `src\App.js`
### Folder structure
```
|__ jsconfig.json
|__ .env
|__ public
|__ src
|__ api
|__ app
|__ assets
|__ images
|
|__ components
|__ Banner
|__ Header
|__ NotFound
|__ RandomPhoto
|
|__ constants
|
|__ custom-fields
|__ InputField
|__ RandomPhotoField
|__ SelectedField
|
|__ features
|__ Auth
|__ pages
|__SignIn
|
|__ Photo
|__ components
| |__ PhotoList
| |__ PhotoCard
| |__ PhotoForm
|
|__ pages
| |__ MainPage
| |__ AddEditPage
|__ photoSlice.js
|__ index.jsx
|__ utils
|
|__ App.js
|__ App.scss
|__ index.css
|__ index.js
```
### Set up
Use the cmd line to clone repo to your computer
```
git clone [github_repo_url]
```
Use the cmd line to install dependencies.
```
npm install
```
Run in cmd for start the dependencies server
```
npm start
```