All solutions

This is my solution as a multi-page application using the new App Router in NextJS along with framer motion's page Transition helper components, I enjoyed this challenge a lot, learnt a bunch of new stuff and it also gave me the opportunity to contribute my 2 cents on an open issue regarding the library (framer-motion and nextJS) on github as well.

This turned out to be quite an easy challenge, it was the first time I took a mobile first approach, and I have to say that this approach seems a lot simpler even if its a little more time consuming than the desktop first approach.

This is my first attempt at SSR website. I enjoyed adding the custom config required to use the mui themeProvider and the injection of FAQ data as props, via a json file on the server itself.

More details of the same here

I am pretty new towards usage of nextjs in projects, and would like to know some of the best practices, if any, towards building next based websites.

This was an interesting challenge, as the UI promoted component reusability. Where React shines the best. It also allowed me to use display:grid. which proved very useful for the 2D layout of the cards.

I would like to know which shorthands or properties I might have missed out on while using the grid layout this is the permalink at which I could use some help

Please do help out on any specific Grid related CSS practices I might be missing out on

This proved to be a very fun and resourceful challenge. I enjoyed solving the same 😄

This is my first shot at CSS grid Layout in a challenge, It seems fun and requires a lot less setup to make it work.

There are some questions for the community I have:

• I would like to know if the grid setup can be reduced for the same?
• Are there any shorthands I missed out on while trying to configure the grid?
• Can I set up the MUI theme in a way where I reduce the amount of styles I've written

I enjoyed completing this challenge, hope to use CSS grid more often

This was a fun challenge with multiple different mini layouts. Using a component framework (MUI) cut short the development time by a lot.

I would like to know if there are any React Specific or CSS in JS, best practices I should follow, that I might be missing out on. Thank you.

This was a very straightforward challenge, with a lot of minor CSS stylings applied to it. I enjoyed working on this challenge.

I do have a few questions for the community

• what parts of my codebase can be improved upon?
• how to reduce the amount of styles specified in the theme file?

Hi everyone! I've implemented this challenge using Flexbox, Is it viable to use Grid for the same?

What parts of my styling can be improved upon?

This was a quick test for me to see how fast I could deploy a simple project

Do point out my shortcomings for the same

I have used

• MUI ThemeProvider for CSS styling and theming
• MUI elements for the basic layout
• CSSinJS for accessing elements using selectors

I learnt a lot about the mui framework for react, module augmentation and custom module declaration files, in typescript. Using the themeProvider to abstract out the styling logic from the code logic helped a lot. Also, the input component itself is modular and base props such as

• validation function
• placeholder
• helperText
• inputType need to be provided, which make it easier to modify for different use-cases, while also providing client side validation for the form input

I am looking forward to getting feedback on

• how to make a UI framework SEO friendly
• reduce the bundling size
• increase styling code reuse, in CSSinJS

How to make it SEO friendly?

how to make font modular for mobile devices? I have used the rem system for fonts, but it seems not to scale according to mobile devices

Is the structure followed, for the directories, ok?