Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrianoescarabote/link-sharing-app
This project involves the development of a full-stack link-sharing application built specifically for developers .This is the front-end repository for the project.
https://github.com/adrianoescarabote/link-sharing-app
jest linksharing nextjs storybook tailwindcss testing-library typescript
Last synced: 1 day ago
JSON representation
This project involves the development of a full-stack link-sharing application built specifically for developers .This is the front-end repository for the project.
- Host: GitHub
- URL: https://github.com/adrianoescarabote/link-sharing-app
- Owner: AdrianoEscarabote
- License: mit
- Created: 2023-06-29T18:30:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-04T01:20:49.000Z (4 months ago)
- Last Synced: 2024-11-20T18:43:38.579Z (2 months ago)
- Topics: jest, linksharing, nextjs, storybook, tailwindcss, testing-library, typescript
- Language: TypeScript
- Homepage: https://link-sharing-app-alpha.vercel.app/
- Size: 853 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Link-sharing app
This is a solution to the [Link-sharing app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/linksharing-app-Fbt7yweGsT). Frontend Mentor challenges help you improve your coding skills by building realistic projects. This is the front-end repository if you want to see the backend you can access this link: [Backend Repository](https://github.com/AdrianoEscarabote/link-sharing-backend)
## Contents
- [The challenge](#the-challenge)
- [Continued development](#continued-development)
- [Setup](#setup)
- [Technologies Used](#technologies-used)
- [Author](#author)
- [License](#📝-license)
## The challenge
**My app allows users to:**
- Easily create, read, update, and delete links, and instantly see previews displayed in a mobile mockup.
- Get helpful validations if they submit the links form without a valid URL or with an incorrect URL pattern for the platform.
- Effortlessly rearrange their links through a simple drag-and-drop feature.
Enhance their profiles by adding details such as a profile picture, first name, last name, and email.
- Receive prompt notifications if they attempt to save the profile details form without entering a first or last name.
- Preview their DevLinks profile and conveniently copy the link to their clipboard for easy sharing.
- Enjoy a responsive design that adapts to the optimal layout based on their device's screen size.
- Interact seamlessly with all elements on the page with visible hover and focus states.
- **Bonus**: Store their details securely in a database
- **Bonus**: Create a personalized account and log in
## Continued development
This was my first fullstack project, and I'm incredibly proud to have successfully completed it. Throughout the entire process, from planning to development and hosting, I encountered various challenges. I believe this project represents my best work to date, and it's also the largest one I've ever undertaken. I'm extremely pleased with the results achieved.
Looking ahead, I'm eager to embark on even more ambitious fullstack projects while continuing to enhance my backend development skills. My goal is to always seek new knowledge and consistently improve the skills I already possess.
## Setup
Follow these steps to set up the project:
Clone the project repository using the following command:
```sh
git clone https://github.com/AdrianoEscarabote/Link-sharing-app
```
Navigate to the project's root directory:
```sh
cd Link-sharing-app/
```
Install project dependencies by running:
```sh
npm install
```
### Development
To start the development server and preview your application, use the following command:
```sh
npm run dev
```
### Testing
Run tests by executing the following command:
```sh
npm run test
```
### Storybook
Explore and visualize components using Storybook with this command:
```sh
npm run storybook
```
## Technologies Used
**Operational System**
**Front-end**
**Back-end**
**Tools**
## Author
👤 **AdrianoEscarabote**
- Github: [@AdrianoEscarabote](https://github.com/AdrianoEscarabote)
- Linkedin: [@AdrianoEscarabote](https://www.linkedin.com/in/AdrianoEscarabote/)
- Frontend Mentor: [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)
- Twitter: [@drianEscarabote](https://twitter.com/drianEscarabote)
## 📝 License
Copyright © 2023 [AdrianoEscarabote](https://github.com/AdrianoEscarabote).
This project is [MIT](https://github.com/AdrianoEscarabote/Link-sharing-app/blob/main/LICENSE) licensed.
---
## Show your support
Give a ⭐️ if this project helped you!