https://github.com/peliah/hng-link-share

https://github.com/peliah/hng-link-share

Last synced: about 11 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/peliah/hng-link-share
• Owner: Peliah
• Created: 2024-07-23T00:00:32.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-25T11:22:20.000Z (4 months ago)
• Last Synced: 2024-07-25T19:28:15.286Z (4 months ago)
• Language: TypeScript
• Size: 87.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Full-Stack Link-Sharing Application

## Task Overview

This project involves building a full-stack link-sharing application using Next.js and TypeScript. The goal is to implement a pixel-perfect version of the provided design, focusing on CRUD functionality, user authentication, and responsiveness.

## Deliverables

### Feature Implementation

1. **CRUD Links**: Create, read, update, and delete links with previews.

2. **Form Validations**: Ensure URL correctness for links and that profile details include a profile picture, first and last names, and an email.

3. **Profile Details**: Users can add a profile picture, first name, last name, and email.

4. **Profile Preview**: Users can preview their profile and copy the profile link to the clipboard.

5. **Responsive Layout**: Ensure optimal layout and responsiveness across different device screen sizes.

6. **Interactive States**: Implement hover and focus states for all interactive elements.

7. **Access Control**: Only the logged-in owner of a link can edit it.

### Full-Stack Application

- **Database Integration**: Use a database (like Firebase or Supabase) to save details.

- **User Authentication**: Implement user account creation and login functionalities.

## Technology Requirements

- **Framework**: Next.js with TypeScript

- **Design**: Follow the provided design system for colors, fonts, and image assets.

## Steps to Complete the Task

### Design and Layout

- Follow the provided [Figma design](https://www.figma.com/design/gY3QlGMHxB81euVxIYfBSr/link-sharing-app?node-id=26-2&m=dev&t=jGBTLwo88ioEapGg-1) closely.

- Implement layouts for mobile, tablet, and desktop.

- Ensure pixel-perfect implementation.

### Feature Development

#### Links Management

- Implement CRUD operations for links.

- Validate URLs in the form.

#### Profile Management

- Add fields for profile picture, first name, last name, and email.

- Validate profile details in the form.

#### Profile Preview

- Allow users to preview their profile.

- Enable link copying functionality.

### Responsive Design

- Ensure the application is responsive across different devices.

### Full-Stack Integration

#### Database

- Save link and profile details using a database like Firebase or Supabase.

#### User Authentication

- Implement account creation and login functionalities.

## Testing and Validation

- Thoroughly test all features.

- Validate form inputs and user interactions.

- Test the application across different devices and screen sizes.

## Evaluation Criteria

### Completeness

- Are all required features implemented and functional?

- Does the application handle all necessary states and validations?

### Quality

- Is the design visually appealing and consistent with the Figma design?

- Does the application perform well across different devices and browsers?

### Functionality

- Are CRUD operations for links and profile management working correctly?

- Is the user authentication and database integration properly implemented?

## Submission

- Submit the link to your GitHub repository containing the source code.

- Ensure your code follows the design specifications.

- Provide a live demo link if possible.

### Submission Link

[Submit Here](https://forms.gle/SzL2Eqghcgbr1xmo8)

### Deadline

**24th of July, Wednesday: 11:59 PM**