ShortWeb is a web application that allows you to shorten long URLs and share them easily. It also stores your urls if you are logged in. You can also create notes for each short url you create. It also has in-built search functionality for retrieving your urls in future. The application is integrated with VirusTotal API to ensure that malicious urls are not propagated through our medium. It also uses client side caching for faster redirection.
ShortWeb offers the following features to enhance your web experience:
- You can create short and easy-to-share URLs from any long URL.
- You can be assured that the URLs you generate are safe and virus-free, thanks to the VirusTotal API integration.
- You can enjoy faster redirection from the short URLs to the original ones, thanks to the client-side caching mechanism.
- You can sign up for a free account and access more features, such as:
- Token-based authentication for secure login and logout.
- Click analysis for your short URLs, such as number of clicks, date of creation, and expiration date.
- Search functionality for finding your short URLs by keywords or notes.
- Notes functionality for adding and editing notes to your short URLs.
- Autocomplete functionality for suggesting possible short URLs based on your input.
To run the project, you need to have Node.js, npm, and MongoDB installed on your system.
- Clone the repository from GitHub using
git clone https://github.com/SalmanHabeeb/ShortWeb.git
. - Navigate to the project directory using
cd ShortWeb
. - Navigate to the subdirectory server and run
npm install
. - Create a .env file in the server directory with the following variables:
PORT = <Server port address>
HOST = <host name>
LOCAL_CLIENT_APP = <Local Client Url>
LOCAL_SERVER_API = <Local Server Url>
LOCAL_MONGO_URL = <Mongo Cluster Connection Url>
KEY_FOR_USER_AUTH_TOKEN_GEN = <Token generation secret key>
VIRUSTOTAL_API_KEY = <Your VirusTotal API key>
- Start the server using
npm run devStart
. - Open another terminal and navigate to the client directory using
cd client
. - Install the dependencies using
npm install
. - Create a .env file in the client directory with the following variables:
REACT_APP_LOCAL_SERVER_API = <Local host base api url>
- Start the client using
npm start
. - Open your browser and go to
http://localhost:3000
to use the application.
The project consists of two parts: the server and the client.
-
The server is built using Express, a web framework for Node.js. It handles the requests from the client and interacts with the MongoDB database. It also provides an API for creating and retrieving short URLs.
-
The user interface is built using React. It allows the user to create short urls, browse previously created urls, create and delete account and view analysis of each created url.
The client is the front-end part of the application that provides the user interface. It consists of the following pages:
- Landing page: This is the main page where users can enter a long URL and get a short URL in return. They can also see a list of previously generated short URLs and their statistics. This page does not require the user to log in, so anyone can use it to create and share short URLs.
- Signup page: This is the page where users can create a free account by providing their name, email, and password. Having an account allows the user to access more features, such as notes, search, and profile.
- Login page: This is the page where users can log in to their existing account by providing their email and password. They will receive a token that will be stored in their browser's local storage and used for authentication.
- Search page: This is the page where users can search for their short URLs by keywords or notes. They can also use the autocomplete feature that will suggest possible matches as they type. Users can access this page by clicking on the search tab in the navigation bar.
- Profile page: This is the page where users can view and edit their personal details, namely email, and password. They can also delete their account if they wish to do so. Users can access this page by clicking on profile tab in the navigation bar.
The server provides the following API endpoints for the client:
/api/short/create
: GET - for creating short URLs from long URLs. The request body should contain the long URL aslongUrl
. The response body will contain the short URL asshortUrl
./api/short
: GET - for obtaining short URLs and their metadata. The request query should contain the short URL asshortUrl
. The response body will contain the long URL asfull
./api/user
: GET - for getting user details. The request header should contain the user token astoken
. The response body will contain the user emailemail
./api/user/delete
: POST - for deleting user account. The request header should contain the user token astoken
. The response body will contain a success message as{success: true}
./api/password
: POST - for changing user password. The request header should contain the user token astoken
. The request body should contain the old password and the new password asoldPassword
andnewPassword
. The response body will contain a success message as{success: true}
./api/signup
: POST - for creating a new user account. The request body should contain the user name, email, and password asname
,email
, andpassword
. The response body will contain a success message as{success: true}
./api/login
: POST - for logging in an existing user account. The request body should contain the user email and password asemail
andpassword
. The response body will contain the user token astoken
./api/login/verify
: GET - to verify whether a user is logged in. The request header should contain the user token astoken
. The response body will contain a boolean value asloggedIn
./api/logout
: GET - to log out a user. The request header should contain the user token astoken
. The response body will contain a success message as{success: true}
./api/notes/edit
: GET - to edit notes for a short URL. The request header should contain the user token astoken
. The request query should contain the short URL and the new note asshortUrl
andnote
. The response body will contain a success message as{success: true}
./api/search/results
: GET - to get search results for a query. The request header should contain the user token astoken
. The request query should contain the search query asquery
and field asfield
. The response body will contain an array of short URLs that match the query asresults
./api/search/suggestions
: GET - to get suggestions for a query being typed. The request header should contain the user token astoken
. The request query should contain the partial query asquery
and field of search asfield
. The response body will contain an array of possible suggestions assuggestions
.
From this project, I learned how to:
- Use React to create a dynamic and responsive web interface.
- Use Express to create a RESTful API and handle different types of requests.
- Use safe hashing algorithms to encrypt user data.
- Use tokens for user-authentication.
- Use MongoDB to store and query data
- Use autocomplete and search indexes for faster search.
I used the following resources and references while working on this project: