All solutions

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

I feel proud for completing this Huge Multi-page website and i feel more motivated to build even more big project soon.

In this Project i worked with the following libraries

• React+Typescript
• TailwindCSS ( responsive design and styling the website)
• react-router
• react-leaflet ( rendering the Map and selecting locations)
• react-hook-form ( tracking state of the form)
• zod (schema base validation for form)
• react-toastify ( send pop-up if form submission is successful )
• react-helmet-async ( change page title dynamically when routing)
• framer-motion ( add smooth animation when routing and toggling sidebar)
• react-icons ( getting free svg icons)

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

Working with react-leaflet, it was my first time working with this library and i did not understand it at first. but eventually i manage to see the direction.

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

In mobile device , the sidebar is not appearing in Location page. i think my the Map has a highest z-index above all element on the page, but i dnt know how to reduce it or find another way to show the sidebar.

Thanks for any feedback.

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

I choose this project to practice working with react-hook-form and i really appreciate the way it handle form in react. In the Project i use this Technologies

• React + Typescript
• TailwindCSS (Styling)
• react-hook-form ( for handling form data)
• zod (for schema base validation)

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

I did not overcome them ,

• couldn't change the radio/checkbox icon or background colors

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

• couldn't change the radio/checkbox icon or background colors

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

completing this project was my proudest moment and next type i will implement more of framer-motion animations. Technologies i used in this project are

• React+Typescript
• TailwindCSS
• react-router
• react-hook-form
• zod
• react-toastify
• framer-motion

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

forms are always headache in react , but i really enjoyed using react-hook-form and it was really good.

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

• Animating route transition with framer-motion (im not really good with this library)
• was struggling with that bg-pattern , i ended up not including it.

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

Finishing this Advanced web-design just inspired me to the next level.

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

Filtering the array was very tricky. i raised the state to HomePage and handle form functionality there and filtering and pass props down to form and GridLayout

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

1-The icons do not load in production mode, i tried shifting the data.json and changing the logo path but i could not resolve it. 2-the modal for mobile , i could not make the darker overlay

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

First time using Zustand library , and i enjoyed using it. i will start using it even more often in future.

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

At first i struggled with adding and removing items to the Cart , but ended up working on it till i got it right.

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

Any help about anything on this app will be more appreciated. Thanks.

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

Proud of Completing this Project, and More Proud because it is my first App built with React and TypeScript. I will change the way i structured the code next time and better naming convention. But afte all i really learn alot more about Typescript and looking forward to building more TypeScript Application in future.

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

Error from TypeScript and Making the components more reusable was one of my challenges but i researched more about typescript and manage to resolve all of them.

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

Build more reusable components and to write clean and Better TypeScript code.

Any Feedback will be appreciated

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

I am proud of finishing this project at within 24hours.

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

My challenges was:

• Hero section , more with the image. -- i use Grid, i gave it grid-row-[50%,50%] and place the image from its starting point and use overflow-hidden to cut off the outer image offset.

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

Need help with

• how can i position the Hero background icon.
• z-index and absolute position don't work the way i want, unless there's a better way of using them that i do not know.

Feedback will be appreciated.

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

I always wanted to build this web page , and i am proud that i finally did. I really loved building it, i learned a lot along the way. On this Project i work with the following

• React
• react-router
• search/query params
• loading skeletons
• tailwindCSS
• darkMode class

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

The challenging parts of this page was the CustomeDropdown , it would have been easier for me to just handle it using state. But i wanted to expand my knowledge and use search/query params , and it gave me tough time but finally did my best where i can. And first time writting the Dark mode using TailwindCSS and it was Very Nice, even though i know its not the best solution out there.

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

Anywhere in the code i will appreciate any Feedback. BUT more on the CustomeDropdown (why ?) - because i need to select the option (e.g Africa) and click any country from there and when i am in its country-detail, i want the Back Link to take me back to African countries NOT all Countries like it does now. I tried passing state to the Link and cache it using useLocation in the countryDetail but it just not working, i dont know why.

Any Feedback will be appriciated

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

Im proud of Finally Finishing this Project and next Time i will try to Manage time when building this Project. This Project took me more time than i expected.

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

Building Button Component was more challenging - I had to build a Button component that either return a link instance or a button instance.

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

I Need Help with the Issue of Horizontal scrolling, i don't know what's going on here. I have been handling this horizontal scrolling good when using CSS or Sass (by using margin: 0 auto, max-width: 1110px, width: 90%) but when it comes to TailwindCSS it just not coming the way i want.

Any Feedback will be Appreciated

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

It was nice and fun building this page, i learned a lot about Tailwind and Animations and React as whole. the button component has 3 variations ( outline, white, red) Any feed back on this app will be appriciated.

Build this page with 1 - Grids ( each section was build with 2 column grid and 4 for footer) 2- Flex (Navbar ) 3- AOS (Animation On Scroll library)

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

I need help on the positioning of the phone, laptop and computer and hero background images, i couldn't position them the way they are in the design.

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

My First app using Tailwind CSS and its so much greater than i thought. I struggled with it but i ended up making it to the end, any Feedback about this app will be appreciated.

Build with

• React -Tailwind CSS

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

1 - I found it challenging to customize the tailwind.config.js 2 - The images on the Features block seems vertically stretched i do not know why

The website gave me tough time, i use different approach in development. Each page route has its own css.module file, first time using this approach. some of the things i could not do found them tough,

• like border-top on active navlinks in top navigation.
• positioning small surface image at the bottom center of the planet image ,
• mobile menu navigation can scroll from behind. and many more

im still new in react-router, any feedback will be appreciated.

tools i used -Grid (grid-template-area) for the hero layout -flex for navbar -NavLink for active navigation Outlet BEM BrowserRouter , Routes, Route

Any Feedback will be appreciated.

It took me longer than i expected, when it comes to those bg-patterns.svg , i could'nt do them properly. any Feedback on this web page will be appriciated . I used React Grids flex-box Art Direction BEM Mobile-first-approach i just started leaning React and i Really like it so far.

I struggled a lot with this website, more especially on the form select dropdown, i could not style it, i dont know how it should be done. I also struggled alot with the timer countdown, but i tried.

I use this tools React react-router joi-browserfor validating the form inputs Grid flex-box react-toastify form poping up success form submission

PLEASE DO SEND ME FEED BACK, IT WILL BE APPRICIATED

Second time building an app using React, i'm still new on this. i use Grid layout, any feedback will be appriciated.

This project was tougher than i thought, i used Javascript to render the profile HTML and plain HTML file to render the nav and form. in first-render DOMContentLoad the fetch get fired to the api with hardcoded value. The Accessibility is not that good. please provide any feedback , it will be appreciated.

any Feedback will be appreciated.

i enjoyed it and learned some few things along the way. i will appreaciate any feedback from this project.

i will appreciate any feed back..

In this project laying out the logo as it is was taught, i couldn't do it. I tried putting outside the Grid and inside the Grid but it was misbehaving, i ended up trying position relative and still did not happen the way i indeed. Any help will be appriciated both on the logo layout and (JS code)

Working with form kinda difficult for me , but i tried. the JS code is not that well organize. Any feedback will be appriciated.