A basic react app that uses redux for state management

Olawale

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/)


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 

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)
