Tiendanimal is a full-featured application designed to streamline the management of pet-related tasks and information. With a user-friendly interface and intuitive navigation, the application is divided into several key sections to address the specific needs of pet owners:
-
My Data (Mis datos): A personal section where users can manage their contact information, ensuring seamless communication and personalized service.
-
My Tasks (Tareas): This module empowers users to keep track of their pet-related tasks, such as feeding schedules, veterinary appointments, and grooming sessions, with the ability to add, modify, and delete tasks as needed.
-
My Returns (Devoluciones): A dedicated space for managing product returns, this feature simplifies the process of tracking and requesting returns, providing a hassle-free shopping experience.
-
My Communications (Comunicaciones): An integrated messaging system that keeps users informed about important updates, offers, and news related to their pets and the pet shop's services.
-
My Pets (Mis Mejores Amigos): A beloved feature where users can add and manage profiles for each of their pets, including photos, medical records, and other essential details.
- Clone the repository: git clone https://github.com/Alekususenpai/iskay-pet-tiendanimal.git.
- Install dependencies: npm install.
- Start the development server: npm run dev.
- Frontend: React, Redux Toolkit, React Router, Formik, Yup
- Styling: Tailwind CSS
- Tooling: Vite, TypeScript, ESLint
The application follows a modular architecture with components organized by feature. State management is handled with Redux Toolkit, and forms are built using Formik with Yup for validation. Routing is managed with React Router. The project is set up with Vite for fast builds and hot-reloading during development, and TypeScript for type safety.
The folder structure for the project is organized for modularity and ease of navigation:
- assets: Contains static files like images and icons.
- components: Includes UI components, further categorized by feature for better encapsulation.
- pages: Stores page components that represent different routes.
- store: Holds the Redux store configuration and slices, encapsulating state management.
- styles: Contains global styles and configurations for the application.
- types: Type definitions for TypeScript, ensuring type safety across the app.
- App.tsx: The root component that ties together different parts of the app.
- main.tsx: The entry point for the application where the root component is rendered.