https://github.com/kaua26323/devlinks

App para gerenciamentos de links sociais.
https://github.com/kaua26323/devlinks

firebase react-router reactjs tailwind-css typescript

Last synced: 3 months ago
JSON representation

App para gerenciamentos de links sociais.

• Host: GitHub
• URL: https://github.com/kaua26323/devlinks
• Owner: Kaua26323
• License: mit
• Created: 2025-05-27T15:05:12.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-27T15:16:23.000Z (about 1 year ago)
• Last Synced: 2025-06-08T07:07:11.923Z (about 1 year ago)
• Topics: firebase, react-router, reactjs, tailwind-css, typescript
• Language: TypeScript
• Homepage:
• Size: 50.8 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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:

    ```bash

    git clone 

    cd devlinks

    ```

2.  Install dependencies:

    ```bash

    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:

    ```bash

    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

![alt text](public/links_1.png)

![alt text](public/links_2.png)

![alt text](public/links_3.png)

![alt text](public/links_4.png)

![alt text](public/links_5.png)

![alt text](public/links_6.png)

![alt text](public/links_7.png)

---

📅 Projeto criado para estudos e prática pessoal