Responsive FAQ page using React, TypeScript and CSS3

What are you most proud of, and what would you do differently next time?

This is the first TypeScript project I've implemented and I was surprised that it took less time than I expected to implement given there was a steep learning curve involved.

I managed to break the solution down into components that I believe are 'right-sized' for the solution and also applied the principles of typing in terms of defining interfaces for the typed React pops. Another feature that I used from TypeScript is 'Generic Types' for the Function Components (Accordion and AccordionItem)

I learned a great deal about TypeScript and React Function Components and would not do anything differently because this project is ideal for learning a new tech stack.

What challenges did you encounter, and how did you overcome them?

Looking at the list of requirements, the initial feeling is slightly overwhelming - so what I do is break down the problem into separate concerns:

• UI Design and layout
• Content/data
• Interactive components

The navigation requirement threw me off a little - so I decided upfront that buttons would be the most appropriate way to go because they natively support tab indexing and keyboard actions - In this solution the challenge was really to style buttons so they look like and behave like links.

The obvious challenge was to learn enough TypeScript to be safe - I managed to get by using the React Docs and looking at some unrelated tutorials - the idea was to learn the pattern for defining types and employing TypeScript for function components.

Another challenge is to avoid 'over-engineering' so I simplified the data layer into a single object with the list of FAQs. I could have made things more complicated by fetching json from the server but managed to resist that urge.

What specific areas of your project would you like help with?

Any recommendations on improving the codebase will be helpful and appreciated.

Thanks!