https://github.com/vladislav0art/artilinks

ArtiLinks - Bookmark Manager that helps categorize and save bookmarks. Fullstack project created using NextJS
https://github.com/vladislav0art/artilinks

http-only-cookies jwt jwt-authentication mongodb mongoose nextjs nodemailer open-graph-scraper reactjs

Last synced: 17 days ago
JSON representation

ArtiLinks - Bookmark Manager that helps categorize and save bookmarks. Fullstack project created using NextJS

• Host: GitHub
• URL: https://github.com/vladislav0art/artilinks
• Owner: Vladislav0Art
• Created: 2022-01-11T15:09:33.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-08T11:28:46.000Z (over 1 year ago)
• Last Synced: 2024-11-19T12:18:00.238Z (3 months ago)
• Topics: http-only-cookies, jwt, jwt-authentication, mongodb, mongoose, nextjs, nodemailer, open-graph-scraper, reactjs
• Language: JavaScript
• Homepage: https://artilinks.vercel.app/
• Size: 49.5 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# **ArtiLinks** - Bookmark Manager

Read this in other languages: [Русский](./README.ru.md), [English](./README.md).

## Project idea:

---

The application solves the problem of storing & categorizing links to useful online-services.

**Deployment** [here](https://artilinks.vercel.app/).

## Implemented functionality:

---

1. Registration with email confirmation & Authorization

1. Password recovery via email

1. Categorization of links (groups & collections):

    - **Group** is a container that stores a set of collections

    - **Collection** is a container that stores the links

    - Example: _Programming_ is a group, _Javascript_ is a collection

1. Full-fledged **CRUD** API for the groups & collections

1. Ability to change a group of a created collection

1. Automatic data scraping of resources:

    - Retrieving favicons, titles, descriptions, and domain names

1. Links searching functionality within the considered collection:

    - Search is made by the link title & the resource domain

1. Error notifications

## Used technologies:

---

| Technology             | Description |

|------------------------|----------|

| NextJS                 | React server-side rendering framework |

| jsonwebtoken           | User Registration & Authentication |

| nodemailer             | Email confirmation & Password recovery |

| MongoDB/Mongoose       | Cloud-based database |

| axios                  | API requests of client & server sides |

| open-graph-scraper     | Data scraping of resources |

| react-transition-group | Animations of rendered components |

## Difficulties encountered & Interesting task:

---

The most time consuming and interesting part was developing the JWT authentication/registration. This approach was new to me, so I had to spend a lot of time searching for information about how to write such functionality correctly. In the end, I implemented a separate service class to handle **refresh/access-tokens**. The main problem was access-token update in the case when user sent a request to the API-protected route, being authenticated, but having an already expired access-token. I found out that the **axios** library supports **interceptor functionality**, which have solved my problem. With an expired access-token, my server returns a **401 authorization error**, in the interceptor response from the server I catch this type of error, send a request to update the tokens, and then try to repeat the original request.

## Screenshots and videos:

---

### **Youtube** video with functionality demonstration:



    

        

    



### Main page screen:



    





    



### Registration & Login:



    

    



### Password Recovering:



    



### Error Notifications:



    



### Dashboard View:



    





    



### Bookmark Editing:



    



### Collection Creation:



    



### Available Dialogs: