Read this in other languages: Русский, English.
The application solves the problem of storing & categorizing links to useful online-services.
Deployment here.
- Registration with email confirmation & Authorization
- Password recovery via email
- 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
- Full-fledged CRUD API for the groups & collections
- Ability to change a group of a created collection
- Automatic data scraping of resources:
- Retrieving favicons, titles, descriptions, and domain names
- Links searching functionality within the considered collection:
- Search is made by the link title & the resource domain
- Error notifications
| 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 |
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.
