stanleyclaudius/url-shortener

Custom URL shortener application that created using PERN stack with Typescript and TypeORM

URL Shortener Application

An awesome URL Shortener application based on website
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact
6. Acknowledgments

About The Project

URL Shortener Application is a web application that allow their user to shorten a URL based on the original one. The shorter URL can be customize as well by user. If the shorter URL is not provided, then the system will automatically generate a random short URL for their user. This application also came with basic authentication features as well, such as login, register, and logout.

back to top

Built With

Main technology used to built this application are listed below:

• Typescript
• React.js
• Node.js
• Express.js
• Tailwind CSS
• PostgreSQL
• Vercel

back to top

Getting Started

To get started with this project locally, follow below steps:

Prerequisites

Make sure you have package manager (either npm or yarn)

FYI: This project uses yarn as package manager, but you're free to use npm too.

• Install Yarn (Only for user who want to use yarn)

  npm i -g yarn
  

Installation

Below steps will guide you through the local installation process of this application

1. Clone the repo

   git clone https://github.com/stanleyclaudius/url-shortener.git
   

2. Install project dependency
   Make sure that your terminal pointing at the root directory of this project (url-shortener folder). And you can open up 2 terminal to run below commands:

   cd client && yarn install
   

   cd server && yarn install
   

3. Complete the .env variable
   Rename .env.example file at server directory become .env, then fill the value for every key. Below is the guideline for filling the .env value:
   

   Key	What To Fill	Example Value
   PORT	Your server port	5000
   DB_NAME	Your database name	url_shortify
   DB_USER	Your PostgreSQL username	postgres
   DB_PASS	Your PostgreSQL password	root
   CLIENT_URL	Your client side URL	http://localhost:3000
   ACCESS_TOKEN_SECRET	Random complex string for JWT	DUhxdx183)_--aACN#2%
   REFRESH_TOKEN_SECRET	Random complex string for JWT	17hdjcD7ud(-*&732~

4. Create a database with name corresponding to your DB_NAME value at .env file
5. Change directory to client folder, and look for fetchData.ts file at client/src/utils/ folder, then change axios.defaults.baseURL to your server url (e.g. http://localhost:5000)
6. Lastly, spin off the application by running 2 terminal at the same time, with commands such as below:

   cd client && yarn start
   

   cd server && yarn dev
   

back to top

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

back to top

Contact

LinkedIn: Stanley Claudius

Project Link: https://github.com/stanleyclaudius/url-shortener

back to top

Acknowledgments

Special thanks to:

• Othneildrew for providing an amazing README template.
• React Icons for providing icon to be used in this application.
• Tailwind CSS for providing CSS framework to be used in this application.
• Vercel for providing frontend hosting service for this application.
• Heroku for providing backend hosting service for this application.

back to top