Craftopia is an online hub for art and craft enthusiasts, offering a diverse range of handmade creations to explore and discover. From paintings to sculptures, users can connect with talented artisans, find inspiration for their own projects, and join a vibrant community of like-minded individuals. Craftopia is where creativity thrives
-
Firebase Authentication Integration:
- Secure user signup, login, and logout functionality using Firebase Authentication.
- Custom user profiles for personalized experience.
-
Private Routes and Authorization:
- Restrict access to specific pages or features to authenticated users through private routes.
- Ensure data security and privacy.
-
Art & Craft Listings:
- Display a wide range of art and craft items for users to explore.
- Various categories and subcategories showcased.
-
Detailed Product Information:
- Comprehensive details provided for each art and craft item.
- Includes images, item names, descriptions, prices, ratings, and stock status.
react-router-dom: For routing within the React application.react-awesome-reveal: For adding reveal animations to elements.react-hook-form: For building forms with easy validation in React.react-toastify: For displaying toast notifications in response to user actions.react-icons: For adding icons to the user interface.firebase: For integrating Firebase services such as authentication and database storage.
-
Art & Craft Categories Section:
- Display at least 6 art & craft subcategories with images and information.
- Subcategories match with the art & craft data "subcategory_Name".
-
Subcategory Page:
- User can click on a subcategory card to view all arts and crafts of that specific subcategory.
- Each art & craft item card includes image, item name, subcategory name, short description, price, rating, and a "View Details" button.
-
Dark/Light Theme Toggle:
- Implement a toggle switch to switch between dark and light themes on the home page.
-
Additional Packages:
react-awesome-reveal: Implement reveal animations for elements on the home page.react-tooltip: Add tooltips to provide additional information for elements on the home page.