I've been assigned the role of the main frontend developer for a public-facing website, which is somewhat daunting for me. I've mainly worked as a backend developer and only have average experience with frontend technologies, specifically React. I know the basics of React, TypeScript, and have dealt with state management and components, but I've mostly only built individual components or fixed bugs. I haven't created custom hooks or set up proper authentication on the frontend before, and honestly, I just found out what Next.JS is.
In my previous jobs, I mainly handled internal applications that didn't face the public, which means I'm unfamiliar with the additional security considerations in public-facing apps.
I would appreciate any resources or advice to help me get up to speed with modern React development, particularly in terms of:
- Security practices beyond the OWASP Top 10
- The tech stack to use, including whether I should go for Redux for state management and if Next.JS is beneficial even if I'm not doing server-side rendering
- UI/UX choices, specifically whether to utilize Tailwind with SCSS or go for a component library like AntDesign or MaterialUI
- Other valuable technical insights, common pitfalls, and tools like Webpack or Gulp that I might need as I implement mobile-optimized UI mockups, which I find quite intimidating. I want to ensure I meet the high quality expectations set for this project.
4 Answers
Hey, don’t forget about tools like Figma for design mockups! They can export as HTML or React components, which can save you tons of time. Plus, with respect to state management, don’t overcomplicate things with Redux unless necessary—start simple and expand as your application grows.
You might feel overwhelmed, but remember, building the frontend is iterative! Start with illegible designs and improve from there. If it's a webshop, think about how complex e-commerce can get and plan accordingly. Tools like Shopify might not be an option, but focusing on modularity in your React components can save you a lot of headaches later.
I get where you're coming from! If you're feeling a bit out of your depth, it might be a good time to explore NextJS. It combines both front and backend capabilities and could simplify some aspects of your development process, especially with routing and server-side functionalities. Plus, Tailwind is a fantastic choice for styling. Just familiarize yourself with its responsive design classes, and you should be able to handle those mobile layouts effectively!
Totally! Responsiveness can really be simplified with Tailwind. Just don’t sweat it too much about being pixel perfect—flexibility can be key as requirements evolve.
You're right to consider security, but don't forget the backend's responsibility in that arena. For frontend, utilizing proven authorization frameworks and following OWASP guidelines will cover your bases. If you're looking for a UI framework, try to weigh the entries based on your team’s needs. AntDesign and MaterialUI can heavily ease your workload, but be cautious of their learning curve.
Good point! A UI framework can help streamline your development, but just ensure they're a fit for your design goals.
Exactly! It’s all about managing complexity. Stick to core functionality first, then layer on more features.