Frontend Mentor - Link-sharing app solution

This is a solution to the Link-sharing app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• The challenge
• Preview
• Links
• How to run locally
• Built with
  • Stack
  • Deployment
• Author

The challenge

• Users should login to the app
• Create, read, update, delete social links and see their previews with form validation
• Save their details to a database
• Drag and drop links to reorder them
• Add profile details, profile picture upload
• Preview their devlinks profile and copy the link to their clipboard to share
• Full responsiveness

Preview

Links

• Solution URL: Link Sharing App

How to run locally

• Download Bun
• Clone the repo
• Setup a db on Neon and add the connection string to the .env file
• Setup a Github OAuth app and add the client id and secret to the .env file
• Setup a Uploadthing account and add the api key to the .env file
• Check .env.example for var names.
• Run bun i to install dependencies
• Run bun db:push to push your schema to the database
• Run bun dev to start the development server
• Open http://localhost:3000 with your browser to see the result.

Built with

Stack

• React
• Next.js
• Typescript
• [Tailwind] (https://tailwindcss.com/)
• React Query - implemented in tRPC
• [Formik] (https://formik.org/)
• [Zod] (https://zod.dev/) - validation library
• [tRPC] (https://trpc.io/) - For server-client communication
• [Drizzle] (https://orm.drizzle.team/) - DB ORM, postgres
• [NextAuth] (https://next-auth.js.org/)

Services

• [Vercel] (https://vercel.com/) - deployment
• [Neon] (https://neon.tech/) - postgres db
• [Uploadthing] (https://uploadthing.com/) - image upload

Author

• LinkedIn - Donato Di Zenzo
• Frontend Mentor - @dodiz