Link-Sharing App

A full-stack web application built with Next.js, React, and TypeScript for managing and sharing personalized profile links. Users can create, update, and delete links, customize their profiles, and view real-time profile previews. It also supports reordering links through a drag-and-drop interface, enabling full customization of how profiles are displayed.

Table of Contents

• Link-Sharing App
  • Table of Contents
  • Features
  • Tech Stack
  • Installation
  • Deployment
    • Option 1: Deploying with Vercel (or Similar Providers)
    • Option 2: Containerized Deployment using Azure
  • Screenshots
  • Links
  • My Process
    • Built with
    • Code Quality with
  • Author

Features

• Link Management: Add, edit, delete, and reorder links via drag-and-drop functionality.
• Profile Customization: Update profile details, including profile picture, first name, last name, and email.
• Real-Time Preview: See live changes to your profile before saving.
• Form Handling & Validation: Forms are powered by React Hook Form with schema validation using Zod.
• State Management: Application state is managed with Zustand for a clean, scalable architecture.
• User Authentication: Secure authentication system using NextAuth.
• Image Upload: Upload profile pictures securely to Azure Blob Storage.
• Clipboard Integration: Easily copy your profile URL with one click.
• Public Profile Sharing: Share your profile link with others, allowing anyone to view your social links and profile information.
• Responsive Design: Optimized for all screen sizes with a clean mobile-first layout.

Tech Stack

• Frontend: React, TypeScript, Next.js, Tailwind CSS, Shadcn
• Forms: React Hook Form, Zod (for validation)
• State Management: Zustand
• Backend: Prisma ORM, PostgreSQL
• Authentication: NextAuth
• File Storage: Azure Blob Storage
• Database: PostgreSQL
• Component Documentation: Storybook

Installation

1. Clone the repository:

   git clone https://github.com/tatasadi/link-sharing-app.git
   cd link-sharing-app

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the root directory with the following keys (update values accordingly):

   DATABASE_URL=your_postgresql_database_url
   AUTH_SECRET=your_auth_secret
   
   # Azure Blob Storage Configuration
   AZURE_STORAGE_CONNECTION_STRING=your_azure_storage_connection_string
   AZURE_STORAGE_CONTAINER_NAME=your_azure_container_name
   AZURE_STORAGE_NAME=your_azure_storage_name
   

4. Run the Prisma migrations:

   npx prisma migrate dev --name init

5. Start the development server:

   npm run dev

   The app should now be running on http://localhost:3000.

Deployment

This project can be deployed using Vercel or any other hosting provider that supports Next.js. In addition, the project can be containerized and deployed using Azure Container Registry (ACR) and Azure Container Apps via GitHub Actions. Here’s an overview of both approaches:

Option 1: Deploying with Vercel (or Similar Providers)

1. Push your project to a Git repository.
2. Link your repository to Vercel (or your preferred hosting provider) and set up the necessary environment variables.
3. Deploy the app using Vercel's deployment pipeline.
   This method leverages Vercel’s serverless infrastructure and automatic previews for every commit.

Option 2: Containerized Deployment using Azure

1. Containerize the Project:

• Build a Docker image for your app using the provided Dockerfile.
• Use GitHub Actions to build and push the image to an Azure Container Registry (ACR).

2. Set Up Azure Container Apps:

• Create an Azure Container Apps environment (optionally integrating it with a VNet).
• Deploy your containerized application by updating the Container App to use the new image from ACR.

3. GitHub Actions Workflow:

• The provided GitHub Actions workflow automates the build, push, and deploy process.
• Update your workflow and environment variables to include your ACR details and your Azure subscription information.

This containerized approach is just one possibility; you can choose it if you’d like to manage the entire deployment via containers. Alternatively, you can still deploy directly to Vercel or other platforms that support Next.js.

Choose the method that best fits your requirements, infrastructure, and scaling needs.

Screenshots

Links

• Solution URL:
  https://github.com/tatasadi/link-sharing-app

My Process

Built with

Code Quality with

Author

• Website - Ehsan Tatasadi
• Frontend Mentor - @tatasadi
• GitHub - @tatasadi
• Linkedin - Ehsan Tatasadi
• X - @etatasadi