Giter Club home page Giter Club logo

curty's Introduction

Curty - URL Shortner

Curty is a modern open source URL shortner made with NextJS and that use the Curty Backend API to make custom short links.

๐Ÿ“‹ Description

This NextJS 13 application comes with a fully functional authentication system based on JWT Tokens.

Main Features:

  • Fully typed with typescript
  • Login and register use cases
  • Free and open source
  • Design with elegant color palette and modals
  • Automatic JWT Token refresh
  • useAuth() hook to easily manage the user section
  • Persistence section with cookies
  • Integration with Curty Restful API
  • Providers to manage data
  • Fast refresh using vercel and NextJS

Tech stack:

  • NextJS
  • React Hook Form
  • Typescript
  • Tailwind
  • PostCSS
  • Nookies

๐Ÿš€ Getting Started:

These instructions enable you to obtain a copy of this project in your local machine for development purpose.

Prerequisites

  • Node.js v18 or higher
  • npm v8 or higher

Clone this repo

git clone https://github.com/hakcolt/curty.git

Install the necessaries packages:

npm install

Run development server:

npm run dev

โš™๏ธ How it works

When we access the https://curty.hakcolt.com, we go through the following steps:

1. Authentication Flow:

The user sends a request to theย https://s.hakcolt.com/api/users/signinย endpoint, submitting the E-Mail address and password of the user in the request body. The server then validates the user credentials and, if valid, generates a JWT access token and a JWT refresh token. The access token is used to access the protected resources, while the refresh token is used to obtain a new access token when the current access token expires. The access token is sent in the response body, while the refresh token is sent in the response cookies.

If the user does not have an account, he can create one in the registration section that sends a request to https://s.hakcolt.com/api/users/signiup, then he'll be redirected to login section again.

2. Fetching data:

The user fetch the user data and links from backend passing the access token on header. If the access token is invalid or expires, a request will be made to https://s.hakcolt.com/api/users/refresh and the access token is automatically updated.

Now the user can see and manage the links he created, as well as create new links, as shown bellow.

3. Creating links:

To create a link you need the url and the path to access that link; the path must be unique, so you can't defined a path that already exists in the database,. You can also set a name for this link so that you can identity it most easily.

The user sends a POST request to https://s.hakcolt.com/api/links passing the link attributes in body and if everything goes as expected, the link will be save and shown on the home page.

๐Ÿ“„ License

This project is on the MIT license. See the file LICENSE.md for more details.

โœ’๏ธ Authors

Note: If you liked this project, consider giving it a star. It won't cost you anything and that way you help me a lot.


Made with โค๏ธ in Brazil.

curty's People

Contributors

hakcolt avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.