DevLinks 🔗

A platform to manage and share all your important links in one place! DevLinks allows users to create a personalized page with links to their social media profiles, portfolio, and other relevant resources. It features user authentication, link management, and a clean, responsive design.

🚀 Key Features

• User Authentication: Securely register and log in using email and password with Firebase Authentication.
• Link Management: Add, edit, and delete links to your profile through an intuitive admin interface.
• Social Media Integration: Easily add links to your social media profiles.
• Customizable Appearance: Customize the color, background color, and font of your links.
• Private Routes: Secure admin areas are protected, requiring authentication to access.
• Real-time Updates: Links are fetched and updated in real-time using Firebase Firestore.
• Responsive Design: Works seamlessly on desktops, tablets, and mobile devices.
• Toast Notifications: Provides user-friendly feedback through toast notifications.

🛠️ Tech Stack

• Frontend:
  • React
  • React Router DOM
  • React Icons
  • React Toastify
  • Tailwind CSS
• Backend:
  • Firebase Authentication
  • Firebase Firestore
• Build Tool:
  • Vite
• Languages:
  • TypeScript
  • JavaScript
• Other:
  • ESLint
  • Node.js
  • npm

📦 Getting Started

Follow these steps to get the project up and running on your local machine.

Prerequisites

• Node.js (version >= 18)
• npm (or yarn/pnpm)
• Firebase project with Authentication and Firestore enabled

Installation

1. Clone the repository:

   git clone <repository_url>
   cd devlinks

2. Install dependencies:

   npm install

3. Configure Firebase:

   • Create a .env file in the root directory.

   • Add your Firebase configuration details to the .env file:

     VITE_FIREBASE_API_KEY=YOUR_API_KEY
     VITE_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
     VITE_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
     VITE_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
     VITE_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
     VITE_FIREBASE_APP_ID=YOUR_APP_ID
     

     Note: Replace YOUR_... with your actual Firebase project credentials.

Running Locally

1. Start the development server:

   npm run dev

2. Open your browser and navigate to http://localhost:5173 (or the port Vite assigns).

💻 Usage

1. Registration: Create a new account by navigating to the /register page.
2. Login: Log in to your existing account by navigating to the /login page.
3. Home: After logging in, you will be redirected to the home page (/), where you can view your links and social media links.
4. Admin: Manage your links by navigating to the /admin page (requires authentication). Here, you can add, edit, and delete links.
5. Social Links: Manage your social media links by navigating to the /admin/social page (requires authentication).

📂 Project Structure

devlinks/
├── src/
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── Input.tsx
│   │   └── ...
│   ├── pages/
│   │   ├── admin/
│   │   │   └── index.tsx
│   │   ├── home/
│   │   │   └── index.tsx
│   │   ├── login/
│   │   │   └── index.tsx
│   │   ├── register/
│   │   │   └── index.tsx
│   │   └── network/
│   │       └── index.tsx
│   ├── routes/
│   │   └── private.tsx
│   ├── services/
│   │   └── firebaseConection.tsx
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── vite.config.ts
├── package.json
├── tsconfig.json
├── .eslintrc.cjs
├── .env
└── README.md

📸 Screenshots

---

📅 Projeto criado para estudos e prática pessoal