Hephaestus Creations

• Type of Arts & Crafts: Sculpture and Modeling
• It includes: Clay Sculpture, Stone Sculpture, Metal Sculpture, Food Carving, Natural Material Sculpture, Beaded Sculpture & Wood Engraving.

Project Overview

Where Art Comes to Life

Hephaestus Creations is a dynamic platform where art comes to life, offering users a seamless experience to explore, manage, and interact with various artworks and crafts. The website features customizable themes, a robust art details page, and a personalized user space for managing and showcasing art pieces. It supports effortless navigation, real-time updates, and interactive user engagement, making it an ideal destination for art enthusiasts and creators alike.

Live Site Link

• Firebase Live Site

Notable Features of the Website

• Item Management: Logged-in users can seamlessly add, modify, or remove items from the database, ensuring complete control over their art and crafts.
• Filtering Options: Users can efficiently filter their added items based on customization value, such as "Yes" or "No".
• Persistent Theme Customization: Toggle between Dark and Light themes with settings that persist across sessions, providing a consistent user experience.

Technologies used in this Project

• ReactJS
• Javascript
• TailwindCSS
• Express.js (Server Side)
• MongoDB (Server Side)

Run the Project Locally

1. Clone the Repository:

   git clone https://github.com/nazmul-nhb/hephaestus-creations-client.git
   cd hephaestus-creations-client

2. Install Dependencies:

   npm install

3. Set Up Environment Variables: Create a .env.local file in the root directory and add the necessary environment variables. (Important!)

4. Run the Application:

   npm run dev -- --host

5. Access the Site: Open your browser and go to http://localhost:5173/ or http://192.168.1.12:5173/ from other devices on the same network to view the application.

Utility Packages Used in this Project

Click to Expand

• react-simple-typewriter in item card and art category page
• react-awesome-reveal in different pages
• react-tooltip on Navbar Profile Picture & Logout Button
• aos for Animation On Scroll
• animate.css for Animation Effects on ErrorPage
• react-hook-form for Handling Forms
• swiper for Slider/Swiper on Homepage Banner
• react-helmet-async for Dynamic Page Titles
• react-icons for Showing Icons
• react-toastify for Showing Toasts
• sweetalert2 for Showing Modals in few Pages
• react-fast-marquee for Horizontal Auto-Scroll on Homepage in Reviews Section