A responsive full-stack web application that allows users to explore, share, and submit historical artifacts. Users can like their favorite artifacts, which are saved in their profile for easy access. The platform supports user authentication and enables seamless artifact sharing.
- React.js (Frontend UI)
- Node.js & Express (Backend API)
- MongoDB (Database)
- Axios (HTTP client)
- Firebase Authentication (User auth and protected routes)
- Tailwind CSS (Styling)
- Stylish landing page with slider/banner, featured artifact cards, and informative sections.
- View all artifacts submitted by users on a dedicated page.
- Authenticated users can add new artifacts with details including name, image, and description.
- User Dashboard accessible via profile icon, showing:
- Artifacts created by the user (My Artifacts)
- Artifacts liked by the user (Liked Artifacts)
- Interactive like system allowing users to like or unlike artifacts; liked artifacts are saved per user.
- Firebase-based authentication with protected routes for adding artifacts, liking items, and accessing the user dashboard.
- react, react-dom
- axios
- firebase
- react-router-dom
- express
- mongoose
- dotenv
- tailwindcss
-
Clone the repository:
git clone https://github.com/Ik-Riyad/historical-artifacts-client.git cd your-repo-name -
Install frontend dependencies:
- cd client
- npm install
- Install backend dependencies:
- cd ../server
- npm install
- Setup environment variables:
-
Create .env files in both client and server directories.
-
Add your MongoDB URI, Stripe keys, Firebase config, and other sensitive data.
- Start backend server:
- npm run dev
- Start frontend app:
- cd ../client
- npm start
- Open in browser:
- Visit http://localhost:3000
- Reach me at: [email protected]