@kadiryildiri
@keinermendoza
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of keeping things simple. It works, and I believe I will be able to understand the code even if I return to it far in the future. React and Tailwind CSS make the code easy to plug in and port to other projects.
@kadiryildiri
Posted
The codes are divided into groups according to their content. The readability of the code is good. Responsive design applied
@iamernesto14
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of successfully deploying my TailwindCSS project to Netlify, achieving a smooth user experience with fast load times and responsive design. Integrating TailwindCSS, configuring the build process, and effectively using Git and GitHub for version control and continuous deployment were significant accomplishments. These steps ensured the project was always up-to-date and that any changes were automatically deployed.
Next time, I would implement more comprehensive testing for different devices and screen sizes to ensure consistent responsiveness. I would also focus on improving documentation, error handling, and performance optimization, such as lazy loading images and reducing bundle sizes. Additionally, setting up advanced CI/CD pipelines and establishing a user feedback loop would help in making iterative improvements and ensuring a smoother user experience.
@kadiryildiri
Posted
good
@keinermendoza
Submitted
What are you most proud of, and what would you do differently next time?
I feel happy with the learning process; in a way, following the learning path has helped me a lot.
@kadiryildiri
Posted
Very well-written, well-organized and readable code. The design is close to the original. It is responsive and has a good mobile appearance.
@kadiryildiri
Posted
Responsive design for small, medium and large screens. The design looks nice
Marked as helpful
@Saekit
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of using the picture and source tags to make the image responsive and change based on the size of the screen. I have never used those tags before, so it was cool learning about and using them. I normally would have used React state to control which image shows, but I wanted to try something different and am happy with the outcome.
What challenges did you encounter, and how did you overcome them?
I am still learning how to use styled-components, so before this I did not know how to create default styles and global styles. I was able to learn how to create them by reviewing another user's code and implementing their technique in my own code. I made sure to take my time and try to understand each part, so I will be able to fully understand in future projects.
@kadiryildiri
Posted
good
@Saekit
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of my continued use of styled components. I felt like I could have made the code better by making the component reusable (i.e. passing data as props so the component could be used with other recipes) and would do that differently next time.
What specific areas of your project would you like help with?
I'm still not sure if I should be using styled-components for all of my components. I think it looks cleaner on the component page side, but feels strange having some styled-components without styles. I would like advice from a more experienced styled-component user.
@kadiryildiri
Posted
good
@SheGeeks
Submitted
What are you most proud of, and what would you do differently next time?
I successfully "converted" this challenge from HTML, CSS and a little JavaScript into a React app built with Next.js and Tailwind CSS. I'm most proud of adding a light theme to complement the default dark styling of this challenge and a toggle to move between both themes. Using animated icons for the theme toggle was another favorite addition.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was getting the animated toggle icons for each theme to restart their animation when clicked and without causing errors. The solution was to create a dynamic URL for the icons, which would force the animation to restart when toggling. However, common methods for creating a dynamic URL, like using the date and time, caused discrepancies between server and client file names and would throw an error.
So, I'm using a count variable equal to 0 and increasing it by 1 when the toggle button is clicked. This allows me to create dynamic URLs for each theme's toggle icon and ensure the filenames match across client and server.
let count = 0;
export default function Toggle() {
const imgLight = "/images/sun-to-moon-loop.svg?" + count;
const imgDark = "/images/moon-to-sun-loop.svg?" + count;
const [dark, setDark] = useState(false);
const toggleTheme = () => {
setDark(!dark);
document.documentElement.classList.toggle("dark");
count++;
};
@kadiryildiri
Posted
A different web page was made from the solution. But it is much more beautiful in design.
@SultanFarrel
Submitted
@kadiryildiri
Posted
generally good
@reyes630
Submitted
@kadiryildiri
Posted
Good
