Nike Shoe Showcase

Inspiration

The idea for the Nike Shoe Showcase project was born out of a passion for innovative web development and a love for sneakers. Nike, as a brand, stands at the intersection of cutting-edge technology and fashion. The goal was to create an engaging and interactive platform that showcases the unique features and styles of Nike shoes, offering users a seamless and visually appealing experience.

How we built it

Planning and Design: Wireframing: Created wireframes to outline the structure and layout of the site. Design Tools: Used design tools like Figma to create mockups and visual elements. Development: Setup: Initialized the project using Create React App and integrated Next.js for server-side rendering and static site generation. Components: Built reusable components such as cards, carousels, and navigation menus. Styling: Applied CSS and styled-components for responsive and dynamic styling. Data Handling: Implemented data fetching using APIs to dynamically display the latest Nike shoe collections. Testing and Deployment: Testing: Conducted thorough testing to ensure functionality and cross-browser compatibility. Deployment: Deployed the project using Vercel for easy and efficient hosting.

Challenges we ran into

Responsive Design: Ensuring the site looked great on all devices was a challenging yet rewarding experience. It required careful planning and testing across various screen sizes. Performance Issues: Managing the performance, especially with high-quality images and dynamic content, posed a challenge. I learned to optimize images and use lazy loading to improve load times. Accessibility: Integrating accessibility features such as alt text for images and keyboard navigation was a learning curve, but it significantly improved the usability of the site. **Debugging: **Encountered several bugs during development, especially related to state management and asynchronous data fetching. These challenges helped improve my debugging skills and taught me the importance of thorough testing.

What we learned

Throughout the development of this project, I gained a deeper understanding of several key areas:

Front-End Development: **Enhanced my skills in React and Next.js, focusing on creating responsive and dynamic user interfaces. **Accessibility: Learned the importance of accessibility in web design, ensuring that the site is usable by everyone, including those with disabilities. Performance Optimization: Gained experience in optimizing the performance of web applications, including efficient handling of images and other media. Version Control: Improved my workflow with Git and GitHub, managing branches, commits, and collaborating effectively.

Built With

• gsap
• nextjs
• three.js