https://github.com/haksham/artifex

Web portfolio of an artist
https://github.com/haksham/artifex

cloudinary-api firebase-auth html-css-javascript mongodb-atlas nextjs react-icons-component reactjs

Last synced: 3 months ago
JSON representation

Web portfolio of an artist

• Host: GitHub
• URL: https://github.com/haksham/artifex
• Owner: Haksham
• License: mit
• Created: 2025-03-21T18:10:19.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-04-06T08:47:12.000Z (over 1 year ago)
• Last Synced: 2025-04-06T09:27:00.555Z (over 1 year ago)
• Topics: cloudinary-api, firebase-auth, html-css-javascript, mongodb-atlas, nextjs, react-icons-component, reactjs
• Language: JavaScript
• Homepage: https://artifexp.vercel.app
• Size: 6.42 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Artifex Website 🎨

Welcome to **Artifex**, a platform showcasing the stunning artwork of **Paarth Mehta**, a professional painter. This website allows users to explore a gallery of paintings, manage images, and learn more about the artist.

---

## 🌟 Features

- **Dynamic Gallery**: View a collection of paintings with a clean and responsive design.

- **Image Management**: Add, delete, and manage images (admin functionality).

- **Authentication**: Secure login system using Firebase.

- **Visitor Counter**: Tracks the number of visitors to the website.

- **Cloudinary Integration**: Efficient image storage and retrieval.

- **Responsive Design**: Optimized for all devices.

---

## 🖼️ Interface

### Home Page

![Home Page](public/images/index.png)

### Image Management

![Image Management](public/images/add.png)

### About Page

![About Page](public/images/about.png)

---

## ⚙️ Functionality

1. **Gallery**: Displays images fetched from Cloudinary.

2. **Add Image**: Upload images with titles and descriptions.

3. **Delete Image**: Remove images from the gallery.

4. **Authentication**: Login functionality using Firebase.

5. **Visitor Count**: Tracks and displays the number of visitors using MongoDB.

---

## 🛠️ Technology Stack

- **Frontend**: React, Next.js, Tailwind CSS

- **Backend**: Node.js, MongoDB

- **Authentication**: Firebase

- **Image Storage**: Cloudinary

- **Deployment**: Vercel

---

## 📋 Requirements

- Node.js (v16 or higher)

- MongoDB Atlas or local MongoDB instance

- Cloudinary account

- Firebase project with authentication enabled

- Environment variables:

  - `NEXT_PUBLIC_FIREBASE_API_KEY`

  - `NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`

  - `NEXT_PUBLIC_FIREBASE_PROJECT_ID`

  - `NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`

  - `NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID`

  - `NEXT_PUBLIC_FIREBASE_APP_ID`

  - `CLOUDINARY_CLOUD_NAME`

  - `CLOUDINARY_API_KEY`

  - `CLOUDINARY_API_SECRET`

  - `MONGODB_URI`

---

## 🚀 Installation

1. Clone the repository:

   ```bash

   git clone https://github.com/your-username/artifex-website.git

   cd artifex-website

   

2. Install dependencies:

   ```bash

   npm run install

   pip install -r requirements.txt

   

3. Run the development server:

   ```bash

   - npm run dev

   - npm run build

   - npm run start

   - Open http://localhost:3000 in your browser to view the project.

## Project Structure

      artifex_website/

      ├── app/

      │   ├── add/

      │   │   └── page.js          # Add Image Page

      │   ├── api/

      │   │   ├── route.js         # API for image management

      │   │   └── visitor-count/

      │   │       └── route.js     # Visitor count API

      │   ├── changes/

      │   │   └── page.js          # Manage Images Page

      │   ├── components/

      │   │   ├── footer.js        # Footer Component

      │   │   ├── header.js        # Header Component

      │   │   ├── index.js         # Gallery Component

      │   │   └── remove.js        # Remove Image Component

      │   ├── firebase/

      │   │   └── config.js        # Firebase Configuration

      │   ├── globals.css          # Global Styles

      │   ├── info/

      │   │   └── page.js          # About Page

      │   ├── layout.js            # Root Layout

      │   ├── page.js              # Home Page

      │   ├── sign-in/

      │   │   └── page.js          # Sign-In Page

      │   └── utils/

      │       └── cloudinary.js    # Cloudinary Configuration

      ├── .gitignore               # Git Ignore File

      ├── LICENSE                  # License File

      ├── README.md                # Project Documentation

      ├── jsconfig.json            # JavaScript Config

      ├── next.config.mjs         # Next.js Config

      ├── package.json             # Project Metadata and Scripts

      ├── postcss.config.mjs       # PostCSS Config

      └── tailwind.config.js       # Tailwind CSS Config

## Acknowledgments

  - Cloudinary for image storage.


  - Firebase for authentication.


  - MongoDB for visitor tracking.


  - Next.js for the framework.


  - Tailwind CSS for styling.





# Feel free to contribute to this project by submitting issues or pull requests. Happy coding!