Link-sharing app

Table of contents

• Overview
  • The features
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

Features

Users should be able to:

• Create, read, update, delete links and see previews in the mobile mockup
• Receive validations if the links form is submitted without a URL or with the wrong URL pattern for the platform
• Drag and drop links to reorder them
• Add profile details like profile picture, first name, last name, and email
• Receive validations if the profile details form is saved with no first or last name
• Preview their devlinks profile and copy the link to their clipboard
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: Save details to a database (build the project as a full-stack app)
• Bonus: Create an account and log in (add user authentication to the full-stack app)

Screenshot

Links

• Solution URL: https://github.com/leoikeh99/link-sharing-app
• Live Site URL: https://link-sharing-app-three.vercel.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Styled Components - For styles
• MongoDB - Database

Useful resources

• DnDKit - Great Drag n Drop library.

Author

• Website - Leonard Ikeh
• Frontend Mentor - @leonard
• Twitter - @wazza_dev