ArtCraft is a modern and user-friendly web application designed to showcase art and craft events with detailed information. Users can explore events, view details, and register for them seamlessly.
This project is designed to provide a smooth and interactive user interface with features that enhance user engagement and optimize performance. It is powered by React and Firebase, styled with TailwindCSS and DaisyUI, and navigated seamlessly with React Router.
- Browse and explore various art and craft events.
- View event details including date, location, and description.
- Google authentication for quick sign-in.
- Secure password reset functionality.
- Responsive design for all devices.
- Toast notifications for better user experience.
- Interactive SwiperJS carousels for featured events.
- React.js - JavaScript library for building user interfaces.
- Tailwind CSS - Utility-first CSS framework for rapid UI development.
- DaisyUI - Tailwind CSS component library for styled UI components.
- React Router - Declarative routing for React applications.
- Firebase - Backend as a service for authentication and database.
- React Helmet - Manage document head for better SEO.
- Toast Alert - User-friendly alert notifications.
- SwiperJS - Modern touch slider with awesome transitions.
Follow these steps to set up the project locally:
-
Clone the repository:
git clone <repository_url> cd b11a11-client-site
-
Install dependencies:
npm install
-
Environment Variables: Create a
.env
file in the root of theb11a11-client-site
directory and add your Firebase configuration (if applicable) and any other client-side environment variables.# Example .env content (replace with your actual Firebase config) VITE_API_KEY=your_firebase_api_key VITE_AUTH_DOMAIN=your_firebase_auth_domain VITE_PROJECT_ID=your_firebase_project_id VITE_STORAGE_BUCKET=your_firebase_storage_bucket VITE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id VITE_APP_ID=your_firebase_app_id
To start the development server:
npm run dev
Create a .env
file in the root directory and include the following:
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id