Process in making ViSound

State

Used redux with reselect for global state management. At first Redux workflow seemed tough but after taking the redux courses by Dan Abramov in egghead.io, things made great sense. Though many components are simply have local state with 'useState' hook. Browser LocalStorage for local data storing.

Async Data Fetching

One of the very first projects of mine. In an earlier version I used class based component of React and redux-thunk. But later changed code to use react hooks and removed redux-thunk as useEffect hook was enough. Now I am simply a fan of hooks. Used axios as a better http client

Authentication

Implemented two types of authentication with Firebase . One with oAuth(google), and another with regular one with email and password, also Firebase firestore for some static data storage.

Styling

Used Sass . Recently Changed code base to use newer version sass instead of earlier implemented 'node-sass' that happened to be deprecated

Most Challenging Parts

• Infinite Carousal Component with auto-slide and manual-sliding was the most time consuming thing
• On page refresh, only persisting the state (e.g. cart-items) if user is logged in seemed a bit tricky

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 World-Tour

State

I did not use any official global state logic like redux or context api for this app. As it is mostly navigation-based app, react-router-dom was mostly in-charge of proper functioning of this app.

Async Data Fetching

After researching a lot I found the 'Triposo' API which has really cool end-points that matched my plans. 'usePromise' with 'useDebounce' hooks are my way to go. 'useSearch' custom hook made searching easy. Pixabay API was good choice for comparatively light-weighted images and React-leaflet for providing interactive maps with GeoJSON data stored in Firebase Storage.

Styling

styled-components

Most Challenging Parts

• The maps! I knew It could be tough. I had to do a lot of reasearch for understanding how to work with leaflet library, collecting GeoJSON data of different continents, countries and then storing them in Firebase. And of course navigation wise fetching of all those data.
• I remember the 'Breadcrumb' component also quite difficult to manage as it is solely dependent on react-router-dom. May be not using global state was not the best idea, but thats what I wanted experiment with.

Process in making C19-Tracker

State

A lot of functions! I wrote a good number of functions to manage the state and update the UI. Used beautiful charts of chart.js library which has fairly simple inetegration process.

Async Data Fetching

browsers fetch api to get the latest data from covid19api's different end points. I also used Ipapi API to get the users IP address-based location information.

Styling

css

Most Challenging Parts

The dates! I did not use browser's in-built input i.e. type="date" as they are not widely supported, I had to Implement correct month wise date numbers from the c19apis's starting record date to till today.

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.