Corporate Landing Page in React
Note I'm aware this website is less than optimial on mobile devices, I think this is a microsoft issue, or I imported the wrong fabric css files.
Lessons Learned
- CSS in js
- Animations
- Nextjs + Typescript
- Intersection API (love react-intersection-observer)
- More complex Typescript based React Components (See Carousel)
Although I had experience using Typescript on the backend, Typescript + React had a bit of a learning curve.
The is mainly a learning project for me, learning how to add key animations and use css in js via react.
Learned don't use git lfs if you are serving files from a static site generator, only binaries, not required to run repo.
Using microsoft fabric and server side rendering is a bit of a pain. I learned that you need to use commonjs for server side rendering so that the node environment and the browser environment can interpret the code.
References
Various articles helped me figure out how to do certain things
- Adding Aliases in typescript Project
- Using Context API as a Theme Provider
- Should have read before spending 3 hours trying to configure office fabric
See https://github.com/FriendlyUser/react-corp-page
See the example at https://react-corp-page.now.sh/
Top comments (0)