All solutions

Not a great solution

Shunting yard algorithms implemented, not sure I implemented this correctly.

Angular solution. Note pretty sure the hero image left and right works but the screenshot isn't capturing this. I wouldn't recommend ghpages for angular solutions.

If the images don't work, it would be helpful to tell me what browser and resolution. On firefox, all resolutions work for me. Safari, and chrome on my phone works. I'm not sure if its how frontend mentors parses website. I tried added this to netlify and still the screenshot doesn't work correctly.

Grabs data from the api, and the button should work in some cases. Refreshing generates new data from the api and the first click does. Nextjs and the API cache data, therefore upon the app router refresh will just hold onto the current data.

Also note, the container will flex in height but should keep the width.

Originally, I was going to write this where Spring Boot served some of the components' content, and the form would be validated by Spring Boot. However, I abandoned this idea because Heroku isn't free and requires a credit card, which I don't feel comfortable with. However, Next.js 13's latest experimental feature, 'server actions,' makes writing forms much easier if anyone wants to look into it (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions). I tried to write decent regex, which most likely failed in some sense. I'm pretty sure there is a tricky bug between my state updates and regex checking that will trigger the redirect to a simple success page. Also worth checking the type definition of action attribute.

Attempted to write this for more reusable components. Also, any resources on understanding background images would be great. The info component could of been flex container that was centered but I wanted it to be absolute for practice. Its somewhat responsive when squished past the overall cards dimensions. It is a bit pushed over to the left more than I would like.

Resources on how to use tailwindcss so it is more readable. I had it such that using clsx, or a merge function using tailwind merge such that

<Component className={merge("h-[14rem] ... etc", "w-[35rem ... etc")} /> Where I would break the tailwindcss string at 80 line width. However, I find it at some point gets very confusing to read later after setting other components. Personally, I would like to use styled components but with react 18.2 / nextjs13 beta there isn't optimal support for it. I did some reading on tailwind macro but didn't look into it much for I feel it would run into the same problem that all css-in-js libraries would have. If someone knows of a styled like component way of writing css/scss into react components that would work with server components in the future, I would like to know about that. I know nextjs13 you can flush the css into the page, but I still don't understand the implications of that.

A lot of ideas were expressed in the code. Somewhat created a tailwindcss like utility in scss. Only problem was that I didn’t know how to express some-utility:desktop like media queries so this was abandoned. Also had a simple script that scaled the ui. Using font size of 10px on the body and writing everything in rem, you can use slope formula to scale your ui linearly. Could also use multiple regression in a similar way.

Any feedback on how to design this better. The image switching out to absolute positioning made this harder than it should be. The margins and padding are off I’m sure. This isn’t a perfect solution as this project made me quite frustrated. Didn’t feel like this was ‘newbie’.

Used nextjs 13 beta version, was going to use api locally but gh-page doesn't work. Maybe will extend the solution with a simple server or host the data.json somewhere. Solution isn't perfect.