- View list of photos
- Add new photo
- Edit photo
- Remove photo
- Login with Google
- 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
-
Initial project
-
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
- Redux: 26 - Jun - 2020
- Setup Redux Toolkit
- Add photo with Redux toolkit
- Edit/Remove photo
-
Deploy: 26 - Jun - 2020
-
API: 27 - Aug - 2020
- Fetch API and handling with axiosClient & query-string
- 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
- Can't use
process.env.VARIABLE_NAME
- Solution:
- Update variable in
.env
REACT_APP_API_URL
: replace axiosClient.baseURL insrc\api\axiosClient.js
REACT_APP_FIREBASE_API
: replace config firebaseconfig.apiKey
insrc\App.js
REACT_APP_FIREBASE_AUTH_DOMAIN
: replace config firebaseconfig.authDomain
insrc\App.js
- Update variable in
|__ 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
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