Link Sharing App 🚀

This is my Qwik practice project✨

The original idea and designs are from Frontend Mentor.

Overview 👀

Built with

• Qwik
• Modular Forms
• Valibot
• json-server - until I implement database

The original challenge

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
  → profile picture is not done yet
• 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)

Try out in a local environment 👩‍💻

1. Install dependencies

pnpm i

I'm using pnpm 😉

2. Run json-server

pnpm run json # or npx json-server ./data/db.json

This will run on "https://localhost:3000" by default. If you want to change the port, use the --port flag.

3. Start development server

pnpm start

...and Voila! 🥳