Fantasy Quest - An RPG built on the web with React and Redux

Fantasy Quest (name is a work in progress - yes, it's derivative 😅) is the largest single project I've ever worked on. It's an RPG that I started in order to learn the finer points of React and Redux.

What I've learned on this project thus far:

• React hooks, and how to manage a large number of React components. This app has well over 50 React components.
• Redux - I started with base Redux and quickly moved into the React-Redux library. Managing global state with Redux is actually a joy once you get a hang of the boilerplate.
• So many little CSS tricks, like how to make tidy little progress bars, SVGs as backgrounds, transforms, ect.
• Several different ways to do animations. This was specifically for the character movement you can see in the clip above - the requirements was that multiple animations are chained back to back as the pathing occurs. I tried CSS animations, anime.js, and GSAP, before finally moving into Web Animation API.
• Promises and async functions. Promise.all() is just lovely.

All that being said - I still feel the urge to start all over again. I've been working on this project part time for the past year, and I feel like with what I've learned in that time alone it's justifiable to start over and restructure things and use new techs, such as Redux Toolkit.

Where it's going next:

• Polish in the styling. There's still default styles quite a few components.
• Content - the pieces are in place, but I need to actually create areas for the character to explore - there will be at least two dungeons to explore and loot.
• Performance pass. The combat movement animations stutter a little when there's multiple enemies. This is likely due to rerendering at just the wrong time - I still have to explore that bug more thouroughly.