Olawale

A journal app that replicates the app written in vanilla JS in react, making use of react query for state management

[Watch the video](https://vimeo.com/1020517053)

This is a port of the vanilla JS of the same project into a react project. It makes use of react query for state management and demonstrates my skills with using library and implementing complex functionalities with react. The project is filled with a lot of complex, dynamic and re-usable components, complex state management, making use of the ContextAPI, useReducer for keeping local state in sync and react query for remote state correlation. Each components had its own distinct challenges with implementation like the `Overlay` component which kept track of each overlayed component stacked ontop of other components, the component positioning relative to the triggering element and much more.

It was pretty great working on this project, it showcases my skill in working on a certain level of complexity with react and also in porting projects into react logic.

Website: [journal\_react](https://journalinghub-rdx.netlify.app)

Github FE:[ journal\_react](https://github.com/strapchay/journal_react)

Github BE:[ journal\_api](https://github.com/strapchay/journal_api)


Journal React

A port of the todo project built with react and with redux for state management

[Watch the video](https://vimeo.com/1044993317)

The porting of this project makes use of react and react redux. It showcases, my skill in implementing complex  state management with redux, both local and remote. Making use of createAsyncThunks, modern redux toolkit, porting, the offline state functionality making use of localStorage and also syncing it with the api state when network becomes available using the ported `syncLocalStorageToAPI` class. It also keeps track and syncs the todo list reordering, makes use of an overlay component through a createPortal functionality. Overall, it was create working on the project, solidifying my redux skill

Website: [todo\_react](https://appistodo-react.netlify.app)

Github FE: [todo\_react](https://github.com/strapchay/todo_redux)

Github BE: [todo\_api](https://github.com/strapchay/todo_api)


Todo React 

A basic react app that uses redux for state management

This project was meant to implement and learn redux logic for state management, it was a basic implementation and usage of redux.

Github repo: [todo\_redux\_basic](https://github.com/Strapchay/todo_redux_basic)
Website: [todo-rdx](https://master--todo-rdx.netlify.app/)


Todo React Redux

It was a great experience working on this project, felt overwhelming when working on it but it was amazing and specifically what i envisioned for the project whilst starting out with it.

[Watch the Video](https://vimeo.com/1020517053)

This project was meant to replicate notion's journal table view, which i think was aptly captured with the end result of the project. The major focus of the project is mainly about code architecture, integration with api, implementing design patterns where necessary  and building on my vanilla js skills.</div>

A lot of hurdles were faced when writing the html and styling of the project, in order to make the project as responsive as the app being replicated. And due to the dynamicity of the components in the app, it pushed my markup and styling skills to be better and more refined.  Working on a huge solo project as this also allowed me learn different concepts, some examples of which was garbage collection. I had to create adaptable classes for each component view which had a method to garbage collect when the view is disposed off. Another concept was implementing the Pub/Sub pattern due to the need for specific classes/ component views to communicate with other component views and also trigger an event based on an action on a different class, the logic for this is implemented in the `signals.js` module and this was necessary due to the lack of reactivity in vanilla JS .

Also,  i implemented the MVC pattern to separate the logic for the app, this proved to make the code more verbose to follow on the pattern but it also allowed more reasonability on the code and ease to change specific logic where necessary, since its easy to track the specific point or know the specific place a bug might have occurred.

For the backend/api, i made use of Django & Django REST Framework. Implemented a Token based login which had a 3 days expiration period and the all range of authentication flow needed for a project. I had tests for each functionalities.  The api is built on Docker and allowed learning the concept of microservices within the concept of the project and deploying with github actions.

Github repo FE: [journal\_app](https://github.com/Strapchay/journal_app)
Github repo BE: [journal\_api](https://github.com/Strapchay/journal_api)
BE Docs: [journal\_api\_docs](https://journalinghub.ddns.net/api/docs)


Journal App js

It was great working on this project, its design and implementations were original but did draw some concepts from google's notes app. It was fun working on its responsivity and its offline capabilities even though its not a PWA.

[Watch the video](https://vimeo.com/1044993317)

This app is meant to replicate a todo app which is responsive and has offline capability. The project focused on code architecture, integration with api, implementing code sync with remote data and offline usability and building on my vanilla js skills.

The project involved implementing garbage collection on each component classes, used the MVC pattern for code architecture and logic separation. Implemented a drag functionality to switch todo list ordering.

For the backend/api, i made use of Django & Django REST Framework. Implemented a Token based login which had a 3 days expiration period and the all range of authentication flow needed for a project. I had tests for each functionalities.  The api is built on Docker and allowed learning the concept of microservices within the concept of the project and deploying with github actions.

Github repo FE: [todo\_app](https://github.com/Strapchay/todo_app)
Github repo BE: [todo\_api](https://github.com/Strapchay/todo_api)
BE Doc: [todo\_api\_doc](https://appistodo.ddns.net/api/docs)


Projects

Journal React

Todo React

Todo React Redux

Journal App js

Todo App JS