What are you most proud of, and what would you do differently next time?
Completing the project. Learning to organise project more efficiently. Ensuring project looks good on all screen sizes. Writing more clean code, but there is still alot of room for improvement.
What challenges did you encounter, and how did you overcome them?
In this project i used vanilla js instead of typescript. While building the project became faster i could not help but think about where issues might occur when using typescript. I am still unsure whether to use typescript in the future projects.
What are you most proud of, and what would you do differently next time?
Completing this challenge, upgrading app from nextjs 14 to nextjs 15. Reworking app to resolve dependency issues arising from upgrade.
What challenges did you encounter, and how did you overcome them?
Using typescript. I spend more time fixing typescript issues than coding. Im not sure if i will be using typescript in future projects.
Upgrading to nextjs 15/ react 19 to use useActionState . I wanted to use pending from useActionState. To this i had to upgrade app from nextjs/react. This presented a couple of dependency issues which is solved by rewriting code to not use these dependencies. Ex. i was using next-themes to control light/dark theme. And initially wa using headless ui for some ui elements.
What are you most proud of, and what would you do differently next time?
Completing the challenge as close as possible to design. Overcoming issues i faced during this project. Learning new things like context and useRouter.
What challenges did you encounter, and how did you overcome them?
I needed to be able to control slideshow from different components. For this instead of using state and prop drill, i decided to use Context instead.
I needed to redirect user to relevant pages and have this reflected in url. For this i used useRouter.
I needed to figure out how to create a masonry layout for landing page. For this i used tailwinds: columns-4 utility class, however this created an issue where the masonry layout does not end with a straight line. This can be avoided by splitting the image items in to 4 grid columns with grid. However this solution did not suit me as it would mean i would have to create each column in the code and adding x amount of images to them. I prefer creating an array of gallery items with map.
What specific areas of your project would you like help with?
I was unable to figure out how to make the landing page gallery end with a straight line like on the design. I could create manually 4 grid columns and then create 4 image grid containers within, however this does not fit with my implementation of creating an array of components from data.
What are you most proud of, and what would you do differently next time?
Completing the project as close to possible to design, solving issues that i encountered.
What challenges did you encounter, and how did you overcome them?
Applying dynamic colors with tailwind. Due to the way tailwind works it does not recognise class names created dynamically ie bg-%{color}. I solved this by creating object with 'planet name' : ['style1', 'style2]. then i would check if this object contains planetName and apply styles from the object.
Creating multipage website. This has website has 8 pages using html starter files, rather than creating 8 separate routes for website i desided to use nextjs dynamic routes to create pages. To do that i had to create planetData.json file with all relevant planet data. Dynamic routes checks if there is a planet and then returns planet. As there is no homepage i used next navigation redirect to 'earth' in main page.
What specific areas of your project would you like help with?
I was unable to come up with a way to to hide structure from internal structure and surface from geology section based on viewed device.
What are you most proud of, and what would you do differently next time?
Completing this project while using NextJS. Creating a theme switch using useTheme. Using server actions to fetch data from github based on user input which passed to server action using useFormState.
What challenges did you encounter, and how did you overcome them?
Creating a theme switch was challenging, however after reading a couple of tutorials i utilisd useTheme from next-themes package. This allowed me to set theme based on users preferred system theme and remember theme choice.
What are you most proud of, and what would you do differently next time?
Completing email validation using server actions and using zod for email validation.
What challenges did you encounter, and how did you overcome them?
Main challenge was learning how to use server actions to complete form validation on server. But this was relatively easy after doing some reading on nextjs doc page
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
As part of this simple and yet not so simple project i have learned alot about layout, positioning and units of measure. This was a simple but yet very challenging exercise and i had to rewrite my layouts quite a bit.
What challenges did you encounter, and how did you overcome them?
Adding background patterns based on the size of the device, due to using next js i had to write a background pattern component which would return background pattern based on the width of the screen.
What are you most proud of, and what would you do differently next time?
Completing project using nextjs and tailwind, i have started to use grid system and as part of this project have learned a lot about layout and using combination of flex and grid systems. On the next project i will focus on practicing these more.
What challenges did you encounter, and how did you overcome them?
I have struggled with layout on this project and have reworked it couple of times from using flex, to using grid and then using combination of both. While not perfect i have learned to not constrain myself to using either flex or grid and use combination of both if needed.
What specific areas of your project would you like help with?
I am still learning responsive layout and struggling to make the website fully responsive. Any help would be welcome.
What are you most proud of, and what would you do differently next time?
Completing my first two page project. Moving away from using flex and using grid instead. Adding leafletjs to project and trying out framer motion for some simple animations.
What challenges did you encounter, and how did you overcome them?
The biggest issue is keeping page title in the same position, while page is resized the grid resizes with it moving the title. Have not been able to fix this issue fully, only able to utilise media queries to move the position for different screen sizes.
Default grid setting were not sufficient for placing the elements where needed, i have extended tailwind config to use 24 rows and 24 columns instead.
What specific areas of your project would you like help with?
Keeping page title in place when viewed in desktop as the page title moves when page is resized.
What are you most proud of, and what would you do differently next time?
Adding image carousel and completing this challenge as quick as i could.
What challenges did you encounter, and how did you overcome them?
At first i wanted to create image carousel from scratch, but realising that react/next js are component based and most likely there would be a component available that has been created for this purpose i have decided to find an image carousel component. After searching i found Embla carousel which is an awesome carousel which is library agnostic and quite easy to set up. After reading documentation and playing around with generator availble i have managed to set up cool image carousel for this project.
What specific areas of your project would you like help with?
While image carousel seems to be working fine, there seems to be a 'jump' when website is first loaded. Carousel loads with image at index 1 and then 'jumps' to show this image in the middle. While not a big deal this has drove me crazy for the past couple of hours.
What are you most proud of, and what would you do differently next time?
Getting project to look as close to provided designs. Completing project in a short time and fixing overflow issues i have encountered.
What challenges did you encounter, and how did you overcome them?
I had loads of overflow issues due to absolutely positioned navbar, this took a big chunk of time to fix, however nothing a good night sleep can't fix. The overflow issues was happening due to using too many w-screen.
What are you most proud of, and what would you do differently next time?
Getting a hang of tailwind, learned to not do everything at the same time when it comes to building the layout (ex. do sizing first, then fonts etc rather than doing everything on one element ). This is my first project that actually looks like a website.
What challenges did you encounter, and how did you overcome them?
While creating the project i was focusing on doing one element at the time, setting sizing colours font sizes etc. This resulted in messy classes as every element i would add classes in different order. I decided to start from scratch and started with setting sizing to elements first, then moved on to colours and at the end i would position the elements. While still not perfect i am making progress.
What specific areas of your project would you like help with?
I could not make that perfect round bottom border to for sections. I am using border to achieve that but from my understanding it's better to utilise svg for this?
What are you most proud of, and what would you do differently next time?
This project has been great at breaking my tutorial hell spiral. While spending alot of time on reading tutorials and documentation for nextjs, tailwindcss and typescript i found building this project has taught me more in a short time than going through tutorials.
What challenges did you encounter, and how did you overcome them?
While being familiar with HTML/CSS/JS i decided to start this project with NextJS and Tailwind. This has proven challenging due to me always thinking using just html/css/js would have been much easier and less code intensive. By following through with my choice of tech i've learned more in the past couple days about these tools than i have learned in the past 3 or 4 weeks of tutorials etc.
What specific areas of your project would you like help with?
Am i really using typescript? NextJS have been initted with typescript, however there has not been any errors. So i am unsure whether i am doing something wrong, all the tutorials seem to have alot of typescript code and type declarations with strange syntax which more often than not confused me and made me not want to use it.
While being somewhat familiar with react and react components i am not sure if i am utilising this correctly and perhaps i could make less components or more?
Every job description lists Tailwind as requirement. Being new to tailwind i am preatty sure i have used way more classes to achieve the desired result. How do you approach using tailwind? Someone being new i kinda got lost at some point and feel i did too many classes.
