Process in making Pals

State

React's own (and awesome) context API with useReducer hook. Used sessionStorage as it is kind of CRUD app so security is a concern.

Async Data Fetching

My own implemented 'usePromise' custom hook one-handedly took care of everything that had to do with AJAX requests.

Authentication

Both authentication and data-storing are done with a free backend api called truelycontacts/swagger. My another custom hook 'useField' is a rockstar here for real-time validations of input fields that also supports real-time async data validation from the backend in real time with debounce support. So errors and valid messages could smoothly shown to the user. Used Firebase storage for storing images and with another hook 'useImageUpload' .

Styling

styled-components , simply delight.

Most Challenging Parts

'useField' and 'useImageUpload' were complicated to make work properly. But I dont mind hard work if results are that great.

Process in making Tvtube

State

Context API with useReducer as global store to connect the TV with the Remote , fetching the videos and assiging each of them with a channel number in remote that also changes with the pagination change. Thanks to Youtube's pagination tokens. I mostly had used create-react-app till that point. I made this app with from scratch with all webpack and babel configuarions.

Async Data Fetching

As per Youtube player API docs, I implemented 'useYoutubeScript' custom hook for properly connecting the app to the api. Data searching and suggestions showing was managed by useEffect and custom useDebounce hooks

Styling

css only.

Most Challenging Parts

This app was really one of the toughest project to me in terms of State management of 'TV' component. Assigning channel numbers to fetched videos, the functionalities like TV on/off, vol up/down, channel & volume +/-/mute with youtube player api, timers and ultimately sync everything properly to the state and showing on the screen, using dom refs for draggable remote were really more challenging than I thought.

Process in making eDiary

State

Usually we use frameworks to make Single Page Applications like React, Angular, Vue etc. I just wanted to make with vanilla javascript. All the the compoents in app extends a base Component class, that accepts props and multiple parameters and renders HTML, wrapped in a div with a autogenerated unique identifier (with generator functions) as key attribute. it automatically executes the specified code in the 'afterrender' method after render is completed. I used MutationObserver API for each Component to track their removal from dom so that the assigned 'cleanUp' method could be executed automatically. I have used browser's Custom Events to get a stable connection between 'Diary' and 'Date-picker' Components.

Routing

I wrote a few functions with History API to enable dynamic Routing that renders components and also supports additional props to pass to the components.

Authentication

The email-password authentication of Firebase is inetegrated in app. It uses sessionStoarage to store fetched user data per session.

Styling

css only.

Animations

I have implemented 'animateFLIP' function that uses the FLIP technique . FLIP (Fisrt Last Invert Play), is way to make performant animations as it only applies transition / animation to the hardware accelerated properties like 'transform' and 'opacity' and does not effect the 'layout phase' of browser's rendering process. I used it for some page transition effects.

Most Challenging Parts

Surprising to myself, the single-page app related steps like routing, and components were not that tough to get working. I would rather say the diary's internal functionalities like opening, closing, correct date wise pagination with performant transitions caused me a lot of headache at times. But that is never painful because I love it.