/TinyURLs

An app that allows users to shorten long URLs. Built with TypeScript, React JS and Express + Testing with Jest.

Primary LanguageTypeScript

TinyURLs ✂️

TinyURLs is an app that allows users to shorten long URLs.

This project's goal is to revisit an old project made with Node JS, Express and EJS templates: TinyApp, and rebuild it using TypeScript, React JS and Express.

🔴 This project's goals were:

  • Learn TypeScript.
  • Learn how to use TypeScript with React.
  • Learn how to pass down and handle props with TypeScript.
  • Learn how to manage state with TypeScript.

ERD

The ERD is in the back-end folder.

Features

  • A user can generate a short URL by submitting a long URL.
  • They can login or register to save their generated tiny URLs.
  • They can delete or edit the URLs.
  • They can see how many times their tiny URL was clicked.
  • When they click on a tiny URL, they're redirected to its long URL.
  • They can see how many times the URL was clicked and when was the last visit.

Testing with Jest

Since the project is limited in scope, I decided to include some tests for different parts of the app.

The result of these tests is 100% coverage.

Test results

Setup

  1. Create the .env by using .env.example as a reference: cp .env.example .env
  2. Update the .env file with your correct local information : username, password, database, port.
  3. Install dependencies: npm i in both front-end and back-end folders.
  4. cd back-end then npm start to run the Server, and cd front-end to run the App.
  5. To reset the database: npm run db:reset.

Final Product

TinyURLs_App_Overview.mp4

App_Overview

Built with

  • Database

    • PostgreSQL

  • Back-end:

    • express
    • TypeScript
    • Node JS
    • bcryptjs
    • dotenv
    • method-override
    • morgan
    • pg
    • nodemon

  • Front-end

    • React JS
    • TypeScript
    • React-Router
    • React-Cookie
    • React-Bootstrap
    • SASS
    • bcryptjs
    • axios
    • moment