import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],
  },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload.id);
    },
    clearCart: (state) => {
      state.items = [];
    },
  },
});

export const { addItem, removeItem, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupForm = () => {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={Yup.object({
        email: Yup.string().email('Invalid email address').required('Required'),
        password: Yup.string().min(6, 'Must be 6 characters or more').required('Required'),
      })}
      onSubmit={(values) => {
        // Handle form submission
      }}
    >
      <Form>
        <Field name="email" type="email" />
        <ErrorMessage name="email" component="div" />
        <Field name="password" type="password" />
        <ErrorMessage name="password" component="div" />
        <button type="submit">Sign Up</button>
      </Form>
    </Formik>
  );
};

import { motion } from 'framer-motion';

const Notification = ({ message }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
    >
      {message}
    </motion.div>
  );
};

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios

## Lessons from the Trenches

Certainly! Here’s a breakdown based on the project history and README for the shoe e-commerce website:

### 1. Key Technical Lessons Learned
- **State Management with Redux Toolkit**: Implementing Redux Toolkit simplified state management significantly. The use of slices and the createAsyncThunk function made handling asynchronous actions (like fetching products) more straightforward and maintainable.
- **Form Handling with Formik and Yup**: Using Formik for form management and Yup for validation streamlined the process of handling user inputs, especially for sign-up and sign-in forms. This combination reduced boilerplate code and improved user experience with real-time validation feedback.
- **Responsive Design with Ant Design**: Leveraging Ant Design's components helped in creating a responsive and visually appealing UI quickly. Understanding how to customize themes and styles within Ant Design was crucial for maintaining brand consistency.
- **Animation with Framer Motion**: Integrating Framer Motion for animations enhanced the user experience. Learning how to implement animations effectively without compromising performance was a valuable lesson.
- **Optimizing Performance with React.memo and useMemo**: As the application grew, optimizing performance became essential. Using React.memo and useMemo helped prevent unnecessary re-renders and improved the overall responsiveness of the app.

### 2. What Worked Well
- **User Authentication Flow**: The sign-in and sign-up process was seamless, thanks to the integration of Formik and Yup for form handling and validation. This led to a positive user experience.
- **Product Search and Filtering**: Implementing search and filter functionalities using Axios for API calls allowed users to find products quickly. The performance of these features was satisfactory, even with a large dataset.
- **Cart Management**: The ability to add, remove, and update products in the cart was intuitive and worked well. The use of Redux for managing cart state ensured that the cart was always in sync with the UI.
- **Visual Appeal**: The use of Swiper for product carousels and React Three Fiber for 3D product views added a modern touch to the website, making it visually engaging.

### 3. What You'd Do Differently
- **Testing**: While the application was functional, implementing more comprehensive testing (unit tests and integration tests) using tools like Jest and React Testing Library would have improved reliability and made it easier to catch bugs early.
- **Code Splitting**: Although the app performed well, implementing code splitting with React.lazy and Suspense could have further optimized loading times, especially for larger components and routes.
- **Accessibility**: Focusing more on accessibility from the start would have been beneficial. Ensuring that all components are keyboard navigable and screen reader friendly is crucial for inclusivity.
- **Documentation**: While the README provided a good overview, more detailed documentation on the codebase and setup instructions would help future developers onboard more quickly.

### 4. Advice for Others
- **Start with a Clear Plan**: Before diving into coding, outline the project structure, features, and technologies you plan to use. This will save time and help avoid scope creep.
- **Leverage Existing Libraries**: Don’t reinvent the wheel. Use established libraries and frameworks to handle common functionalities (like form handling, state management, and routing) to speed up development.
- **Focus on User Experience**: Prioritize user experience in your design and functionality. Regularly test your application with real users to gather feedback and make improvements.
- **Iterate and Refine**: Be open to iterating on your design and features based on user feedback. Continuous improvement is key to a successful product.
- **Stay Updated**: The tech landscape is always changing. Keep learning about new tools and best practices to improve your development skills and the quality of your projects.

By reflecting on these aspects, you can gain valuable insights that will help in future projects and enhance your development practices.

## What's Next?

## Conclusion

As we wrap up this phase of our 3D Shoes Shop project, we are excited to share our current status and future development plans. The shoe e-commerce website has successfully established a solid foundation, offering users a diverse and convenient shopping experience for various styles of footwear. With features such as user authentication, cart management, product search and filtering, and a visually appealing interface powered by cutting-edge technologies like React, Redux Toolkit, and Framer Motion, we are proud of the progress we've made.

Looking ahead, our development plans are ambitious. We aim to enhance the user experience further by integrating advanced features such as personalized recommendations, augmented reality (AR) for virtual try-ons, and improved payment options. Additionally, we are exploring partnerships with local shoe brands to expand our product offerings and provide users with unique styles that reflect their individuality. Our goal is to create a vibrant online community where shoe enthusiasts can connect, share, and discover the latest trends.

We invite contributors to join us on this exciting journey! Whether you are a developer, designer, or simply passionate about footwear, your skills and ideas can help shape the future of the 3D Shoes Shop. Together, we can innovate and elevate the online shopping experience for our users. If you're interested in contributing, please reach out to us through our GitHub repository or social media channels.

In closing, this side project has been a remarkable journey of creativity, collaboration, and learning. We have faced challenges, celebrated milestones, and built a platform that we believe will resonate with shoe lovers everywhere. As we continue to grow and evolve, we are grateful for the support of our community and excited for what lies ahead. Thank you for being a part of the 3D Shoes Shop adventure!
## Project Development Analytics
### timeline gant

![Commit timelinegant](https://daily.borninsea.com/assets/3d-shoes-shop-timeline_chart.png)


### Commit Activity Heatmap
This heatmap shows the distribution of commits over the past year:

![Commit Heatmap]()

### Contributor Network
This network diagram shows how different contributors interact:

![Contributor Network](https://daily.borninsea.com/assets/3d-shoes-shop-contribution_network.png)

### Commit Activity Patterns
This chart shows when commits typically happen:

![Commit Activity](https://daily.borninsea.com/assets/3d-shoes-shop-commit_activity.png)

### Code Frequency
This chart shows the frequency of code changes over time:

![Code Frequency](https://daily.borninsea.com/assets/3d-shoes-shop-code_frequency.png)



* Repository URL: [https://github.com/wanghaisheng/3d-shoes-shop](https://github.com/wanghaisheng/3d-shoes-shop)
* Stars: **0**
* Forks: **0**