100-days-of-react-native with WhiteBoard

This project serves as logs entries for the original react native project called WhiteBoard. I started this project on 10th October, 2019.

The project can be viewed at:

View	URL
Frontend Git	https://github.com/shhdharmen/WhiteBoard
Expo view 📱	https://expo.io/@shhdharmen/WhiteBoard
----------------------	------------------------------------------------------------------------------------
Backend Git	https://github.com/shhdharmen/white-board-strapi

I am planning to build something with these requirements.

Logs

Day 0: October 10-11, 2019

✅ Initial setup done

Today's Progress:

• Read getting started docs for React Native and Expo.
• Created main project using Expo's Managed Workflow with Typescript.
• Created both repos, logs and main project.
• Setup github actions to deploy and publish in main project.

Thoughts:

• It took some more time to complete initial setup, but that's okay. I am happy with it 😄.

Links to work:

Link	URL
Logs Project Github Pages :octclipboard:	https://shhdharmen.github.io/100-days-of-react-native/
Main Project Git	https://github.com/shhdharmen/WhiteBoard
Web 💻	https://shhdharmen.github.io/WhiteBoard/
Expo 📱	https://expo.io/@shhdharmen/WhiteBoard

---

Day 1: October 12, 2019

Server and API setup

Today's Progress:

• Created api server White Board Strapi project using Strapi
  • Created 4 content-types in it:
    • Notes
    • Categories
    • Colors
    • Tags
• Also deployed it on heroku

Link to work:

White Board Strapi Repo

---

Day 2/3: October 14/15, 2019

Further authentication setup on server

Today's Progress:

• I've setup policies so that logged-in user can see only owned notes, categories, tags.
• Added native base for UI kit, lottie for loader animation and react navigation for routing.
• Changed primary theme color of native base, guide here.
• Created a Main component, which will hold all the navigations like below:
  • HomeScreen - Currently it's showing only loader. I will logically hide it and show dashboard page if logged in and login page if not.
  • DashboardScreen - Just a skeleton
  • LoginScreen - Just a skeleton
  • RegisterScreen - Just a skeleton
  • ForgotPasswordScreen - Just a skeleton

Thoughts:

• I will continue on how to store jwt token in react native and will implement login, register and forgot password next.

Link to work:

• Backend commit for user authentication
• Frontend commit: added native base, lottie, react navigation

---

Day 4-5: October 18-19, 2019

Login, Auth flow and jwt token management

Today's Progress:

• Upgraded expo-cli version
• Read Authentication flows for React Navigation.
• Created animated routes.
• Read about environments and implemented.
• Used axios for HTTP client.
• Implemented show/hide for password field.

Link to work:

• Commit link

---

Day 6: October 31, 2019

Fetch notes

Today's Progress:

• Fixed login UI.
• Fetched notes after login.
• Used Card of NativeBase to preview notes.
• Added header in login and home screen.
• Added fonts: Poppins and AnonymousPro, thanks to https://fontpair.co/.

Link to work:

fonts, fetch notes, login ui corrections

---

Day 7: November 1, 2019

Change in content types, add note ui, settings ui, no notes ui

Today's Progress:

• Created couple of UIs - No notes UI, Add Note UI, Settings UI.
• Added animations using react-native-animatable.
• Changed content types on backend and removed relationships.
• Added list-is-empty image when no notes are there.
• Created some shared components: HeaderText (and input), TextLoader to handle custom stylings.

Thoughts:

I really struggled with animations, but react-native-animatable made it easier at last.

---

Day 8: November 23, 2019

Colors, Archive, Edit and Delete Note

Today's Progress:

• Used react-native-color-palette for color selections
• Added update api calls
• Showing delete confirm dialog before actually deleting
• Archive note and undo it (by toast button)

---

Day 9: December 10th, 2019

Today's Progress:

Fixed iOS specific issue. TouchableNativeFeedback is only working in android. So, made a shared component which will return TouchableNativeFeedback for android and TouchableHighlight for iOS.

Link to work:

Commit

---

Day 10: December 11th, 2019

Today's Progress:

Added a searchbar with menu, search and thumb icons.

Link to work:

Commit

---