Historic Gems

The Historic Gems is a web application designed to document, explore, and celebrate humanity's most significant historical treasures. This platform provides users with a comprehensive database of artifacts, featuring detailed information such as images, names, types, historical contexts, discovery details, and current locations.

The application allows users to browse artifacts, view detailed descriptions, and contribute by adding their own entries. With interactive features like a liking system and contribution management, users can engage with the artifacts and track their favorites. The platform also fosters a collaborative community of history enthusiasts, enabling the preservation and sharing of knowledge about cultural heritage.

Built with a user-friendly interface, the project ensures accessibility across devices and aims to make history engaging, educational, and interactive for a global audience. This initiative combines technology and history to create a lasting digital repository of humanity's artifacts.

Key Features

• Artifact Browsing:
  • Users can explore a rich database of historical artifacts categorized by type, era, and location.
• Detailed Artifact Information:
  • Each artifact entry includes an image, name, type, historical context, creation date, discovery date, discovered by, and current location.
• User Contributions:
  • Registered users can add their own entries by providing artifact details, fostering a growing and diverse collection.
• Liking System:
  • Users can like artifacts, enabling the platform to showcase popular items and allowing users to track their favorites.
• Contribution Management:
  • Users can view, edit, or delete their own submitted artifacts, maintaining control over their contributions.
• User-Friendly Interface:
  • Designed with an intuitive layout and responsive design to ensure smooth navigation on all devices.

Purpose of the Website

• Educate and Enlighten:
  • Spark curiosity and expand knowledge by offering rich, detailed information about artifacts that shaped human history.
• Celebrate Heritage:
  • Highlight the cultural significance of historical items, fostering a sense of connection to our shared global heritage.
• Empower Participation:
  • Invite users to contribute their own discoveries, helping to build a collaborative and ever-growing archive of artifacts.
• Encourage Exploration:
  • Make history accessible and engaging through an intuitive interface that lets users browse, discover, and interact with artifacts.
• Preserve the Past:
  • Create a lasting digital record of artifacts, ensuring their stories endure for future generations to appreciate and learn from.

NPM Packages Used

• Tanstack Query
• Tanstack Devtools
• Axios
• React Count Up
• React Dom
• React Helmet Async
• React Hook Form
• React Hot Toast
• React Icons
• Sweet Alert 2
• Swiper JS
• React Router DOM

Technology Stack

• Frontend: React, Tailwind CSS, Daisy UI.
• Backend: Node.js, Express.js.
• Database: MongoDB.
• Authentication: Firebase.
• APIs: RESTful APIs for data retrieval and management.

Dependencies

• @tanstack/react-query: ^5.62.8
• @tanstack/react-query-devtools: ^5.62.8
• axios: ^1.7.9
• firebase: ^11.1.0
• prop-types: ^15.8.1
• react: ^18.3.1
• react-countup: ^6.5.3
• react-dom: ^18.3.1
• react-helmet-async: ^2.0.5
• react-hook-form: ^7.54.2
• react-hot-toast: ^2.4.1
• react-icons: ^5.4.0
• react-rating-stars-component: ^2.2.0
• react-router-dom: ^6.28.1
• sweetalert2: ^11.15.3
• swiper: ^11.1.15

Installation

• Run npm install to install project Dependencies

How to Run

1. Clone the repository

git clone https://github.com/MdAfsarHossain/Historic-Gems-Client.git
cd historic-gems-client

2. Install dependencies using

npm install

3. Setup Environment Variables

• Create .env.local in the root directory.
• Add VITE_API_URL variable and put your server url here.
• Create a firebase project and add config here firebase config will look like

VITE_apiKey
VITE_authDomain
VITE_projectId
VITE_storageBucket
VITE_messagingSenderId
VITE_appId

4. Run the website to locally

npm run dev

5. Open the website in your local browser http://localhost:5173

Deployment

• Hosted on Netlify or Vercel for a fast and reliable experience.
• Firebase Authentication requires authorized domains to ensure secure access.

Contributions

• Contributions are welcome! Fork this repository, make your changes, and submit a pull request.

Live Link

Server Site Code Link