Description: Project is build using Angular, Node.js, Express.js, MySQL
- This is a url shortener web app which converts the original url to short and on using the short url generated it redirects the user to the original URL.
- User can also give his own custom name(optional) for the url which will be attached to the root url to form the full url which will be in usable form. This should be of min length of 5 characters.
- On statistics page, on entering a valid custom url address either full url or short url id/ custom name to get the insights about it. That is, shows the total num of views of the custom url, viewer ip, generates the graph of views/month
git clone https://github.com/divya661/url-shortener.git
cd url-shortener
cd app-ui\url-shortener
npm install
ng serve
http://localhost:4200/index
cd app-server
npm install
- Create database
url_shortener
usingCreate database url_shortener;
- Change the
password
indb_config.js
file to password of your database inapp-server
folder - Create the tables
urls
andstats
in your database by running the below given DDL commands npm start
create table urls(url_id int not null auto_increment,url_original varchar(5000) not null,url_short varchar(100),url_datetime datetime, url_ip varchar(16),url_num_of_views int,primary key(url_id) );
create table stats(stat_id int auto_increment, url_id int,click_date datetime,url_ip varchar(16),url_short varchar(100),primary key(stat_id),constraint fk_url_id foreign key(url_id) references urls(url_id) on delete cascade);
The schema of the database and tables is present is schema.txt
in app-server
folder or check here https://github.com/divya661/url-shortener/blob/master/app-server/schema.txt
After running on my localhost results were obtained by me are concluded in the following below images:
- home_page.jpg
- result_page.jpg
- stat_page.jpg
- urls_mysql_table.jpg
- stats_mysql_table.jpg
- custom_url_name_added.jpg
- added_new_url.jpg
- statistics_api_result.jpg