All solutions

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

I liked to update my Vue knowledge. I'd like to improve its architecture (files and folders organization).

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

Some difficulties in getting Pinia state updates after initial component mouting.

I read Vue and Pinia's documentation.

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

Files and folders architecture. Vue 3 best practices.

I think the main issues here were form validation, which I made with Felte and Zod, with validator.js help for credit card numbers. It was my first time working with Svelte, so any tips about this JS framework I'm all ears.

If you have any tips to improve performance, I'm all ears!

For me, it was a challenge to work with a database and authentication. But Next-auth made authentication easy. Just to set up a way to send email was hard. I chose Supabase to store user accounts because Firebase didn't help me. I found some difficulties so Supabase was easier to work with.

Framer Motion always helps me make things smooth.

I make some visual changes because I used this challenge to make my own website. A different accent colour, animations, transitions and a new style for my name on the header and footer. I really liked the result. It was my first time using PandaCSS. Any advice for better practices?

I think the most challenging part of this project was aligning the 3 columns section with the previous 2-column section, so their columns stayed horizontally aligned. I used display: grid for this but the subgrid feature is only working on Firefox so far. I have to deal with this challenge another way, using grid-column.

For the REST API, I'm using Strapi, which is a Headless CMS. Yeah, it's back-end stuff. This way it's easier to change the data I'm consuming on Front-end.

I started this challenge with Next.js. But I got some issues with localStorage because of its SSR. So I moved to Vite + React.

Most of my difficulties were with Typescript stuff and Context API. I had to take look online to better understand them and finish this challenge.

I plan to use Frame Motion for page transitions.

The only pages it has are Home, Destination, Crew and Technology. Each "sub page" I did inside its parent with a Tab or Slider component. Should be like this or they supposed to be pages as well?

I know the styling architecture could better. Any ideas? I was thinking something like Atomic Design, Atomic 2.0

I wonder what's the best practices writing component styles with styled-components. Is it always selecting tags inside the component or classes? Or is creating subcomponents inside a major component?