Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

In-browser markdown editor solution using React and Redux, (Vite)

Daniil 170

@Daniil034

Desktop design screenshot for the In-browser markdown editor coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


My second SPA using Redux (the first one isn't deployed yet). I wouldn't say that I found it easy to handle this JS library, but it is definitely better than passing props throughout the React components. But still, I'm not sure that such implementation as you can see here is a rational approach since even for the sidebar I had to create a separate state in the Redux store (some adjacent components needed access to the same state).

Community feedback

@DonUggioni

Posted

Hey there,

Good job on this one =)

Redux can be a pain and I believe it might be better for really big projects with lots of state management. Did you try using the createContext hook?

1

Daniil 170

@Daniil034

Posted

@DonUggioni Hey. Thanks for your feedback! You are the second person who tells me about the Context API) As far as I know, it works for passing props throughout an application, but Redux also provides you Devtools which are quite handy, not to mention other staff that can be used along with this library. Actually, after writing the Redux reducers and combining store for several times with redux toolkit, it becomes easier and doesn't make too many obstacles for you))

0

@DonUggioni

Posted

@Daniil034 That is true yeah. I am learning Redux now, there's a lot of boiler plate code but once it's set up, it seems more complete. And makes it easier to deal with a lot of state changes and passing data around.

1
Daniil 170

@Daniil034

Posted

@DonUggioni A little advice, after fundamentals just focus on redux toolkit and after completing it and starting your first project, open Redux toolkit / react-redux documentation and it will be muuuch easier looking in it)) To be honest, I even implemented controllable input in this project not via react, but redux, since this state has to be shared between two different components, and in my implementation lifting state to an upper-level component wouldn't have helped because I used conditional rendering and on mobiles there is just either input or preview component) I am looking forward to seeing your first Redux project)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord